TL; DR; VueJS кажется более удобным для новичков, тогда как React постоянно продвигает новые инновации. Любой из них - хороший выбор.

Проработав с React около 3 лет, у меня была возможность опробовать Vue JS в новом проекте в 2017 году. В то время мне не хотелось изучать новый фреймворк, но через пару месяцев работы с фреймворком VueJS , его преимущества стали очевидны. Итак, в 2017 году я написал эту статью, в которой перечислены преимущества VueJS над React:

  • VueJS использует обычный синтаксис HTML и CSS в однофайловых компонентах, что легче понять новичкам или людям, не кодирующим Javascript, например дизайнерам.
  • В 2017 году Redux был способом управления состоянием по умолчанию в React, и хотя Redux - отличная библиотека со многими преимуществами, она может быть довольно многословной даже для реализации простой задачи.

В 2017 году было общее ощущение, что React становится слишком сложным и многословным для того, что он делает, и что Vue обеспечит более компактный опыт. Но в мире Javascript все быстро меняется. С тех пор React представил хуки, которые позволяют писать код без использования классов и повышают полезность функциональных компонентов. С помощью хуков вы можете легко добавить состояние к компоненту без необходимости использовать класс или задействовать Redux. С помощью Context API также можно избежать прохождения реквизита через длинную цепочку дочерних компонентов, также известную как «бурение опоры». Итак, две основные причины потенциальной многословности React были устранены.

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

Честно говоря, я очень впечатлен тем, как команде React удалось обновить фреймворк, чтобы он оставался актуальным и находился на переднем крае инноваций, не нарушая обратной совместимости. В других фреймворках используются хуки, но, насколько мне известно, по состоянию на 2020 год React Suspense, специальный API для обработки асинхронной загрузки страниц, и React fiber для приоритизации рендеринга анимации не имеют аналогов в других фреймворках. Не стесняйтесь поправлять меня в комментариях, если я что-то упустил.

Так почему кто-то решил использовать VueJS? Если с 2017 года популярность VueJS резко возросла, то она стала еще более распространенной. Многие компании и технические директора, с которыми я разговаривал, объяснили мне, что их решение перейти на VueJS связано с его большей простотой использования и удобством для начинающих. Допустим, вы находитесь в ситуации, когда вы не уверены, что сможете нанять достаточно старших интерфейсных разработчиков, и вам, возможно, придется попросить внутреннего разработчика кодировать некоторые компоненты. Эти разработчики, у которых не было большого опыта работы с Javascript, могут по-прежнему выполнять свою работу на VueJS. И я видел, как это происходило на собственном опыте: в команде, где только что ушел фронтенд-разработчик, или в спринте, в котором нужно было закончить больше фронтенд-историй, чем бэкэнд-историй, бэкэнд-разработчиков попросили написать Компоненты VueJS. Благодаря тому, что VueJS использует обычный синтаксис HTML и CSS в своих однофайловых компонентах, разработчики, которые понимают основы внешнего интерфейса, могут по-прежнему выполнять некоторую работу, даже если это явно неидеальное совпадение.

За последние два года, по крайней мере, 3 раза лица, принимающие решения, говорили мне, что они решили перейти на VueJS, потому что они не были уверены, что смогут нанять квалифицированных и опытных разработчиков Javascript, и считали, что младший разработчик или бэкэнд-разработчик, возможно, будет проще с VueJS. Эти две платформы по-прежнему следуют разным парадигмам, где VueJS пытается встроить себя в существующие веб-технологии, тогда как React имеет больше подхода «все в JS». В больших организациях команда часто также предпочитает использовать ту же структуру, которую уже использует другая команда той же организации, что имеет смысл.

Кстати, недавно я попытался переписать с использованием веб-компонентов библиотеку, которую я изначально написал на VueJS. Задача заключалась в том, чтобы увидеть, возможно ли в 2020 году писать компоненты Javascript внешнего интерфейса без использования какой-либо структуры. Ответ заключается в том, что да, можно писать компоненты без использования фреймворка, но это очень громоздко, а полученный код будет труднее читать и поддерживать, чем при использовании React или Vue. Кроме того, компоненты, написанные с использованием только технологий веб-компонентов, таких как Shadow DOM, будут работать только в современных браузерах. Основным камнем преткновения у меня была обработка событий. В React вы можете добавить к тегу атрибут «onClick», а в Vue вы можете, например, добавить атрибут «@click». Однако, используя только собственные API-интерфейсы браузера, вам необходимо сначала создать HTMLElement, а затем вручную присоединить к нему прослушиватель событий. Это очень громоздко. После этого эксперимента я могу с уверенностью сказать, что независимо от того, выберете ли вы Vue, React или даже Angular, в 2020 году вы, вероятно, достигнете более высокой производительности, используя JS-фреймворк, чем пытаясь кодировать приложение без использования какого-либо фреймворка.

В заключение, если бы я хотел оставаться ближе к веб-технологиям, таким как HTML и CSS, например, потому что люди, которых я ожидаю иметь в команде, будут более знакомы с ними, то VueJS, вероятно, был бы лучшим выбором. С другой стороны, если бы я хотел иметь возможность опробовать новейшие функции, которые может предоставить JS-фреймворк, с 2020 года я бы, вероятно, выбрал ReactJS. То, что так много инноваций происходит такими быстрыми темпами, является одновременно и благословением, и проклятием для сообщества Javascript, и невозможно с полной уверенностью сказать, будет ли какая-либо из этих фреймворков в ближайшие годы заменена на еще лучшую. , но с 2020 года они оба являются отличными вариантами и позволят вам эффективно запустить приложение.