Vue.js теперь имеет больше звезд, чем React на Github. Популярность этого фреймворка растет, что удивительно, учитывая, что он не поддерживается такой крупной компанией, как Facebook (React) или Google (Angular).
В этой статье я объясню некоторые свои мысли о популярности Vue и о том, почему он превосходит конкурентов. Поскольку философия дизайна и функции Vue очень похожи на React, я сравню их и покажу, почему React (хотя это и хороший фреймворк) часто обманчив.
Эволюция веб-разработки
В 1990-х написание веб-сайта представляло собой чистый HTML с некоторыми простыми стилями CSS. Плюс в том, что это очень просто. Недостатком является отсутствие многих функций.
Затем появился PHP, поэтому мы с радостью написали такой код:
Хотя сегодня этот код выглядит ужасно, в то время это было большим улучшением. Этот прогресс остался прежним и сегодня: выберите новый язык, новый фреймворк, который нам нравится, пока однажды не появится лучший конкурент.
Я использовал Ember до того, как появился React. Затем я переключился на React, и то, как он рассматривает все как веб-компонент, его виртуальный DOM и эффективный рендеринг, поразил меня. Хотя не все идеально, это огромное улучшение по сравнению с тем, как написан код.
Позже я решил перейти на Vue.js и перестать использовать React.
React неплох, но мне он показался слишком корявым для освоения, а код местами выглядел совершенно нелогичным. И то, как Vue решает эти проблемы, меня успокаивает.
Я скажу вам, почему.
представление
Сначала поговорим о производительности.
Каждый веб-разработчик сталкивается с ограничениями пропускной способности, поэтому размер ваших веб-страниц имеет значение. Чем меньше веб-страница, тем лучше. И сейчас из-за популярности мобильных браузеров этот вопрос стоит более остро, чем несколько лет назад.
Давайте посмотрим на набор чисел:
Размер библиотеки Vue составляет 25,6 КБ. И чтобы архитектура React достигла аналогичной функциональности, требуется React DOM + React Router + React и другие плагины, всего 48,8 КБ.
Один балл за Vue.
Фактическая производительность показана на рисунке ниже:
Как видите, эти тесты производительности показывают, что Vue занимает меньше памяти и работает быстрее, чем React.
Конвейер рендеринга Vue работает быстрее, что полезно при создании сложных приложений. Элементы отображаются более эффективно, поэтому вам не нужно слишком много думать об оптимизации своего кода, чтобы вы могли тратить больше энергии на функции, которые действительно полезны для вашего элемента. Он также хорошо работает на мобильных устройствах, поэтому нет необходимости в алгоритме для более плавного рендеринга на мобильных устройствах.
При переходе с React на Vue.js вам не нужно жертвовать размером и производительностью. Вы можете иметь оба.
кривая обучения
Неплохо для изучения React. Приятно, что вся библиотека построена вокруг веб-компонентов. Ядро React приятное и стабильное, но мне не удалось разобраться в его высокоуровневой конфигурации маршрутизации. Что делают так много версий библиотеки маршрутизации? Текущая версия 4 (+ React-router-dom), но в итоге я использовал v3. Как только вы выберете версию, она по-прежнему отлично работает, но процесс обучения очень болезненный.
сторонняя библиотека
Большинство современных фреймворков придерживаются одной и той же философии дизайна: простое, не слишком многофункциональное ядро, а затем добавление других библиотек для расширения его функциональности. Если другие библиотеки можно будет легко интегрировать таким же образом, то построить стек технологий будет очень просто. На мой взгляд, простота и непосредственность этого шага очень важны.
И в React, и в Vue есть набор инструментов, которые помогут вам запустить проект и настроить различные инструменты. В экосистеме React бывает сложно освоить различные библиотеки, так как часто несколько библиотек пытаются решить одну и ту же проблему.
React и Vue хорошо справляются с этой задачей.
ясность кода
На мой взгляд, у React плохая ясность кода. JSX позволяет встраивать код HTML в код, что является катастрофой с точки зрения ясности кода.
Вы также столкнетесь с другими проблемами. Вызов метода из шаблона компонента часто оставляет его недоступным, что приводит к ручной привязке:
.Иногда React может стать совершенно нелогичным...
Учитывая, что в приложении, вероятно, будет использоваться много условных суждений, метод JSX очень плох. То, как написан цикл, больше похоже на шутку. Конечно, вы можете изменить систему шаблонов, удалить JSX из стека React и использовать JSX во Vue, но это не первое, что вы узнаете при изучении фреймворка, поэтому я не буду обсуждать это здесь.
Еще один момент заключается в том, что Vue не требует от вас использования setState или чего-то подобного. Конечно, вам все равно придется определить все свойства состояния в методе данных, но если вы забудете их определить, в консоли отобразится подсказка. Остальное обрабатывается автоматически внутри, просто измените значение в компоненте, как при использовании обычных объектов Java.
В React много ошибок. Даже если на самом деле принцип прост, эти ошибки могут замедлить обучение.
Что касается краткости, код, написанный на Vue, намного меньше, чем код, написанный в других фреймворках. Это одна из лучших вещей в фреймворке Vue. Все просто, а сложные функции можно написать всего в нескольких строчках лаконичного понятного кода. С другими фреймворками вам нужно написать на 10%, 20% или даже на 50% больше кода.
Вам также не нужно много учиться, чтобы использовать Vue. Все интуитивно понятно. Написание кода Vue.js — это наиболее близкий способ выражения идей.
Эта простота использования Vue — отличный инструмент для облегчения использования Vue и для командного общения. Если вам нужно изменить другие части вашего технического стека, нужно добавить больше людей в свою команду в чрезвычайной ситуации или объяснить свой продукт, Vue экономит ваше время и, следовательно, деньги.
Оценка времени также проста, так как реализация функции не займет больше времени, чем предполагает разработчик, что приводит к меньшему количеству недоразумений, ошибок или оптимистичных оценок. В Vue меньше концепций для понимания, что упрощает общение с руководителями проектов.
в заключении
С точки зрения размера, производительности, простоты и кривой обучения использование Vue.js, безусловно, является лучшим вариантом прямо сейчас, решая проблемы как времени, так и денег.
Его легкий вес и производительность позволяют вам одновременно использовать в проекте два фреймворка (например, Angular и Vue), что упрощает перенос на Vue.
Что касается сообщества и популярности, хотя сейчас Vue привлекает много внимания, трудно сказать, что он достиг уровня популярности React. Но тот факт, что фреймворк без поддержки крупной ИТ-компании может быть настолько популярен, сам по себе вызывает беспокойство. Его рыночная доля быстро выросла из малоизвестного проекта в одного из крупнейших конкурентов в области фронтенд-разработки.
Количество модулей на Vue также быстро растет, и даже если вы не можете найти нужный модуль, написать его самостоятельно не займет много времени.
Эта структура упрощает понимание, совместное использование и редактирование. Чужой код будет не только легко читать, но и модифицировать чужую реализацию несложно. С Vue мне потребовалось всего несколько месяцев, чтобы уверенно справляться с отдельными подпроектами и изменениями, внесенными в проект посторонними. Это экономит мое время и позволяет сосредоточиться на проектировании системы.
React предназначен для использования вспомогательных функций, таких как setState, и бывают случаи, когда вы забываете использовать их при программировании. Также требуется много усилий для написания шаблонов таким образом, чтобы проект был трудным для понимания и поддержки.
Рассмотрите возможность использования этих фреймворков в более крупных проектах. При использовании React вам необходимо освоить другие библиотеки и научить свою команду их использованию. Также решать различные сопутствующие вопросы (А не любит эту библиотеку, Б не понимает эту библиотеку и т. д.). Стек Vue проще и больше подходит для команд.
Как разработчик я чувствую себя счастливым, уверенным и свободным. Как руководитель проекта мне легче планировать и общаться с командой. Как фрилансер я экономлю время и деньги.
Конечно, есть много потребностей, которые Vue не покрывает (особенно если вы создаете нативные приложения). React отлично справляется с этими задачами, но Эван Ю и команда Vue уже работают над этими проблемами.
React популярен из-за его хороших концепций и реализации этих концепций. Но теперь похоже, что его концепция — беспорядок.
При написании кода React вы тратите весь день на поиск специальных контрмер (см. раздел «Ясность кода»), пытаетесь написать осмысленный код и в итоге получаете решение, которое никто не может понять. Даже вы сами, через несколько месяцев, решение трудно прочитать. Вы должны проделать тяжелую работу, чтобы выпустить свой проект, и все, что вы получаете, это что-то сложное в обслуживании, полное ошибок, и требуется немного обучения, чтобы даже исправить это.
Эти минусы никто не хочет видеть в проекте. Зачем решать все эти проблемы? Только для сообщества и сторонних библиотек? Мы слишком много страдаем, чтобы получить маленькую часть блага, и даже эта малая часть блага становится все менее и менее важной.
Раньше React облегчал мою жизнь, но в некотором смысле усложнял ее реализацию. Спустя много лет Vue наконец-то освободил меня. Его реализация довольно близка к тому, на что я представлял себе разработку, и во время разработки в основном не о чем думать, кроме того, что нужно реализовать. Это очень похоже на нативную логику Java (без setState, без специального использования для реализации условных структур и без алгоритмов). Просто напишите код так, как вы хотите. Это быстро, безопасно и делает вас счастливым. Я рад видеть, что Vue становится все более и более приемлемым для фронтенд-разработчиков и компаний, и я надеюсь, что это положит конец доминированию React.
Отказ от ответственности: этот пост является моим личным мнением и выражает только мое текущее мнение. По мере совершенствования технологий эти взгляды меняются (в лучшую или худшую сторону).
Оригинал: https://blog.sourcerer.io/why-you-should-leave-react-for-vue-and-never-use-it-again-5e274bef27c2
Автор: Гвенаэль П., фронтенд-инженер, энтузиаст Vue.js.
Переводчик: Мениск, главный редактор: Ту МинВернуться в Соху, увидеть больше