Выбираем фронтенд фреймворк: React и Vue.JS

Дата публикации:

С каждым годом количество JavaScript библиотек и фреймворков растет. Даже самые матерые фронтендщики уже давно сбились со счета. Большой выбор — это одновременно преимущество и недостаток. Почему недостаток? Потому что каждый раз, начиная новый проект, мы становимся перед дилеммой. Стоит ли попробовать что-то новенькое или пойти по накатанной дорожке?

Второй вариант экономит время — опыт использования и освоенная документация делают свое дело. Однако излишняя консервативность препятствует прогрессу. Что же выбрать? В этой статье мы кратко осветим общее положение дел на рынке JavaScript фреймворков. И остановимся на сравнении освоенных нами технологий.

Немного статистики

react_vue.js-1

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

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

react_vue.js-2.png

Не стоит забывать и о том, что далеко не всегда программисты имеют такую роскошь, как выбор. Например, когда в их руки попадает легаси-проект. В таком случае приходится довольствоваться тем, что есть.

Еще один момент — огромное количество сайтов использует jQuery (см. картинку). И это не плохо! Сложно переоценить своевременный вклад jQuery в развитие веб-разработки. Однако некоторые задачи реализуются на jQuery через боль и страдания. Вполне очевидно, что лучше бы было реализовать их с помощью других инструментов, которые не задействовались изначально в силу возраста проекта или в силу невозможности применить их командой разработчиков.

Давайте посмотрим на статистику с GitHub по самым популярным фреймворкам или библиотекам для фронтенда.

react_vue.js-3

Vue.JS стремительно набирает популярность, несмотря на “молодость” и еще неокрепшее комьюнити. Лайки лайками, а реальный вклад в проект — это уже совсем другая история. Отсюда следует вывод, что чем сложнее приложение, тем труднее найти под него готовое решение. В перспективе это может замедлить скорость разработки проекта.

Для нашей команды уже больше года основным фреймворком является React.JS. Мы используем его на большинстве проектов и вполне довольны своим выбором. Но, кажется, у этой технологии появился реальный конкурент в борьбе за наши предпочтения. А именно — Vue.JS. Vue набирает обороты, и за последнее время неоднократно использовался нашими разработчиками.

Далее мы будем сравнивать именно эти фреймворки React.JS и Vue.JS. В качестве примеров будут использоваться кейсы из собственной практики. Изучаем, разбираемся, выделяем преимущества и недостатки.

Если вам нравится использовать шаблоны...

В таком случае оптимальный выбор — это Vue.JS. Определение разметки в HTML является базовым функционалом для Vue. Аналогично Ангуляру, двойные фигурные скобки используются для выражений дата-биндинга, в то время как директивы (специальные html атрибуты) применяются для добавления функционала в шаблон. Такие шаблоны значительно легче для понимания.

Давайте посмотрим на простой пример. Нам нужно, чтобы значение в поле ввода хранилось в state.

React.js:

react_vue.js-4

Vue.js:

react_vue.js-5

Очевидно, что код на Vue.JS проще и понятнее. Как минимум для тех, кто не сталкивался с React.JS и Vue.JS. Кроме того, пример кода на Vue.js это ES5 и он прекрасно работает без “babel” в отличии от кода на на React.JS, в котором используется ES6.

react_vue.js-6

График с сайта — https://npm-stat.com/

Если вам нужна большая экосистема…

Здесь все просто — React и никаких гвоздей. Ведь речь идет о самой популярной библиотеке. А популярность дает неиллюзорные преимущества. Это значит больше статей, больше туториалов и ответов на Stack Overflow. Это значит наличие большого количество расширений и инструментов, которые могут значительно сэкономить ресурсы проекта и разработчика.

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

Проект Malta

react_vue.js-7

Перед нами стояла задача создать страницу с картой и фильтрами. На первый взгляд — ничего сложного. При этом у нас была сама карта с маркерами, набор фильтров (очень богатый набор) и область вывода результатов фильтрации. Казалось бы, довольно скромный функционал. Однако масса пересекающихся взаимодействий, (прежде всего — огромное количество фильтров — их набор изменялся в зависимости от нескольких факторов), существенно усложнила работу. И реализация такого функционала на 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

react_vue.js-8

И еще один пример, когда наш выбор пал на Vue.JS это Pyro — легаси проект на RoR с большим количеством jQuery.

Изначально нам понадобилось только подключить ruby gem vue. Однако представленная страница содержит одну небольшую тонкость. А именно динамически изменяющийся набор полей выбора, который приходит с запросом в зависимости от текущего состояния выбора фильтра. С каждым нажатием на чекбокс делается запрос и общее состояние фильтров обновляется. И хендлить все это через v-model получилось просто отлично. В итоге мы прекрасно встроили спа в монолитный проект.

Вывод

Скажем сразу (простите за банальность): идеальной технологии  не существует. Да и вряд ли появится. Решить абсолютно все проблемы разом и удовлетворить абсолютно всех разработчиков невозможно от слова “совсем”. Поэтому важнейшим моментом является понимание проекта и его требований. Оцените сложность интерфейса, соотнесите его с квалификацией своей команды и выберите оптимальную технологию здесь и сейчас.

А теперь мы поделимся выводами сравнения Vue.JS и React.JS.

Преимущества Vue.JS:

  1. Гибкость в работе с шаблонами;
  2. Простота синтаксиса и низкий порог вхождения.
  3. Быстрый рендеринг и меньший размер.

Преимущества React.JS:

  1. Лучше подходит для масштабируемых приложений, лучше поддерживается и тестируется.
  2. Может использоваться для нативных и веб приложений.
  3. Большая экосистема.
  4. Больший выбор инструментов.

И все же сходств больше, чем различий:

  1. Быстрый рендеринг с использованием Virtual DOM.
  2. Небольшой размер.
  3. Реактивные компоненты.
  4. Возможность легкой интеграции с роутерами, сборщиками и менеджерами состояний.
  5. Отличная поддержка.

В нашем случае из “двух зол” оба лучше. Выбирайте то, что вам больше нравится. Но не забывайте — каждый фреймворк: и React и Vue.JS заточен под определенный круг задач и проявляет себя наилучшим образом именно в своей “вотчине”.

Мы Крым Диджитал

С 2015 года мы предоставляем полный цикл услуг мобильной и веб-разработки клиентам из различных отраслей и разных стран.

Подпишись
на наши новости

Контакты пресс-службы

+ 7 (926) 118-80-32

WhatsApp, Viber, Telegram

Давайте обсудим Ваш проект

или свяжитесь с нами по почте projects@crimeadigital.ru

Нажимая кнопку «Отправить», вы даете согласие на обработку персональных данных

Прошел день карьеры в СевГУ

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая. Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы. Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов — как начать свою карьеру в ИТ? Есть ли возможность совмещать учебу с работой? Кем я смогу стать? Как понять, кем я хочу работать? И многие другие.

Резидент технопарка, компания Крым Диджитал, приняла участие в Дне Карьеры в СевГУ, который прошел 17 мая.

Мероприятие длилось 3 часа. Компанией заинтересовались  более 35 студентов, которым была важна информация о прохождении практики, бесплатные курсы Академии и вакансии, не требующие опыта работы.

Руководитель разработки компании выступил с презентацией и ответил на все вопросы, которые так волнуют студентов - как начать свою карьеру в ИТ?

Есть ли возможность совмещать учебу с работой?

Кем я смогу стать?

Как понять, кем я хочу работать?

И многие другие.

Завершен набор студентов на летнюю практику

Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться — front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.
Крым Диджитал завершила набор студентов на летнюю практику. В июле придут 14 человек. Это студенты второго и третьего курсов кафедр Программная инженерия, Информатика и вычислительная техника, Информационные системы и технологии и Управление в технических системах. Все ребята будут ходить в офис и будут заняты реальным проектом, который они должны реализовать до конца практики. Каждый выбрал для себя то направление, в котором хотел бы развиваться - front-end и back-end-разработка, дизайн. Руководить практикой будет Head of Engineering.

Крым Диджитал приняла участие в стратегической сессии

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня. Вместе с Правительством Севастополя, Институтом информационных технологий и управления в технических системах СевГУ и приглашенными ИТ-компаниями города обсудили перспективу развития системы высшего образования в Севастополе.Представители бизнеса, власти и образовательной системы выступали со своим видением будущих потребностей региона в кадрах, поднимали насущные вопросы обучения студентов, прохождения практики и дальнейшего трудоустройства. Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Руководители Крым Диджитал приняли участие в стратегической сессии, которая прошла на базе СевГУ 10 июня.

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

Крым Диджитал является амбассадором идеи образования и взращивания молодых кадров, развивает образовательные проекты и на протяжении 5 последних лет ведет активную работу в направлении поддержки и развития молодых специалистов ИТ-отрасли Крыма.

Выпуск курса Software Testing

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing! Всего курс успешно завершили 13 человек. В течение 2 месяцев несмотря на теплую погоду и манящее море ребята ответственно посещали занятия 2 раза в неделю, делали домашние задания и проверочные работы. Трое начинающих специалистов теперь стажеры нашей компании. Следующий курс намечен на август. Не пропусти анонс записи!

Мы поздравляем выпускников нашего первого в этом году курса Крым Диджитал Академии по Software Testing!

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

Следующий курс намечен на август. Не пропусти анонс записи!