С каждым годом количество JavaScript библиотек и фреймворков растет. Даже самые матерые фронтендщики уже давно сбились со счета. Большой выбор — это одновременно преимущество и недостаток. Почему недостаток? Потому что каждый раз, начиная новый проект, мы становимся перед дилеммой. Стоит ли попробовать что-то новенькое или пойти по накатанной дорожке?
Второй вариант экономит время — опыт использования и освоенная документация делают свое дело. Однако излишняя консервативность препятствует прогрессу. Что же выбрать? В этой статье мы кратко осветим общее положение дел на рынке JavaScript фреймворков. И остановимся на сравнении освоенных нами технологий.
Немного статистики
На представленном графике мы видим, что React нравится подавляющему большинству разработчиков. Причем, как из числа тех, кто его уже опробовал, так и среди желающих к ним присоединиться. С Angular.JS не все так радужно. Чуть больше половины опрошенных разработчиков не желает к нему возвращаться.
От React не отстает Vue.JS. Этот фреймворк также вызывает массовую симпатию. Тем не менее, Vue.JS имеет большой процент незаинтересованности среди тех, кто о нем слышал. Это происходит потому, что оторвать свой кусок пирога от аудитории разработчиков, которые уже определились со стэком технологий и довольны своим выбором, становится все сложней с каждым годом.
Не стоит забывать и о том, что далеко не всегда программисты имеют такую роскошь, как выбор. Например, когда в их руки попадает легаси-проект. В таком случае приходится довольствоваться тем, что есть.
Еще один момент — огромное количество сайтов использует jQuery (см. картинку). И это не плохо! Сложно переоценить своевременный вклад jQuery в развитие веб-разработки. Однако некоторые задачи реализуются на jQuery через боль и страдания. Вполне очевидно, что лучше бы было реализовать их с помощью других инструментов, которые не задействовались изначально в силу возраста проекта или в силу невозможности применить их командой разработчиков.
Давайте посмотрим на статистику с GitHub по самым популярным фреймворкам или библиотекам для фронтенда.
Vue.JS стремительно набирает популярность, несмотря на “молодость” и еще неокрепшее комьюнити. Лайки лайками, а реальный вклад в проект — это уже совсем другая история. Отсюда следует вывод, что чем сложнее приложение, тем труднее найти под него готовое решение. В перспективе это может замедлить скорость разработки проекта.
Для нашей команды уже больше года основным фреймворком является React.JS. Мы используем его на большинстве проектов и вполне довольны своим выбором. Но, кажется, у этой технологии появился реальный конкурент в борьбе за наши предпочтения. А именно — Vue.JS. Vue набирает обороты, и за последнее время неоднократно использовался нашими разработчиками.
Далее мы будем сравнивать именно эти фреймворки React.JS и Vue.JS. В качестве примеров будут использоваться кейсы из собственной практики. Изучаем, разбираемся, выделяем преимущества и недостатки.
Если вам нравится использовать шаблоны...
В таком случае оптимальный выбор — это Vue.JS. Определение разметки в HTML является базовым функционалом для Vue. Аналогично Ангуляру, двойные фигурные скобки используются для выражений дата-биндинга, в то время как директивы (специальные html атрибуты) применяются для добавления функционала в шаблон. Такие шаблоны значительно легче для понимания.
Давайте посмотрим на простой пример. Нам нужно, чтобы значение в поле ввода хранилось в state.
React.js:
Vue.js:
Очевидно, что код на Vue.JS проще и понятнее. Как минимум для тех, кто не сталкивался с React.JS и Vue.JS. Кроме того, пример кода на Vue.js это ES5 и он прекрасно работает без “babel” в отличии от кода на на React.JS, в котором используется ES6.
График с сайта — https://npm-stat.com/
Если вам нужна большая экосистема…
Здесь все просто — React и никаких гвоздей. Ведь речь идет о самой популярной библиотеке. А популярность дает неиллюзорные преимущества. Это значит больше статей, больше туториалов и ответов на Stack Overflow. Это значит наличие большого количество расширений и инструментов, которые могут значительно сэкономить ресурсы проекта и разработчика.
Переходим к практике. С React все более менее понятно. У нас имеется огромный опыт использования этой технологии. Поэтому давайте заострим внимание на Vue.JS. у нас на проектах. Мы подготовили пару примеров использования Vue, где двухстороннее связывание данных в рамках одной страницы со сложным интерфейсом дает отличный результат.
Проект Malta
Перед нами стояла задача создать страницу с картой и фильтрами. На первый взгляд — ничего сложного. При этом у нас была сама карта с маркерами, набор фильтров (очень богатый набор) и область вывода результатов фильтрации. Казалось бы, довольно скромный функционал. Однако масса пересекающихся взаимодействий, (прежде всего — огромное количество фильтров — их набор изменялся в зависимости от нескольких факторов), существенно усложнила работу. И реализация такого функционала на jQuery оказалась, мягко говоря, очень сложной.
В сложившейся ситуации явно напрашивался декларативный подход: “чтобы оно там само все делало, считало и т.д.”. А раз у нас тут такой сложный интерфейс, почему бы не использовать React.JS? И вот здесь началось самое интересное. Во-первых, React не так просто подключить на проект в середине разработки. Во-вторых, компонентный подход не давал особых преимуществ. Ведь у нас не так много элементов, которые можно логически грамотно поделить на компоненты. А логики на странице довольно много. И в итоге бы мы просто получили один большой компонент “контейнер”.
В то же время шаблонный подход отлично вписывается в принципы работы Vue.JS приложения. Плюс нам нужна была определенная гибкость для работы с Google картой, а использование готового React компонента не предоставляло нам такую возможность.
В результате мы применили стандартный для Vue.JS подход с data-binding и шаблоном. Такое решение обеспечило нам возможность спокойно пользоваться привычным haml и даже применять Ruby методы для рендеринга фильтров.
С помощью Vue атрибутов v-show и v-model контролируется отображение и значения полей. После применения фильтра и получения результата нам не нужно переживать за отображение полученных данных — реактивность все делала самостоятельно. Мы лишь привязали темплейт для рендеринга элементов к массиву данных через v-for. Вот и все.
Хендлить ивенты также очень удобно. От нас требовалось лишь декларативно определять поведение приложения, а обработкой событий изменять соответствующие данные. Безусловно, на странице было очень много логики. И обратка подобного интерфейса в одном Vue контроллере под конец стала вызывать определенный дискомфорт. Но это определенно лучше, чем мучаться с полотнищем jQuery. В целом, на проекте Malta Vue.JS показался нам крайне дружелюбным, понятным и логичным.
Pyro
И еще один пример, когда наш выбор пал на Vue.JS это Pyro — легаси проект на RoR с большим количеством jQuery.
Изначально нам понадобилось только подключить ruby gem vue. Однако представленная страница содержит одну небольшую тонкость. А именно динамически изменяющийся набор полей выбора, который приходит с запросом в зависимости от текущего состояния выбора фильтра. С каждым нажатием на чекбокс делается запрос и общее состояние фильтров обновляется. И хендлить все это через v-model получилось просто отлично. В итоге мы прекрасно встроили спа в монолитный проект.
Вывод
Скажем сразу (простите за банальность): идеальной технологии не существует. Да и вряд ли появится. Решить абсолютно все проблемы разом и удовлетворить абсолютно всех разработчиков невозможно от слова “совсем”. Поэтому важнейшим моментом является понимание проекта и его требований. Оцените сложность интерфейса, соотнесите его с квалификацией своей команды и выберите оптимальную технологию здесь и сейчас.
А теперь мы поделимся выводами сравнения Vue.JS и React.JS.
Преимущества Vue.JS:
- Гибкость в работе с шаблонами;
- Простота синтаксиса и низкий порог вхождения.
- Быстрый рендеринг и меньший размер.
Преимущества React.JS:
- Лучше подходит для масштабируемых приложений, лучше поддерживается и тестируется.
- Может использоваться для нативных и веб приложений.
- Большая экосистема.
- Больший выбор инструментов.
И все же сходств больше, чем различий:
- Быстрый рендеринг с использованием Virtual DOM.
- Небольшой размер.
- Реактивные компоненты.
- Возможность легкой интеграции с роутерами, сборщиками и менеджерами состояний.
- Отличная поддержка.
В нашем случае из “двух зол” оба лучше. Выбирайте то, что вам больше нравится. Но не забывайте — каждый фреймворк: и React и Vue.JS заточен под определенный круг задач и проявляет себя наилучшим образом именно в своей “вотчине”.