Что лучше react или vue

Vue vs React Сравнение популярных технологий

В этой статье мы сравним два наиболее популярных инструмента для фронтенд-разработки на сегодняшний день — Vue и React.

Введение

Фреймворки и библиотеки стали неотъемлемой частью современного фронтенда. Они полезны там, где много динамически изменяющегося контента. Главной задачей использования библиотек и фреймворков является упрощение процесса разработки. При разработке на чистом JavaScript используется императивный подход, в то время как в библиотеках и фреймворках – декларативный, то есть разработчик описывает то, что хочет получить и не заботится как это произойдет (например, описывает не то, как элементы попадают на страницу, а конечный результат).

Сходство

React и Vue во многом похожи. Они оба:

используют Virtual DOM; предоставляют реактивность и компонентную структуру; фокусируются на корневой библиотеке, вынося прочие вопросы, такие как роутинг или управление глобальным состоянием приложения, в дополнительные библиотеки.

По быстродействию, как React, так и Vue — исключительно быстрые, поэтому скорость вряд ли будет решающим фактором при выборе между ними.

История

React

В первый раз 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

В React используется виртуальная DOM — это легковесная система, не зависящая от браузера. Одной из основных причин популярности React является то, что эта библиотека весьма эффективно работает с DOM.

В Vue тоже используется виртуальная DOM, но, в сравнении с React, Vue отличается более высокой производительностью и стабильностью. В частности, это подтверждается сторонним сравнением производительности, которое фокусируется на сырой производительности отрисовки/обновления дерева очень простых компонентов.

Усилия для оптимизации

React

В React когда состояние компонента изменяется, оно запускает повторную отрисовку всего поддерева компонента, начиная с себя. Чтобы избежать ненужной повторной отрисовки дочерних компонентов, вам нужно либо использовать особый тип компонента (PureComponent), либо реализовывать shouldComponentUpdate (метод, который используется для того, чтобы указать необходимость следующего рендера на основе изменений состояния и входящих параметров) везде где это возможно.

Во Vue зависимости компонента автоматически отслеживаются во время отрисовки, поэтому система точно знает, какие компоненты действительно необходимо повторно отрисовывать при изменении состояния. Каждый компонент можно рассматривать как имеющий shouldComponentUpdate, автоматически реализованный для вас, без ограничений для вложенных компонентов.

В целом, это устраняет необходимость целого класса оптимизаций производительности для разработчика, что позволяет больше сосредоточиться на построении самого приложения по мере его масштабирования.

JSX vs Шаблоны

React

В React абсолютно всё — это JavaScript. Не только структуры HTML, выраженные через JSX, последние тенденции также включают управление CSS внутри JavaScript. Интерфейсы реализуются через JSX — специальный синтаксис, который работает в JavaScript.

Vue охватывает классические веб-технологии и основывается на них. Он так же может использовать JSX, но практически всегда разработчики используют шаблоны. Любой валидный HTML также будет валидным шаблоном Vue, и это очень удобно — можно писать разметку привычным для разработчика образом и после реализовывать логику с помощью директив — они добавляют к отображаемому DOM особое реактивное поведение, управляемое Vue.

Заключение

React и Vue очень похожи. Они оба:

используют Virtual DOM; предоставляют реактивность и компонентную структуру; имеют большой набор библиотек для расширения возможностей (роутинг, хранение состояния, библиотеки готовых компонентов и др.).

В пользу React говорит его популярность. React даёт разработчику более высокий уровень гибкости, что позволяет полностью контролировать рендеринг. Из-за высокого уровня гибкости увеличивается время разработки по сравнению с Vue, но это дает больший контроль над работой приложения (например, специфичные варианты оптимизации в крупных проектах).

Vue имеет меньший размер, более пологую кривую обучения, проще и интуитивно понятнее код, более удобную работу с формами и стилями. В то же время Vue требует меньше усилий со стороны разработчика для оптимизации кода, это позволяет сконцентрироваться на том ЧТО ты делаешь, а не КАК ты это делаешь.

Источник

Что лучше выбрать в 2020 году — React или Vue?

JavaScript-фреймворки стали неотъемлемой частью каждого современного веб-проекта. Существует множество подобных фреймворков, в результате разработчикам постоянно приходится задаваться вопросом о том, что выбрать. Искать ответ на этот вопрос придётся и в 2020 году.

Если вы это читаете — можно предположить, что вы заняты поиском фреймворка, который станет основой вашего следующего приложения. Вполне возможно, что вы ориентируетесь на ведущие технологии и размышляете о том, что вам лучше подойдёт — библиотека React или фреймворк Vue. Это — непростая дилемма, но решать её, всё равно, нужно. Вот некоторые распространённые вопросы, которыми задаются те, кто выбирает между React и Vue:

Популярность

В мире JavaScript новые фреймворки и библиотеки появляются чуть ли не каждый день. На самом деле, это практически непрерывный процесс, в ходе которого фавориты меняются буквально каждые несколько месяцев.

Взглянем на данные 2019 года и выясним — что популярнее — React или Vue.

Вот Сведения из Google Trends. Здесь представлено несколько графиков, иллюстрирующих популярность React, Vue и Angular. Несложно заметить, что React значительно опережает Vue.

Популярность React, Vue и Angular

Теперь обратимся к результатам исследования Stack Overflow. React возглавляет рейтинг фреймворков, которые сильнее всего нравятся разработчикам. А Vue лишь немного от него отстаёт. Vue, с момента выхода в 2014 году, за довольно короткое время приобрёл немалую популярность.

Результаты исследования Stack Overflow

История

Этот JS-фреймворк создал в 2014 году Эван Ю, бывший сотрудник Google. За спиной Vue нет компаний-технических гигантов. Самый свежий релиз Vue (2.6.10) вышел 20 марта 2019 года.

С момента появления Vue прошло всего 5 лет. Это делает данный фреймворк самой молодой разработкой среди систем подобного уровня. Среди крупных компаний, использующих Vue, можно отметить Alibaba и GitLab. Одной из особенностей Vue является тот факт, что в нём прослеживается смешение возможностей некоторых других успешных JS-фреймворков.

▍React

React — это JavaScript-библиотека, которую создал не самостоятельный программист, а огромная компания. Речь идёт о Facebook. Одной из основных причин создания React было желание компании улучшить механизмы формирования интерфейсов. Эту библиотеку разработали тогда, когда в Facebook столкнулись с некоторыми проблемами, касающимися разработки и поддержки проекта.

Библиотека React известна как мощное средство для создания динамических и интерактивных пользовательских интерфейсов. 6 мая 2019 года вышла самая свежая версия React (16.8.6). Эта библиотека используется для разработки интерфейсов во многих известных компаниях. Среди них — BBC, Instagram, WhatsApp.

Производительность

Изменения в интерфейсе приложений выполняются путём модификации объектной модели документа (DOM). Существуют такие понятия, как виртуальная DOM и реальная DOM. От того, как именно организован процесс работы с DOM, серьёзно зависит производительность JavaScript-инструментов для разработки интерфейсов.

Виртуальная DOM и реальная DOM

▍React

В React используется виртуальная DOM — это легковесная система, не зависящая от браузера. Одной из основных причин популярности React является то, что эта библиотека весьма эффективно работает с DOM.

В Vue тоже используется виртуальная DOM, но, в сравнении с React, Vue отличается более высокой производительностью и стабильностью.

Поддержка сообществ

Сообщества, которые складываются вокруг технологий, серьёзно влияют на их развитие и распространение. В частности, члены сообществ способны оказать помощь основным разработчикам технологий, они создают различные дополнения, они помогают новичкам.

▍React

Поддержкой и развитием самой библиотеки React занимается Facebook. Это даёт тому, кто выбирает данную библиотеку в качестве основы фронтенда своего приложения, довольно высокий уровень уверенности в том, что React в ближайшем будущем не превратится в некий заброшенный всеми проект. Сообщество React-разработчиков создало и поддерживает множество дополнительных инструментов.

Vue — это проект, у истоков которого стоит обычный человек, а не крупная корпорация. Как результат — в первое время после появления этот фреймворк выглядел в глазах разработчиков не особенно надёжным. Однако по прошествии некоторого времени Vue стал чрезвычайно популярным, в его развитие вносит вклад множество программистов. Фактически, можно говорить о том, что именно сообщество Vue-разработчиков — это та сила, которая поддерживает проект.

Размер

Если рассматривать вопрос размера очень упрощённо, то можно сказать, что React немного больше, чем Vue. Размер React — это около 100 Кб, размер Vue — около 80 Кб. Размер JS-кода — это очень важный показатель, который оказывает сильное влияние на производительность веб-проектов. Чем он меньше, тем, естественно, лучше.

Однако тут надо отметить, что React, для реализации определённых возможностей, нуждается в сторонних библиотеках. Одна из таких возможностей — маршрутизация. Vue же — это проект, обладающий более обширным набором стандартных возможностей, хотя и при работе с Vue без дополнений тоже не обойтись. И React и Vue, всё же, обладают достаточно скромными размерами, что делает их вполне подходящими для разработки небольших приложений.

Примеры использования

Прежде чем выбирать технологию для очередного проекта, программисты и управленцы обычно интересуются тем, в каких существующих проектах эта технология уже применяется. Если говорить о том, на чём основаны React и Vue, о JavaScript и других веб-технологиях, то можно сказать, что всё это применяется в бесчисленном количестве компаний. Если же взглянуть на конкретные примеры применения React и Vue, то можно выделить, например, следующие компании.

▍React

Кривая обучаемости

Кривая обучаемости — это графическое представление изменения скорости обучения определённому знанию или виду деятельности. В нашем случае речь идёт о скорости освоения React и Vue. Известно, что Vue освоить легче, чем React.

При проведении исследования StateOfJS респондентам предлагали ответить на различные вопросы о фреймворках. Ниже показаны результаты опроса по React, Vue и Angular.

Результаты опроса по React, Vue и Angular

Вот какой смысл вкладывается в цветовое выделение фрагментов диаграмм.

Цветовая кодировка вариантов ответов на вопросы. Сверху вниз: «Никогда не слышал об этом», «Слышал, но это мне неинтересно», «Слышал, хотел бы изучить», «Пользовался, снова пользоваться не буду», «Пользовался, буду пользоваться снова».

Как видно, многие пользовались React планируют снова пользоваться этой библиотекой. Немало программистов заинтересованы в изучении React. Если же говорить о Vue, то можно отметить, что показатель использования этого фреймворка не так велик, как у React, а показатель, указывающий на заинтересованность в изучении, превышает таковой у React. Это позволяет говорить о том, что Vue — это фреймворк, который очень многие хотят попробовать. В результате, учитывая то, что Vue легче в освоении, можно ожидать, что в будущем возрастёт число тех, кто использовал Vue и планирует использовать снова.

Гибкость

▍React

Ядро React предоставляет лишь базовый функционал. При практическом использовании этой библиотеки её возможности приходится расширять. Это даёт разработчику огромный уровень гибкости в плане выбора дополнительных инструментов. Существуют средства для разработки интерфейсов, идеи, заложенные в которые, можно счесть прямо противоположными тем, которые заложены в React. Например — это Angular — фреймворк, в состав которого включено множество стандартных средств. Плюс этого — готовый набор инструментов, которые хорошо друг с другом сочетаются. Минус — отсутствие того уровня гибкости в выборе средств, который даёт React.

Если говорить о конкретных задачах, решаемых с помощью дополнительных библиотек, используемых с React, то тут можно отметить, например, маршрутизацию, управление состоянием приложений, серверный рендеринг, разработку приложений для мобильных устройств.

Vue, в отличие от React, даёт разработчику более обширный набор стандартных инструментов, позволяющих решать те же задачи, которые в экосистеме React обычно решают с использованием сторонних библиотек.

▍Итоги

Если собрать воедино всё то, о чём мы только что говорили, то можно сделать следующие выводы:

Уважаемые читатели! Если вы недавно занимались подбором фреймворка для своего очередного веб-проекта — просим рассказать о том, что и почему вы выбрали.

Источник

Лучший JavaScript-фреймворк 2021: React или Vue?

При разработке без фреймворков и библиотек JavaScript не обойтись, но компаниям трудно выбирать между популярными React и Vue.js, у каждого есть преимущества и недостатки. Это небольшое руководство по популярным фреймворкам поможет понять, в каких случаях использовать Vue, в каких React, и решить, который из них подойдет для вашего следующего проекта.

Что такое Vue.js и React?

Это с открытым исходным кодом для создания сложных пользовательских интерфейсов.

React обеспечивает повышенную гибкость благодаря использованию «компонентов» — коротких изолированных участков кода, которые помогают разработчикам создавать сложную логику и UI. React взаимодействует с HTML через virtual DOM — копию реального элементов страницы. В копии все элементы представлены как объекты JavaScript. Эти элементы, вместе с декларативным стилем программирования React и односторонним связыванием данных, упрощают и ускоряют разработку.

Vue тоже использует virtual DOM, компоненты и, вдобавок, двустороннее связывание. Однако главная изюминка — его прогрессивная архитектура. Он разработан так, что позволяет разработчикам переносить существующие проекты во фреймворк, подключая фичи по одной, а не все сразу. Инфраструктура Vue.js позволяет создавать многофункциональные приложения. В зависимости от требований проекта вы можете использовать его как полноценный фреймворк или как легковесную библиотеку, а также как нечто среднее между ними.

Сходство

У Vue и React много общих черт и функций. Больше всего их роднит использование virtual DOM.

Кроме того оба фреймворка:

Отличие Vue от React

Между React.js и Vue.js есть несколько различий, которые определяют, для чего каждый из них лучше подходит. Основное заключается в методах, которые Vue и React используют для рендеринга контента в DOM. Vue использует и JSX, а React — только JSX, который по сути является расширением, позволяющим вставлять HTML непосредственно в код JS. JSX может упростить многие сложные задачи, но в то же время может усложнить простые.

Кроме того, ядро React’а предоставляет только компоненты, управление их состоянием и манипуляции с DOM. Остальное пишет и поддерживает сообщество. Опытные разработчики часто предпочитают такую свободу, но новичка может сбить с толку обилие сторонних библиотек и инструментов.

Производительность

Поскольку React и Vue имеют много одинаковых элементов, их производительность примерно равна. Оба фреймворка используют virtual DOM и ленивую загрузку для повышения производительности и скорости загрузки страниц.

В некоторых ситуациях, правда, Vue явно превосходит React. Например, когда вы изменяете состояние компонента React, остальные компоненты в его поддереве также будут повторно рендериться. Вы можете использовать неизменяемые структуры данных shouldComponentUpdate или PureComponent, чтобы предотвратить повторный рендеринг дочерних компонентов, однако это может повысить сложность и привести к несогласованности состояний DOM. Во Vue зависимости отслеживаются, и повторный рендеринг не нужен.

Архитектура приложений

React отличается от других фреймворков и библиотек тем, что не имеет встроенного архитектурного шаблона. Он использует архитектуру. Пользовательские интерфейсы React рендерятся компонентами, которые работают как функции и реагируют на изменение данных. Таким образом, внутренняя архитектура — постоянное взаимодействие между состоянием компонентов и действиями пользователей.

Акцент Vue на подходе ViewModel из шаблона MVVM хорошо работает для более крупных приложений. Он использует двустороннюю привязку данных для связывания представления и модели. Основная цель Vue — предоставить простой и гибкий уровень представления, а не полноценный фреймворк.

Масштабируемость

Что касается больших приложений, то React имеет преимущество перед Vue благодаря легкой масштабируемости. Поскольку приложения React используют исключительно JavaScript, разработчики могут применять традиционные методы организации кода. Возможность многократного использования компонентов повышает масштабируемость приложений на React.

Vue предоставляет широкий выбор гибких инструментов для масштабирования, но чаще используется в небольших приложениях (хотя размер приложения, конечно, зависит от архитектуры). динамической архитектуры вам нужно будет воспользоваться библиотеками Vue и миксинами, чтобы преодолеть ограничения масштабирования. Так что, если вы ищете фреймворк для корпоративного приложения, учтите, что React лучше приспособится к будущему росту.

Документация

Здесь Vue — явный победитель. У него есть с подробным описанием на нескольких языках, а руководство и справку по методам API признают лучшими в отрасли. В документации — чёткие ответы на множество сложных вопросов. С другой стороны, так как сообщество Vue меньше сообщества React, может быть труднее получить ответы на вопросы, которые в документацию не вошли.

Документация React не дотягивает до уровня Vue, поэтому вам придется гораздо чаще обращаться к сообществу для решения проблем. Однако у React большое активное сообщество с огромным выбором учебных материалов.

Поддержка сообщества

Это жизненно важная часть любой технологии, поскольку сообщество оказывает помощь как начинающим, так и опытным разработчикам, создает сторонние решения и инструменты.

React разработан и поддерживается Facebook, который использует его в собственных приложениях, выпускает обновления. То есть у React есть постоянная поддержка сообщества, которое стабильно создает и развивает новые инструменты.

Vue был начат отдельным разработчиком, а не корпорацией, поэтому стал популярным не сразу, как React. Более того, когда он был впервые выпущен, многие разработчики сочли его ненадежным и не решались принять. С тех пор Vue стал гораздо популярнее благодаря постоянной поддержке и усилиям сообщества пользователей.

Популярность

Судя по 181 тысяче звёзд, Vue — самый популярным JavaScipt фреймворк на Github. React занимает второе место, набрав 165 тысяч звёзд, и продолжает привлекать новых пользователей. Фактически это самые популярные фреймворки в 2021 году.

Vue используется в:

В число пользователей React входят:

Безопасность

Хотя автоматически защитить приложения от XSS и других уязвимостей невозможно, разработчики Vue могут дезинфицировать перед реализацией или использовать внешние библиотеки для защиты от атак. В тех случаях, когда вы знаете, что HTML безопасен, вы можете явно отображать содержимое HTML и защищать приложение как до, так и после рендеринга.

Получается, что React прост в использовании, но для обеспечения безопасности требуются глубокие знания и опыт.

Рынок вакансий для React и Vue

Опытных разработчиков React больше, так как этот фреймворк раньше стал популярным. Согласно опросу Tooling Survey 2019, более 48% разработчиков уверенно используют React, и только 23% сказали то же про Vue.

Подведем итоги

Если вам нужно сложное корпоративное приложение — выбирайте React. Он пользуется большей корпоративной поддержкой, большей популярностью среди разработчиков и имеет сообщество, способное ответить на любые вопросы. Также легче масштабировать.

Если же вы ищете фреймворк для небольшого приложения или быстрой проверки идеи — посмотрите на Vue. Он пока не так широко поддерживается и используется, но его популярность растет, в первую очередь благодаря отличной документации, простоте использования и возможностям постепенного внедрения. Vue разрабатывается и поддерживается командой, имеет более широкий набор встроенных инструментов и решений. Что касается скорости разработки, с помощью Vue CLI 4 требуется всего несколько недель, чтобы настроить и выпустить продукт, готовый к продаже.

Сравнение React и Vue — это не поиск плюсов и минусов в вакууме. Выбор полностью зависит от целей и параметров вашего проекта.

React лучше подойдёт, если вы хотите:

Выберите Vue, если хотите:

Надеемся, что это руководство по фреймворкам для поможет вам избавиться от вопроса «Что выбрать — React и Vue.js» для следующего проекта.

Посмотрите наши кейсы в качестве примера использования React или Vue. А если у вас остались другие вопросы или вам требуется команда опытных разработчиков для перехода с React на Vue или наоборот, отправьте нам сообщение, используя форму внизу.

Источник

Сравнение с другими фреймворками

Определённо, этот раздел руководства — самый трудный для написания, но он очень важен. Вероятно, вы уже решаете определённые задачи, используя тот или иной фреймворк или библиотеку, а сюда вас привело желание узнать, не позволит ли Vue упростить и улучшить вашу работу. На этот вопрос мы и надеемся ответить.

Мы очень постараемся не быть предвзятыми. Будучи членами основной команды разработки Vue, мы, разумеется, сами его очень любим. На наш взгляд, с некоторыми задачами Vue справляется лучше, чем какой-либо другой существующий фреймворк. Если бы мы не верили в это, мы бы наверное и не работали над этим проектом, верно? И тем не менее, нам бы хотелось быть предельно честными и точными в оценках. В тех случаях, когда альтернативные библиотеки имеют существенные преимущества, как например обширнейшая экосистема альтернативных средств отрисовки React’а или поддержка браузеров вплоть до IE6 Knockout’ом, мы постараемся не забыть о них упомянуть.

Кроме того, мы очень высоко ценим вашу помощь в деле поддержания актуальности этого документа, потому что мир JavaScript развивается стремительно! Если вы заметите какую-либо неточность или ошибку — пожалуйста, дайте нам знать, открыв issue на GitHub.

React

React и Vue во многом похожи. Они оба:

Из-за столь похожих ниш, мы уделили сравнению этих фреймворков больше всего времени. Нашей целью было не только удостовериться в технической точности, но также и сохранить баланс. Мы указываем, где React превосходит Vue, например — в богатстве экосистемы и изобилии доступных пользовательских средств отрисовки.

Тем не менее, многие рассматриваемые моменты — в известной мере субъективны, и видится неизбежным то, что некоторым пользователям React дальнейшее сравнение всё равно покажется предвзятым. Мы понимаем, что и в технических вопросах существуют элементы вкуса, и в основном ставим своей целью в этом сравнении указать причины, по которым Vue может оказаться вам полезным — на случай если ваши вкусы совпадают с нашими.

Некоторые из приведённых ниже разделов могут быть немного устаревшими из-за недавних обновлений в React 16+, и мы планируем работать с сообществом React для актуализации этого раздела в ближайшем будущем.

Быстродействие выполнения

Как React, так и Vue — исключительно быстрые, поэтому скорость вряд ли будет решающим фактором при выборе между ними. Если вас интересуют цифры, то можете изучить стороннее сравнение производительности, которое фокусируется на сырой производительности отрисовки/обновления дерева очень простых компонентов.

Усилия для оптимизации

В целом, это устраняет необходимость целого класса оптимизаций производительности для разработчика, что позволяет больше сосредоточиться на построении самого приложения по мере его масштабирования.

HTML & CSS

В React абсолютно всё — это JavaScript. Не только структуры HTML, выраженные через JSX, последние тенденции также включают управление CSS внутри JavaScript. Этот подход имеет свои преимущества, но также заставляет идти на компромиссы, которые могут показаться неэффективными для каждого разработчика.

Vue охватывает классические веб-технологии и основывается на них. Чтобы показать вам что это значит, мы рассмотрим несколько примеров.

JSX vs Шаблоны

В React все компоненты реализуют свой UI в render-функциях с использованием JSX, декларативным XML-подобным синтаксисом, который работает в JavaScript.

Render-функции с JSX имеют несколько преимуществ:

Вы можете использовать все возможности языка программирования (JavaScript) для построения своего представления. Это включает в себя временные переменные, управление ветвлением и прямые ссылки на значения JavaScript в области видимости.

Поддержка инструментов (например, линтинг, проверка типов, автодополнение в редакторе) для JSX в некоторых отношениях более продвинута, чем то, что доступно в настоящее время для шаблонов Vue.

Для многих разработчиков, которые работают с HTML, шаблоны просто более естественны для чтения и написания. Само это предпочтение может быть несколько субъективным, но если это делает разработчика более продуктивным, то преимущество налицо.

HTML-шаблоны облегчают постепенную миграцию существующих приложений для использования возможностей реактивности Vue.

Это также облегчает дизайнерам и менее опытным разработчикам разбираться и вносить доработки в текущую кодовую базу.

Вы можете даже использовать препроцессоры, такие как Pug (ранее известный как Jade), чтобы создавать ваши шаблоны во Vue.

Некоторые утверждают, что важно изучить дополнительный язык DSL (Domain-Specific Language) для написания шаблонов — мы считаем, что эта разница в лучшем случае поверхностна. Во-первых, JSX не означает, что пользователю не нужно ничего учить — это дополнительный синтаксис на основе простого JavaScript, поэтому он прост в освоении для любого, кто знаком с JavaScript, но говорить, что это просто для всех, было бы заблуждением. Точно также шаблон является просто дополнительным синтаксисом поверх простого HTML и, следовательно, имеет очень низкий порог вхождения для тех, кто уже знаком с HTML. С помощью DSL мы также можем помочь пользователю сделать больше с меньшим количеством кода (например, с v-on модификаторами). Похожая задача может включать в себя намного больше кода при использовании простых функций JSX или render-функций.

Модульный (компонентный) CSS

За исключением случаев разделения компонентов на несколько файлов (например, посредством CSS-модулей), для ограничения области видимости CSS в React обычно используется подход CSS-in-JS (например, styled-components и emotion). Это представляет собой новый компонентно-ориентированный подход к стилизации, который отличается от обычного процесса разработки CSS. Кроме того, несмотря на поддержку извлечения CSS в отдельный файл стилей на этапе сборки, по-прежнему может быть необходимо, чтобы во время выполнения были подключены в сборку для корректной работы стилизации. В то время, как вы получаете доступ к динамичности JavaScript при создании ваших стилей, этот компромисс зачастую увеличивает размер сборки и время исполнения.

Если вы поклонник подхода CSS-in-JS — многие популярные библиотеки поддерживают Vue (например, styled-components-vue и vue-emotion). Главным отличием между React и Vue здесь будет то, что по умолчанию стилизация Vue выполняется через знакомые теги style в однофайловых компонентах.

Однофайловые компоненты предоставляют вам полный доступ к CSS в том же файле, что и остальная часть кода вашего компонента.

Масштабирование

Масштабирование вверх

Для крупных приложений, как Vue так и React предоставляют надёжные решения для роутинга. Сообщество React также породило весьма инновационные решения в области управления состоянием приложения (см. Flux/Redux). Эти подходы, и даже сам Redux легко интегрируются в приложения на Vue. В действительности, Vue сделал следующий шаг, создав Vuex — вдохновлённую Elm реализацию паттерна управления состоянием приложения. Vuex глубоко интегрирован с Vue, что, на наш взгляд, изрядно облегчает жизнь разработчикам.

В качестве ещё одного важного различия между React и Vue можно упомянуть тот факт, что все дополнительные библиотеки Vue, включая библиотеки для управления состоянием приложения и для роутинга (среди прочих задач), официально поддерживаются в актуальном соответствии с ядром библиотеки. React, напротив, предпочитает отдать эти вопросы на откуп сообществу, тем самым создавая более фрагментированную экосистему. Впрочем, как уже замечалось ранее, в силу популярности React, его экосистема значительно обширнее, чем у Vue.

Наконец, у Vue есть CLI генератор проектов, который позволяет легко начать новый проект с помощью интерактивного мастера. Его также можно использовать для мгновенного прототипирования компонента. React также делает успехи в этой области с помощью create-react-app, но в настоящее время у него есть несколько ограничений:

Важно заметить, что многие из этих ограничений — следствия сознательно принятых решений команды create-react-app, и в них есть и свои плюсы. Например, коль скоро ваш проект не требует пользовательской настройки процесса сборки, её можно будет обновлять как зависимость. Прочитать больше об этом подходе можно здесь.

Масштабирование вниз

React известен своей довольно крутой кривой изучения. До того момента, когда новичок сможет что-то написать, ему придётся узнать о JSX, а вероятно — и о ES2015+, поскольку многие примеры используют синтаксис ES2015-классов. Кроме того придётся разобраться с системами сборки, поскольку, хотя технически и существует возможность использовать Babel самостоятельно для live-компиляции кода, для production этот подход в любом случае не годится.

Vue масштабируется вверх ничуть не хуже, чем React, и в то же время его можно масштабировать и вниз — вплоть до варианта использования вместе с jQuery. Именно так — для старта в простейшем случае достаточно просто добавить тег скрипта на HTML-страницу.

Начиная с этого момента можно писать код на Vue, и даже использовать production-версию, не мучаясь угрызениями совести и волнениями насчёт производительности.

Поскольку знания JSX, ES2015 и систем сборки не требуется для начала работы с Vue, в среднем у новых разработчиков уходит не больше дня на чтение руководства, позволяющего узнать достаточно для построения нетривиальных приложений.

Нативная отрисовка

React Native позволяет писать нативные приложения для iOS и Android, используя ту же самую модель компонентов React’а. Это — прекрасно, так как позволяет разработчикам применить знание одного и того же фреймворка на различных платформах. В этой области, Vue официально поддерживает проект Weex — кроссплатформенный UI-фреймворк, созданный Alibaba Group и инкубированный Apache Software Foundation (ASF). Weex позволяет использовать тот же синтаксис Vue для создания компонентов, которые не только могут отображаться в браузере, но и также нативными элементами в iOS и Android!

На данный момент Weex всё ещё находится в активной фазе разработки, и ещё не столь матёр и проверен опытом, как React Native. Однако, его разработка мотивируется реальными требованиями крупнейшего бизнеса электронной коммерции в мире. Команда разработки Vue также активно взаимодействует с разработчиками Weex, гарантируя отсутствие неожиданностей для Vue-разработчиков.

Ещё один вариант NativeScript-Vue — плагин для NativeScript для создания по-настоящему нативных приложений с помощью Vue.js.

Сравнение с MobX

MobX стал довольно популярным в сообществе React. Он использует почти идентичную Vue систему реактивности. В некотором смысле, связку React + MobX можно считать несколько более многословным вариантом Vue, так что если вы используете её, и она вам нравится, переход на Vue может оказаться следующим логичным шагом.

Preact и другие React-подобные библиотеки

React-подобные библиотеки обычно пытаются использовать как можно больше своих API и экосистемы React насколько это осуществимо. По этой причине большинство сравнений, приведённых выше, также применимы и к ним. Главным отличием, как правило, будет уменьшение доступной экосистемы (часто значительно) в сравнении с React. Поскольку эти библиотеки не могут быть на 100% совместимы со всем в экосистеме React, некоторые библиотеки инструментов или сопутствующие библиотеки могут не использоваться. Или, даже если похоже что они работают, они могут сломаться в любое время, если ваша конкретная React-подобная библиотека не поддерживается наравне с React.

AngularJS (Angular 1)

Некоторые части синтаксиса Vue выглядят очень похоже на синтаксис AngularJS (например, сравните v-if и ng-if ). Это — не случайность: многие идеи, лежащие в основе AngularJS мы считаем верными, и вдохновлялись ими на ранних этапах разработки Vue. Впрочем, в AngularJS немало и болезненных проблем, и в этих областях мы постарались добиться значительных улучшений.

Сложность

Vue значительно проще AngularJS, как в смысле API, так и в смысле архитектуры. Получение достаточных знаний для написания нетривиальных приложений обычно происходит менее чем за день, чего нельзя сказать об AngularJS.

Гибкость и модульность

AngularJS имеет жёсткое мнение насчёт структуры вашего приложения, в то время как Vue проявляет гибкость и является более модульным решением. Хотя это и делает Vue пригодным для большего разнообразия проектов, мы понимаем и то, что когда решения уже приняты за тебя, можно сразу начать программировать, и в этом есть свои преимущества.

Поэтому мы предоставляем полную систему для быстрой разработки на Vue.js. Vue CLI нацелен стать стандартным базовым инструментом для экосистемы Vue. Это гарантирует, что различные инструменты сборки будут работать вместе с оптимальными настройками по умолчанию, что позволит сосредоточиться на создании приложения, а не тратить часы на конфигурирование. В то же время, он по-прежнему предоставляет гибкую настройку конфигурации каждого инструмента в соответствии с конкретными потребностями.

Связывание данных

AngularJS использует двунаправленное связывание данных между областями видимости, в то время как Vue концентрируется на однонаправленном потоке данных между компонентами. Это позволяет облегчить понимание потока данных в нетривиальных приложениях.

Директивы и компоненты

Vue чётче разделяет директивы и компоненты. Директивы предназначены только для инкапсуляции низкоуровневых манипуляций с DOM, в то время как компоненты являют собой полноценные автономные объекты, со своей собственной логикой данных и представления. В AngularJS директивы делают всю работу, а компоненты всего лишь определённый тип директив.

Быстродействие выполнения

Vue производительнее AngularJS. Кроме того, из-за отсутствия dirty-checking, оптимизировать Vue-приложения намного-намного проще. AngularJS замедляется при увеличении количества наблюдателей, поскольку каждый раз при изменении чего-либо в области видимости все эти наблюдатели должны быть перезапущены. Кроме того, цикл может повториться несколько раз перед стабилизацией, поскольку реакция наблюдателей может спровоцировать следующее обновление. Пользователям AngularJS нередко приходится прибегать к весьма эзотерическим техникам для обхода этих трудностей, а в некоторых случаях оптимизация и вовсе становится невозможной.

Vue не подвержен таким проблемам по причине использования прозрачного механизма учёта зависимостей с асинхронной очередью — все изменения рассматриваются независимо, кроме случаев явного указания наличия связи между ними.

Любопытно, что есть немало общих черт, как Angular и Vue решают эти проблемы AngularJS.

Angular (известный также как Angular 2)

Мы выделяем отдельную секцию для нового Angular, поскольку по сути он полностью отличен от AngularJS. Например, теперь он содержит полноценную компонентную систему; кроме того, многие детали реализации были полностью переписаны, а API очень существенно изменился.

TypeScript

Для Angular требуется использовать TypeScript, поскольку почти вся его документация и учебные ресурсы основаны на TypeScript. TypeScript имеет свои очевидные преимущества — проверка статических типов может быть очень полезна для крупных приложений, и может добавить производительности разработчикам, работающим на Java и C#.

Однако не все хотят использовать TypeScript. Часто для небольших приложений введение системы типов может привести к большему увеличению накладных расходов нежели увеличению производительности разработки. В таких случаях вам лучше воспользоваться Vue, так как использовать Angular без TypeScript может быть сложным.

Наконец, хотя Vue и не так глубоко интегрирован с TypeScript как Angular, но предоставляет официальные декларации типов и официальный декоратор для тех, кто хочет использовать TypeScript с Vue. Мы также активно сотрудничаем с командами TypeScript и VSCode в Microsoft, чтобы улучшить опыт TS/IDE для пользователей Vue + TS.

Быстродействие выполнения

В смысле производительности, оба фреймворка весьма быстры, и пока нет достаточных данных из реального мира чтобы вынести окончательный вердикт. Но если вы всё же хотите цифр, похоже что Vue 2.0 всё-таки обгоняет Angular, по крайней мере, если верить этому стороннему исследованию производительности.

Оба фреймворка исключительно быстрые, с очень похожими метриками в тестах. Вы можете изучить конкретные цифры для более детального сравнения, но скорость вряд ли станет решающим фактором.

Размер

Последние версии Angular, с AOT-компиляцией и tree-shaking, смогли значительно уменьшить размер сборок. Однако полнофункциональный проект Vue 2 с включёнными Vuex + Vue Router (

30КБ gzip) по-прежнему значительно легче из коробки, чем AOT-скомпилированное приложение, созданное с помощью angular-cli (

Гибкость

Vue значительно менее упрям, чем Angular, и поддерживает множество различных систем сборок, не ограничивая разработчиков в том, какую структуру использовать для приложения. Многим программистам эта свобода нравится, хотя есть и те, кто предпочитают иметь единственно-правильный способ построения приложения.

Кривая обучения

Всё что необходимо для начала работы с Vue — это знакомство с HTML и обыкновенным (ES5) JavaScript’ом. С этими базовыми навыками вы уже можете начать строить нетривиальные приложения после менее чем однодневного прочтения руководства.

Кривая обучения у Angular гораздо круче. API фреймворка просто огромное и вам как пользователю нужно будет разобраться с большим количеством концепций, прежде чем стать продуктивным. Очевидно, что сложность Angular во многом обусловлена его направленностью только на большие, комплексные приложения — но это делает платформу намного более трудной для менее опытных разработчиков.

Ember

Ember — это полнофункциональный фреймворк, изначально созданный «имеющим и отстаивающим своё мнение». Он требует соблюдения множества соглашений и конвенций, и когда вы с ними освоитесь — он может сделать вас весьма продуктивными. Однако, это означает ещё и высокую и крутую кривую обучения, не говоря о страдающей гибкости. Выбор между жёстко структурированным фреймворком и библиотекой со слабосвязанными совместно работающими инструментами — это всегда компромисс. Последняя даёт больше свободы, но и требует принятия большего количества самостоятельных архитектурных решений.

Учитывая вышесказанное, вероятно будет разумнее сравнивать ядро Vue и слои шаблонизации и объектной модели Ember:

Vue предлагает ненавязчивую реактивность для простых JavaScript-объектов и полностью автоматические вычисляемые свойства. В Ember от вас ожидается заворачивание всего в «Объекты Ember» и ручное указание зависимостей для вычисляемых свойств.

Синтаксис шаблонов Vue позволяет использовать все возможности выражений JavaScript, в то время как возможности выражений Handlebars и синтаксис хелперов в Ember намеренно существенно ограничены.

В вопросах производительности Vue существенно выигрывает — даже с учётом последнего обновления Glimmer engine в Ember 3.x. Vue автоматически объединяет операции обновления, в то время как в Ember требуется ручное управление циклом выполнения в ситуациях, где производительность критична.

Knockout

Knockout был пионером MVVM-подхода и отслеживания изменений в данных. Его система реактивности очень похожа на используемую Vue. Список поддерживаемых браузеров — впечатляет, особенно с учётом всех немалых возможностей фреймворка, доступных даже в IE6! Vue же поддерживает только IE9+.

Со временем, впрочем, разработка Knockout замедлилась и он понемногу начал показывать признаки своего возраста. Например, компонентной системе недостаёт полного набора хуков жизненного цикла, а интерфейс передачи дочерних компонентов, хоть и используется очень широко, выглядит по сравнению со слотами Vue не очень выигрышно.

Кроме того, похоже что существует разница в философских подходах к API, которая, если вам интересно, может быть продемонстрирована различиями при создании простого списка todo. Конечно же, это — субъективный вопрос, но многим API Vue кажется проще и лучше структурированным.

Polymer

Polymer — это проект, спонсируемый Google. В действительности, он тоже послужил источником вдохновения для Vue. Компоненты Vue можно приблизительно сравнивать с пользовательскими элементами Polymer. Стиль разработки с использованием обоих фреймворков довольно похож. Самая существенная разница состоит в том, что Polymer базируется на последних возможностях Web Components и требует для работы использования весьма нетривиальных полифилов (с потерей быстродействия в браузерах без нативной поддержки этих возможностей). Vue, напротив, без каких-либо зависимостей или полифилов работает во всех браузерах, начиная с IE9.

В Polymer, разработчики существенно ограничили систему связывания данных для улучшения производительности. Например, единственными поддерживаемыми в шаблонах Polymer выражениями являются булево отрицание и одиночные вызовы методов. Реализация вычисляемых свойств — тоже не очень гибкая.

Riot 3.0 предлагает похожую модель разработки, основывающуюся на компонентах (в Riot называемых «тегами»), с минималистичным и прекрасно организованным API. Вероятно, Riot и Vue во многом основаны на схожих философских подходах. Однако, несмотря на немного больший размер по сравнению с Riot, Vue имеет некоторые существенные преимущества:

Источник