В этой статье мы сравним два наиболее популярных инструмента для фронтенд-разработки на сегодняшний день — Vue и React.
Фреймворки и библиотеки стали неотъемлемой частью современного фронтенда. Они полезны там, где много динамически изменяющегося контента. Главной задачей использования библиотек и фреймворков является упрощение процесса разработки. При разработке на чистом JavaScript используется императивный подход, в то время как в библиотеках и фреймворках – декларативный, то есть разработчик описывает то, что хочет получить и не заботится как это произойдет (например, описывает не то, как элементы попадают на страницу, а конечный результат).
React и Vue во многом похожи. Они оба:
По быстродействию, как React, так и Vue — исключительно быстрые, поэтому скорость вряд ли будет решающим фактором при выборе между ними.
В первый раз React был использован в новостной ленте Facebook в 2011 году и позже в ленте Instagram в 2012 году. Исходный код React был открыт в мае 2013 года, поэтому считается, что он был выпущен в 2013 году. Одной из основных причин создания React было желание компании улучшить механизмы формирования интерфейсов их проекта. React разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.
В 2013 году сотрудник Google Эван Ю (Evan You), работая над одним из проектов, пришёл к выводу, что не существует готовых решений для быстрого прототипирования сложных пользовательских интерфейсов веб-приложений: React тогда был на ранней стадии разработки, основными инструментами были такие сложные фреймворки, как AngularJS или Backbone.js. Для решения собственных задач он начал разработку Vue.js. В октябре 2015 года была выпущена версия 1.0, в сентябре 2016 года — версия 2.0. На данный момент Vue.js разрабатывается сообществом людей как opensource-проект.
На сегодняшний день, Vue.js уже несколько лет обходит React по звездам на GitHub (180 000 и 165 000 соответственно).
Опрос State of JavaScript 2020 показывает, что интерес и удовлетворенность от работы с Vue.js практически не отличается от React.
Если сравнивать популярность по количеству поисковых запросов, то React в этом плане опережает Vue.js.
Размер библиотеки React составляет 101.2KB (32.5KB, со сжатием), размер Vue — 84.4 KB (31KB, со сжатием). Кажется, что разница небольшая, но размер JavaScript-кода — это важный показатель, который оказывает сильное влияние на производительность сайтов. Соответственно, чем меньше этот показатель, тем лучше.
Прежде, чем использовать любой из фреймворков, разработчику необходимо очень хорошо знать JavaScript, в том числе стандарт ES 2015+. Считается, что Vue имеет более низкий порог вхождения, чем React, так как более похож на нативный HTML и берет большую часть работы по отрисовке на себя, в то время как React требует много дополнительных действий со стороны разработчика.
Изменения в интерфейсе приложений выполняются путём модификации объектной модели документа (DOM). Существуют такие понятия, как виртуальная DOM и реальная DOM. От того, как именно организован процесс работы с DOM, серьёзно зависит производительность JavaScript-инструментов для разработки интерфейсов.
В React используется виртуальная DOM — это легковесная система, не зависящая от браузера. Одной из основных причин популярности React является то, что эта библиотека весьма эффективно работает с DOM.
В Vue тоже используется виртуальная DOM, но, в сравнении с React, Vue отличается более высокой производительностью и стабильностью. В частности, это подтверждается сторонним сравнением производительности, которое фокусируется на сырой производительности отрисовки/обновления дерева очень простых компонентов.
В React когда состояние компонента изменяется, оно запускает повторную отрисовку всего поддерева компонента, начиная с себя. Чтобы избежать ненужной повторной отрисовки дочерних компонентов, вам нужно либо использовать особый тип компонента (PureComponent), либо реализовывать shouldComponentUpdate (метод, который используется для того, чтобы указать необходимость следующего рендера на основе изменений состояния и входящих параметров) везде где это возможно.
Во Vue зависимости компонента автоматически отслеживаются во время отрисовки, поэтому система точно знает, какие компоненты действительно необходимо повторно отрисовывать при изменении состояния. Каждый компонент можно рассматривать как имеющий shouldComponentUpdate, автоматически реализованный для вас, без ограничений для вложенных компонентов.
В целом, это устраняет необходимость целого класса оптимизаций производительности для разработчика, что позволяет больше сосредоточиться на построении самого приложения по мере его масштабирования.
В React абсолютно всё — это JavaScript. Не только структуры HTML, выраженные через JSX, последние тенденции также включают управление CSS внутри JavaScript. Интерфейсы реализуются через JSX — специальный синтаксис, который работает в JavaScript.
Vue охватывает классические веб-технологии и основывается на них. Он так же может использовать JSX, но практически всегда разработчики используют шаблоны. Любой валидный HTML также будет валидным шаблоном Vue, и это очень удобно — можно писать разметку привычным для разработчика образом и после реализовывать логику с помощью директив — они добавляют к отображаемому DOM особое реактивное поведение, управляемое Vue.
React и Vue очень похожи. Они оба:
В пользу React говорит его популярность. React даёт разработчику более высокий уровень гибкости, что позволяет полностью контролировать рендеринг. Из-за высокого уровня гибкости увеличивается время разработки по сравнению с Vue, но это дает больший контроль над работой приложения (например, специфичные варианты оптимизации в крупных проектах).
Vue имеет меньший размер, более пологую кривую обучения, проще и интуитивно понятнее код, более удобную работу с формами и стилями. В то же время Vue требует меньше усилий со стороны разработчика для оптимизации кода, это позволяет сконцентрироваться на том ЧТО ты делаешь, а не КАК ты это делаешь.
