Vue, React или Аngular — какой фреймворк изучать JS-разработчику

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

Никита, специалист по Vue.js

Что такое Vue.js?

Vue.js — это «Прогрессивный JavaScript-фреймворк». Он создан для того, чтобы упростить работу создания пользовательских интерфейсов, легко интегрируется в проекты с использованием других JS-библиотек и может функционировать как веб-фреймворк для разработки одностраничных приложений в реактивном стиле.

Плюсы Vue.js

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

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

Vue-шаблоны. Любой валидный HTML также будет валидным шаблоном Vue, а это значит, что шаблон является просто дополнительным синтаксисом поверх простого HTML и, следовательно, имеет очень низкий порог вхождения для тех, кто уже знаком с HTML. С помощью DSL (Domain-Specific Language) шаблоны могут помочь пользователю сделать большее с меньшим количеством кода (например, с v-on модификаторами).

Модульный (компонентный) CSS. Если вы поклонник подхода CSS-in-JS — многие популярные библиотеки поддерживают Vue (например, styled-components-vue и vue-emotion). По умолчанию стилизация Vue выполняется через знакомые теги «style» в однофайловых компонентах.

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

CLI-генератор проектов, который позволяет легко начать новый проект с помощью интерактивного мастера. Его также можно использовать для мгновенного прототипирования компонента.

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

Полная документация на многих языках, которая описывает всю основную экосистму.

Минусы Vue.js

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

Похожая проблема наблюдается и для системы управления глобальным состоянием Vuex. Для возможности использования контрактов TypeScript, приходится использовать класс-декораторную запись, которая далеко не тривиальная и нуждается в детальной настройке.

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

Где используется

Создателем Vue.js является Evan You родом из Китая, поэтому документация к фреймворку переведена на китайский носителем языка. Благодаря этому Vue широко используется среди китайских компаний, например: Alibaba, Baidu, Xiaomi, Sina Weibo и др. Он входит в ядро Laravel и PageKit. Также на Vue построен GitLab и OZON.

Больше источников

Всю свежую информацию по Vue.JS и его экосистеме можно найти на официальном сайте.

Сергей, специалист по React

Что такое React

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

Плюсы React

React можно использовать для создания как web, так и мобильных приложений, а React Virtual DOM позволяет взаимодействовать с элементами DOM более простым и производительным способом.

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

Также бесспорным плюсом является чрезвычайная гибкость приложения — вы не связаны определенными подходами и методологиями и можете изменять их в зависимости от особенностей проекта.

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

Минусы React

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

Где используется

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

Примеры известных проектов на React: Netflix, New York Times, Yahoo, Whatsapp, Codecademy, Dropbox. Смотря на этот список можно с уверенностью сказать, что React является актуальным инструментом для разработки пользовательских интерфейсов.

Больше источников

Учебник JavaScript

Официальный сайт

Алексей, специалист по Angular

Что такое Angular

Angular — это современный фреймворк, написанный на языке TypeScript, разрабатываемый Google и позволяющий создавать web, mobile и desktop приложения. Его активно используют как сам Google, так и Microsoft.

Angular позволяет быстро развернуть приложение и начать писать код. Вам не нужно выбирать инструменты, в этом вам помогает Angular CLI. Чтобы создать проект достаточно выполнить пару команд в консоле: npm i -g @angular/cli и ng new [имя проекта]

И все, вы уже можете начать разработку.

Плюсы Angular

Так как это фреймворк, в нем все «из-коробки» — если вы не знаете, что вам нужно для написания приложения (web, mobile или desktop), то можете смело брать Angular. Кроссплатформенность фреймворка позволяет создавать как web, desktop-приложения, так и нативные mobile-приложения.

Angular написан на TypeScript, что позволяет писать строго типизированный код. Строгая типизация защищает ваше приложение от большого количества ошибок.

Модули и компоненты — основные единицы приложения на Angular, позволяющие структурировать ваше приложение и разделять логику от отображения.

CLI — инструмент разработки, позволяющий быстро создать проект и сгенерировать модули, компоненты и так далее, а также проводить обновление самого Angular.

Под капотом Angular использует RxJS, что позволяет вам писать высоко производительный код с обработкой асинхронных потоков данных.

Dependency Injeciton (DI) — паттерн проектирования, который позволяет повысить эффективность и модульность приложения, а большое комьюнити и постоянное развитие Angular является беспорной поддержкой в работе с фреймворком.

Минусы Angular

Во-первых, высокий порог входа. В основном это связано из-за RxJS и Dependency Injeciton, так как на их изучение нужно потратить достаточное количество времени

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

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

Где используется

Можно использовать на проектах любого уровня сложности. Angular активно использует в своих проектах Google и Microsoft, но также на просторах интернета вы можете найти более простые приложения написанные на Angular.

Больше источников

Официальная документация

Документация по CLI

Angular Material UI

Обучающие материалы

Репозиторий

Курс видеоуроков на YouTube (на английском)

В итоге

Выбирать инструмент необходимо, опираясь на особенности проекта.

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

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

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

Если вы только знакомитесь с фреймворками и библиотеками JS, то учитывайте их особенности:

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