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

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

Среди массы фреймворков мы решили остановить свое внимание на трех самых популярных.

Vue

Особенности Vue:

• привязка данных;
• производительный (есть Virtual DOM);
• простота изучения;
  
• адаптивность и подробная документация;
  
• масштабирование;
  
• оптимизация HTML-блоков;
  
• миниатюрный размер;
  
• шаблоны.
  

Vue – это молодой фреймворк с растущей аудиторией. Самый простой для изучения в тройке, можно начать работу «из коробки», при этом достаточно мощный для профессиональных разработчиков. Vue не имеет такого количества встроенных функций, как Angular, но их больше, чем у React. Популярный выбор среди новичков, есть подробная документация на русском языке.

Фреймворк используют Adobe, Behance, Reuters, Xiaomi, Gitlab, WizzAir, EuroNews, Grammarly, Codeship и Alibaba.

Недостатки:

• Мало туториалов. Хорошая документация – это плюс, но для специфичных случаев было бы полезно иметь больше различных примеров. К счастью, есть достаточно большое русскоязычное сообщество в телеграм @vuejs_ru.
• Интеграция в другие проекты может обернуться головной болью, у сообщества пока не так много опыта в этом вопросе.
  

React

Особенности:

• компонентно-ориентированный;
• декларативный;
  
• производительный (благодаря React Virtual DOM);
  
• серверный рендеринг;
  
• наличие Redux;
  
• поддержка PWA;
  
• JSX.
  

React предлагает простое и функциональное создание компонентов, а также пропагандирует их использование для поддержания элегантного кода API. Фреймворк очень популярен, особенно в различных стартапах. Имея большой выбор легкодоступных опенсорсных плагинов и расширений, можно разработать практически любой тип веб-сайта. Шаблоны компонентов создаются с использованием JSX, это может немного отличаться от того, к чему вы привыкли.

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

Примеры компаний, использующих React: Facebook, Instagram, Atlasian, Codepen, Pinterest, Asana, Сбербанк, Revolut, Авито, Discord.

Недостатки:

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

Angular

Особенности:

• универсальный;
• нативный;
  
• сложный;
  
• используется с Typescript;
  
• интеллектуальное автозаполнение HTML-компонента;
  
• архитектура рассчитана на крупные проекты;
  
• MVVM-модель.
  

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

Фреймворк используют: Skyeng, Iponweb, IsSoft, Positive Technology, MTS, Grid Dynamics, Sitecore, Netcraker, Google.

Недостатки:

• Слабая производительность, но это решается с помощью ChangeDetectionStrategy.
• Наличие массы разнообразных структур (Modules, Components, Injectables, Pipes) делает нелегкой участь молодого специалиста.
  

С чего же начать?

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

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

Сравнение Vue, React и Angular

Простота использования

React и Vue во многом похожи, они оба используют Virutal DOM, предоставляют компонентную структуру, сторонние вопросы выносятся в дополнительные библиотеки. Из-за того, что React и Vue, по большей части, сосредоточены на создании интерфейса пользователя, а Angular – на приложениях, последний более сложен для начинающих. Работа с React и Vue становится труднее в крупных приложениях.

React превосходит Vue в разнообразии экосистемы и изобилии доступных пользовательских средств отрисовки. В React абсолютно всё – это JavaScript, в то время как Vue в большей мере основывается на классических веб-технологиях, к примеру, любой валидный HTML также будет валидным шаблоном Vue.

В сравнении с Angular оба других фреймворка – и React, и Vue – проявляют бо́льшую гибкость. Но в этом есть и преимуществ Angular: не приходится придумывать свою реализацию, только следовать правилам.

Развернутое сравнение всех трех фреймворков также дается на странице Vue.

Инструменты

Все три фреймворка предоставляют CLI, что облегчает создание новых проектов и поддержку непрерывного развития. Кроме того, все они хорошо уживаются с популярными IDE, такими как VS Code и Atom.

Производительность

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

Вывод

Какой из фреймворков является лучшим – вопрос субъективный. Все три предлагают схожую функциональность, а освоение любого из них, безусловно, принесет пользу любому разработчику. Гораздо важнее изучить основные концепции, теорию работы с JavaScript и разработки веб-приложений. Если кратко: используйте тот фреймворк, который быстрее других приведет вас к намеченной цели. Обычно это зависит от знания фреймворков в команде и размеров проекта.

Другие материалы по теме

• 12 бесплатных ресурсов для изучения React
• 5 практических примеров использования Vue
  
• Твиттер на Vue: руководство для начинающих
  
• Пособие по React: всестороннее изучение
  
• Изучаем Angular: видео, подкасты и полезные ссылки
  
• Лучшие ресурсы для изучения Angular 2 с нуля