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

/* Статья обновлена 19 июля 2022 */

Рано или поздно JS-разработчик встаёт перед выбором — 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 — знание трёх основных технологий веб-разработки: JavaScript, HTML и CSS. 

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

Поддержка TypeScript. Чтобы начать пользоваться Vue.js, вам не требуется знать TypeScript, но фреймворк его поддерживает. Vue 3 написан на TypeScript. А значит, для использования TypeScript во Vue не нужны никакие дополнительные инструменты — он уже поставляется с отличной поддержкой. TypeScript предлагает ряд возможностей, помогающих разработчикам писать более надежный и легче обслуживаемый код.

Минусы Vue.js

Отсутствие плагинов. Экосистема 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 + ES6/7.
В React используется нисходящий поток данных «от родителя к ребенку». Такой поток данных упрощает отладку приложения и снижается риск возникновения ошибки.
Гибкость приложения. Вы не связаны определенными подходами и методологиями и можете изменять их в зависимости от особенностей проекта.
Большое комьюнити фреймворка. В сети есть огромное количество готовых решений и дополнительных инструментов, использование которых ускоряет разработку.

Минусы React

Необходимость обучения. Самым большим минусом является то, что большой выбор инструментов ставит в тупик — React не однозначен и оставляет разработчикам возможность выбирать лучший способ развития. Также, для освоения всех нюансов требуется длительное время.
React реализует только клиентский интерфейс. Поэтому, чтобы реализовать паттерн проектирования, например, MVC, нужно будет добавлять в проект дополнительные библиотеки.
Сложности с SEO. Для приложений, в которых важна поисковая оптимизация, необходимо использовать серверный рендеринг, что нельзя сделать только силами 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. 
Подробная документация. Она содержит рекомендации к построению и разработке приложений и гайд по стилю программирования на Angular.
Кроссплатформенность фреймворка позволяет создавать как web, desktop-приложения, так и нативные mobile-приложения.
Строго типизированный код — Angular написан на TypeScript. Строгая типизация защищает ваше приложение от большого количества ошибок.
Модули и компоненты — основные единицы приложения на Angular, позволяющие структурировать ваше приложение и разделять логику от отображения.
CLI — инструмент разработки, позволяющий быстро создать проект и сгенерировать модули, компоненты и так далее, а также проводить обновление самого Angular.
Высокопроизводительный код. Под капотом Angular использует RxJS, что позволяет вам писать код с обработкой асинхронных потоков данных.
Dependency Injeciton (DI) — паттерн проектирования, который позволяет повысить эффективность и модульность приложения, а большое комьюнити и постоянное развитие Angular является бесспорной поддержкой в работе с фреймворком.
Архитектура MVC (Model View Controller). Такая архитектура позволяет разработчикам быстро внести изменения. При любых изменениях, внесенных в «model», мгновенно изменяется «view».

Минусы Angular

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

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

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

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

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

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

Angular Material UI

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

Репозиторий

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

В итоге

Выбирать инструмент необходимо, опираясь на особенности проекта.
Если вам нужно быстро развернуть приложение, то для этого хорошо подойдет Angular. При этом учитывайте, что по мере роста продукта, нужно будет решать проблему низкой производительности и плохой оптимизации.
Для создания минимальной рабочей версии идеальным будет Vue.js, благодаря низкому порогу вхождения, быстрой работе и обширной масштабируемости. 
При работе со сложными мобильными или web-приложениями лучше всего подойдет React, благодаря большому выбору инструментов. Но для их изучения понадобится довольно много времени. При работе с этой библиотекой вы сами решаете, как организовать архитектуру приложения и какие инструменты и библиотеки использовать.
Если вы только знакомитесь с фреймворками и библиотеками JS, то учитывайте их особенности:

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

• #javascript
• #react
• #vue
• #angular