[Перевод] Почему я отказался от React ради Vue.

• Оригинальный адрес:Why I left React for Vue.
• Оригинальный автор:Gwenael P
• Перевод с:Программа перевода самородков
• Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…
• Переводчик:EmilyQiRabbit
• Корректор:luochen1992,Moonliujk

[Сегодняшний случайный личный профиль с открытым исходным кодом:sourcerer.io/posva]

В последнее время Vue.js получает больше звезд, чем React на Github. Популярность фреймворка в последнее время резко возросла, и, поскольку его не поддерживают такие компании, как Facebook (React) или Google (Angular), удивительно видеть, как он растет из ниоткуда.

Эволюция веб-разработки

Оглядываясь назад на славные дни прошлого, в 90-е мы писали веб-страницы, которые были чистым HTML и некоторыми простыми стилями CSS. Плюс в том, что это очень просто. Но недостатком является отсутствие многих функций.

Затем с PHP мы рады возможности написать такой код:

источник:Woohoo. Веб-план ex.com/blog/PHP-go…

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

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

После этого я решил попробовать Vue.js и больше не вернусь к React после этого.

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

Позвольте мне объяснить, почему.

представление

Во-первых, давайте поговорим об объеме.

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

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

Что касается нативной производительности, вот некоторые статистические данные:

Источники данных:Woohoo Stefan Krause.net/ просто подставь меня, р…

Источники данных:Woohoo Stefan Krause.net/ просто подставь меня, р…

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

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

Когда вы отказываетесь от React в пользу Vue.js, вам не нужно идти на компромисс между размером приложения и производительностью. Вы сможете сбалансировать размер приложения и производительность.

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

Изучение React — это нормально. Хорошо знать библиотеку, полностью построенную на веб-компонентах. Ядро React безупречно и надежно, но у меня много проблем с расширенной конфигурацией маршрутизации. Какова реальность всех этих версий маршрутизации? В настоящее время это версия 4 (+ React-router-dom), и в итоге я использовал версию 3. Пока вы привыкли к этому стеку технологий, выбор версии на самом деле прост, но процесс обучения мучителен.

сторонняя библиотека

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

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

React и Vue преуспевают в этой части.

ясность кода

Мое мнение, что React отстой. JSX, встроенный синтаксис для написания html-кода, является занозой в заднице с точки зрения ясности.

Вот общий способ написания условного выражения «если» с использованием JSX:

(
	<div>
	  {unreadMessages.length > 0 &&
	    <h1>
	      You have {unreadMessages.length} unread messages.
	    </h1>
	  }
	</div>
);

Вот как записывается vue:

<template>
	<div v-if="unreadMessages.length > 0">
	    <h1>
	      You have {unreadMessages.length} unread messages.
	    </h1>	
	</div>
</template>

У вас будут другие проблемы. Вызов методов в шаблоне компонента часто сталкивается с проблемой невозможности получить «это», и в результате вам нужно выполнить привязку вручную:<div onClick={this.someFunction.bind(this, listItem)} />.

В какой-то момент использование React делает вещи очень нелогичными...

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

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

С React вы столкнетесь с множеством ошибок кода. Таким образом, несмотря на то, что основные правила на самом деле очень просты, процесс обучения будет очень медленным.

Для простоты код, написанный на Vue, легче, чем на других фреймворках. На самом деле это лучшая часть фреймворка Vue. Все очень просто, вы обнаружите, что можете писать очень сложные функции всего несколькими строками кода, которые легко понять, а с другими фреймворками вы будете использовать на 10%, 20%, а иногда и на 50% больше. сумма кода.

Вам также не нужно изучать что-либо дополнительно. Все лаконично и понятно. Написание кода Vue.js может очень приблизить вас к самому простому пути реализации вашей идеи.

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

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

Суммировать

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

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

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

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

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

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

Что касается использования этих фреймворков в более крупных проектах, то при использовании React вам потребуется управлять другими библиотеками и обучать свою команду их использованию. Это может привести к множеству побочных эффектов (X не любит эту библиотеку, Y не понимает эту библиотеку). Стек Vue намного проще, что отлично подходит для команды.

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

Vue по-прежнему имеет множество потребностей, которые не покрыты (особенно если вы хотите создавать нативные приложения). React хорошо работает в этой области, но Эван Ю и команда Vue уже работают над этим.

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

Написание кода React — это поиск решения в течение всего дня (см. раздел «Ясность кода»), борьба с кодом, который уже имеет смысл, и, наконец, взлом его и создание действительно непонятного решения. Эту схему будет очень трудно прочесть, когда вы оглянетесь на нее через несколько месяцев. Чтобы выпустить проект, вы должны работать усерднее, и его также может быть трудно поддерживать, он подвержен ошибкам и требует много обучения для модификации.

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

После стольких лет работы с фреймворками они иногда облегчают мне жизнь, а иногда реализация фичи становится намного сложнее, и после этого Vue стал для меня облегчением. Способ сделать это очень близок к тому, как я планирую развивать эту функцию, и тогда во время разработки почти не о чем думать, кроме того, чего вы действительно хотите достичь. Он очень близок к нативной логике Javascript (не будетsetState, специальные способы реализации условных операторов и алгоритмов). Вам просто нужно написать любой код, который вы хотите. Это быстро, безопасно и делает вас счастливым :D. Я рад видеть, что Vue используется все большим количеством фронтенд-разработчиков и компаний, и я надеюсь, что это скоро положит конец React.

Отказ от ответственности: эта статья представляет собой только мое личное мнение на данный момент. По мере развития технологий они тоже будут меняться (к лучшему или к худшему).

[править] СогласноJames Y Rauhutкомментарии, заголовок был исправлен.

[EDIT] Пересмотренный абзац, говорящий о сравнении размеров кадра. Как указывается в статье, оценка сложна, и в зависимости от различных потребностей часто возникают споры между людьми и фреймворками.

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

---

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из Интернета сНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,продукт,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.