Только на этот раз лучше, потому что он написан младшим разработчиком, притворяющимся, будто знает, о чем говорит!

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

Предисловие №1: ✔

Предисловие № 2: я буду называть React фреймворком для сохранения некоторых персонажей - к сожалению, мой последний читатель! Я знаю, что это библиотека, но предполагаю, что вы используете множество других библиотек вместе с самим React.

Предисловие № 3: Я буду обновлять этот блог раз в два года.

«Что мне делать: React или Vue ?!»

Я уверен, что мы все видели, что этот вопрос задавался - возможно, он был вместо INSERT_FRAMEWORK_HERE. Честно говоря, это справедливый вопрос - особенно для начинающих программистов! Веб-разработчиков одновременно тянут в десятке направлений, и они хотели бы, наконец, услышать: «Просто изучите React, потому что вы можете получить с ним работу…»

Вы помните статью Каково изучать JavaScript в 2016 году? На самом деле многое изменилось? React, Angular, Vue, Preact, Aurelia, Elm, Moon - о боже! Это просто продолжается. Я продолжу свою тираду и завершу вступление повторением: Что мне следует изучать: React или Vue? - это справедливый вопрос. Несмотря на то, что многие из вас кричат ​​ИЗУЧАЙТЕ РАЗРАБОТКУ ВЕБ-РАЗРАБОТКИ, А НЕ РАМКИ…

  • Разработчики должны есть.
  • Разработчики едят, получая работу.
  • И фронтенд-разработчики получают работу, зная, как успешно использовать интерфейсные фреймворки.

Capisce? Capisce. А теперь собственно сравнение.

Мне нравятся и React.js, и Vue.js, и я не знаю, могу ли с уверенностью сказать, что предпочитаю один другому. * GASP *

Несмотря на «завершение» крупномасштабного проекта с каждым фреймворком и работу над множеством более мелких элементов с помощью React, действительно ясно только, что у каждого фреймворка есть преимущества и недостатки, но не явный победитель. * СТОН * «Ты должен выбрать одно!»

…

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

Привязка данных:

Одно только одностороннее связывание данных делает React намного лучшим инструментом для предоставления расширяемого кода, с которым могут легко работать многие разработчики. На мой взгляд, двусторонняя привязка данных, которую предлагает Vue (и Angular Force), - плохое решение для простого управления состоянием. Разработчики Angular и Vue сказали мне, что им не нравится делать так много шаблонов в React (например, воссоздавать компоненты ввода формы), поэтому они с нетерпением ждут двусторонней привязки данных и синтаксиса в HTML как способ избежать повторного изобретения колесо с формами. Это полезно для небольших приложений, но при создании более крупных продуктов, содержащих всенаправленное локальное и глобальное состояние, вам потребуется интегрировать Vuex - систему управления состоянием Vue. Проблема сейчас в том, что все экземпляры v-model и v-bind, которые играют с состоянием, управляемым хранилищем, теперь будут иметь состояние, которое трудно отслеживать. Вы можете сказать: Ну, если вы знаете, что будет много управления состоянием, просто не используйте двустороннюю привязку данных во Vue - это необязательно! На это я говорю: найдите мне несколько примеров. Я нашел эту хорошо написанную статью (она хорошо написана, потому что автор согласен со мной) о попытке придерживаться односторонней привязки данных во Vue, но она не очень хороша. Двусторонняя привязка данных поощряется в каждом учебнике по Vue, который я когда-либо видел, и я считаю, что это учит новых пользователей интерфейсной инфраструктуры плохим привычкам в управлении состоянием. По крайней мере, необязательная двусторонняя привязка данных оставляет новых пользователей интерфейсной инфраструктуры без четких указаний о том, когда и как использовать необязательную (но активно поощряемую) функцию.

Принудительная односторонняя привязка данных в React затрудняет стрельбу себе по ноге с состоянием. Весь этот абзац можно легко резюмировать так: мне нравится неизменность, поэтому мне нравится React, а не Vue с точки зрения управления состоянием. Похоже, что пользователи React вынуждены стать чертовски уверенными в том, что они понимают состояние на раннем этапе обучения. Между тем, разработчики Vue изо всех сил стараются избегать Vuex и идут по пути невозможности обслуживания. Быть вынужденным узнавать о состоянии на раннем этапе означает, что React требует сложного обучения, но это к лучшему. Конечно, вы можете технически использовать Vue и принудительно использовать одностороннюю привязку данных, но его документация поощряет использование, и попытка сделать это абсолютно потребует понимания Vuex (который, как я считаю, труднее использовать, чем Redux чисто из-за отсутствия масштабных примеров для анализа). В React можно использовать двустороннюю привязку данных, но документация, сообщество и все учебные пособия, которые вы найдете в Интернете, сильно отговаривают от этого. Есть даже много полезных статей, в которых описывается, когда вы хотите использовать Redux (систему управления состоянием React). Я надеюсь, что вы прочитаете это вместо того, чтобы искать выделенный жирным шрифтом текст, объявляющий победителя, но - что касается привязки данных - я считаю, что React выигрывает, заставляя вас одностороннюю привязку данных. По моему опыту, он лучше читает и лучше тестирует.

Простота использования в начале:

Это странная метрика для расчета, но я могу помочь с объяснением ...

Предположим, что новый пользователь интерфейсного фреймворка больше всего доволен:

  1. Большое сообщество
  2. Высокая взлетная скорость взлетно-посадочной полосы (скорость, при которой вы можете полностью использовать каркас)
  3. Возможность легко и быстро создать статическую веб-страницу с динамически отображаемыми компонентами.

Нет сомнений в том, что сообщество React является самым сильным между Vue и React, черт возьми - это может быть самое сильное библиотечное сообщество ПЕРИОД. Я не могу прожить и недели, чтобы не увидеть, как опытный разработчик напишет замечательную статью о том, как использовать React по-новому. Vue имеет суперактивный сервер Discord, но новичкам часто указывают на примеры, в которых используются устаревшие или неофициальные библиотеки - в некоторых моментах при написании Vue вы будете открывать новые территории. На данный момент у React лучшее сообщество.

Что касается выхода из шлакоблоков, то у обоих фреймворков есть официальное решение. В React есть create-react-app (CRA), а в Vue - vue-cli. CRA - это круто и мощно, но я встречал нескольких разработчиков, которые буквально боялись уволиться, и почему бы и нет !? Facebook до смерти пугает вас за то, что вы даже предлагаете это как вариант. Без поощрения вас к извлечению вы не сможете испытать магию поддерживаемых таблиц стилей! Я также представляю себе день в будущем, когда сообщество Vue даже отдаленно приблизится по размеру к React. Вероятно, существует потрясающее количество подходящих шаблонов vue-cli! Похоже, это прекрасное будущее, и легко получить аналогичную конфигурацию сборки, поэтому Vue проще в нее попасть.

С помощью чего проще сделать простую веб-страницу? По моему опыту, однозначный ответ - Vue. Я чувствую предвзятость, потому что уже изучал React до изучения Vue, но я никогда не находил более дешевого, лучшего или более полного учебного ресурса, чем Vue.js 2 - Полное руководство от Максимилиана Шварцмюллера. В конце концов, этот показатель сводится к личным предпочтениям, моему всеведущему опыту использования обоих фреймворков и моей всемогущей способности в одностороннем порядке решать, Vue или React легче изучить на начальном этапе. Возможность использовать Vue API как квази-jQuery способ управления DOM позволяет медленно продвигаться в мир фронтенд-разработки. Хотя на практике мне не нравится декларативная привязка DOM, чертовски легко отобразить список элементов с v-for в Vue, чем сопоставить `const` в React. С Vue проще просматривать статические страницы.

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

Поддерживаемые стили:

Styled-Components, CSS-модули, Radium, Glamorous, Stylus-Loader, ReactCSS, Nano Component, CSS-in-JS, Styled System - это лишь некоторые из различных библиотек, которые вы можете использовать для работы со стилями в React. Это отвратительно. Меня беспокоит тот факт, что до того, как вы даже создадите продукт, вы должны каким-то образом знать, хотите ли вы визуализировать стиль на основе опоры или динамически передавать стили только с изменениями состояния, не связанными с магазином. Если вы решите прыгнуть с головой в ______, вы можете столкнуться с ошибками в реализации позже - черт возьми, вы просто можете не увидеть, как это выглядит в вашем коде, но ни один из них не является взаимозаменяемым. Если у вас в команде нет мастера Webpack, который настроил бы вас на решение для хлопот, React плохо справляется со стилями.

Между тем, Vue прижился к идее« однофайловой веб-разработки ». JSX - отличная концепция, но проблемы с таблицами стилей и отсутствие самоуверенной разработки делают четко определенный проект Vue похожим на воду в пустыне. CSS, Sass, Stylus, Less? Без проблем! Просто зайдите в vue-loader. Беспокоитесь о том, что глобальные стили будут мешать? Просто добавьте scoped в блок <style> компонента Vue и прикрепите уникальные идентификаторы к каждому классу. Беспокоитесь о динамических стилях во Vue? Вот 2-х минутное чтение, в котором подробно описаны все хорошие способы справиться с этим. Стили Vue ❤.

Хорошо ладит с другими:

Я люблю Vue - действительно люблю, но весь мой первоначальный фанатизм, связанный с фреймворком, улетучивается, если вы скажете мне убедиться, что код должен хорошо взаимодействовать с другими разработчиками. Необходимо провести массу исследований, чтобы правильно использовать Vuex, чтобы убедиться, что ваш код расширяем и читаем. Небольшое сообщество Vue усугубляет эту проблему. React существует дольше, и у него огромное количество разработчиков, использующих годы передового опыта. Синтаксис шаблона Vue (модификаторы, атрибуты, директивы и другие действия «в шаблоне») упрощает загрузку динамических приложений ... Он также позволяет легко избавиться от трудного для тестирования кода, который может быстро выглядеть как суп для ваши коллеги. Мне просто не нравится функциональность в HTML. Я считаю, что работа со смешанным шаблоном и функциональностью скрипта во Vue добавляет много вертикальных движений глаз и затрудняет обход мысленного стека. Странные ситуации также существовали с синтаксисом шаблонов iN Vue. Например, вы можете использовать kebab-case только для настраиваемых атрибутов HTML. Это не имеет большого значения, но очень раздражает нажатие CTRL + F соответствующего camelCase или TitleCase имени связанных свойств.

Однонаправленный поток данных в React означает, что мне нужно только следить за реквизитами в шаблоне. Кроме того, любой вид условного или управляемого данными рендеринга в React всегда находится в начале функции render(). Отказаться от JSX легко. Я могу думать так, потому что я исходил из перспективы сначала изучить React или из-за того, что недостаточно использовал Vue, но - в настоящее время - я думаю, что React намного лучше использовать в командной среде.

Мясное заключение

Ознакомьтесь с изменениями внизу страницы после прочтения резюме.

Резюмируем:

  • Если вы знаете о состоянии и знаете, что у вас запланирован большой проект с переплетением локального и глобального состояния, используйте React.
  • Если вы никогда раньше не использовали интерфейсный фреймворк и просто пытаетесь развлечься самостоятельно, используйте Vue.
  • Если вы дизайнер, который заботится о поддерживаемых стилях, используйте Vue.
  • Если у вас есть команда, и вы хотите выбрать одну из них для проекта, я предлагаю выбрать React.
  • В качестве небольшого отступления, если ваш проект требует обслуживания очень медленного интернет-соединения или старых браузеров, но вы не хотите иметь дело с относительно пустыми сообществами Preact и Moon, я бы выбрал Vue, потому что он имеет более быстрый виртуальный DOM. и меньшая занимаемая площадь . Разница в скорости и размере действительно имеет значение только в том случае, если вам нужно обслуживать клиентов из третьего мира.

На самом деле вы должны попытаться изучить оба, если представится возможность. Я многому научился у сообщества и документации каждого фреймворка. Особый привет Максу на Udemy за действительно полный курс по Vue, и спасибо Уэсу Босу за лучшее обучение React в сети. Жду любых отзывов в комментариях.

Редакции (12.01.18):

Это современная веб-разработка, и мир движется быстро!

Кто-то создал one-loader для React, который имитирует совместную работу vue-loader и style-loader для создания .one файлов с <style> тегами! Посмотри здесь. Мне не приходилось использовать его в каких-либо проектах, но, скорее всего, это делает мой аргумент в пользу Vue в этом случае довольно несостоятельным - и это справедливо, поскольку это было результатом того, что Vue рассматривал Webpack как первоклассного гражданина, а не Vue. Сам фреймворк каким-то образом лучше сочетается со стилями, чем React.

Кроме того, Дастин Шау создал эту площадку для CSS-in-JS, позволяющую людям легко видеть различия между каждой библиотекой. После использования styled-components, emotion и styled-jsx я по-прежнему твердо уверен, что это не решение, но Emotion - мой любимый из тех, что я использовал.

Vue наверстает упущенное в v2.6, но у React теперь есть границы ошибок, и это потрясающе.