Angular react vue что выбрать

React, Vue или Angular: большой гайд по фреймворкам для начинающего JS-разработчика

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

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

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

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

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

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

React

React — это open-source библиотека от Facebook, которая показывает компоненты интерфейса приложения и синхронизирует их с остальными данными. Одного React мало для работы: нужно еще знать Babel, Webpack, Redux и другие инструменты, это очень зависит от проекта, на котором вы работаете.

Фишка React — иммутабельность компонентов и однонаправленное связывание. Создатель React, Джордан Валке, всегда был фанатом функциональной парадигмы, но не мог найти подходящий для себя фреймворк. Поэтому он написал эту библиотеку.

«После курса по основам языков программирования <. >я понял, что мой стиль кода не был странным. Я использовал не новую, а очень старую философию, которую индустрия игнорировала 20 лет, в ущерб себе, как я думаю», — из интервью Валке для reactiflux.com .

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

React выделяется если не своей философией, то синтаксисом. Вот как бы мы написали заголовок «Привет, мир!» на нем:

Привет, мир!, document.getElementById('root') ); 

Эта необычная смесь JavaScript и HTML называется JSX. Обычно мы разделяем разметку страницы и логику ее работы, но тут мы все делаем в одном файле. Потом этот код преобразуется в обычный JavaScript.

По данным npm , React скачивают в 5 раз чаще, чем Vue. Это не значит, что на Vue и других фреймворках надо ставить крест, скорее это просто демонстрирует распространенность библиотеки.

На Github можно найти готовые React-компоненты на любой вкус, но если и этого мало, то можно интегрировать React с другой библиотекой. Но его документация сильно уступает ближайшему конкуренту, Vue.

React стал популярным не вопреки тому, что это библиотека, а благодаря этому. «Библиотека» означает гибкость, а это — плодородная почва для развития активного сообщества. По крайней мере так сам Джордан Валке объясняет популярность React.

При этом React подойдет почти любому проекту, но так как библиотека изначально создавалась для Facebook, то в приложениях соцсетей она проявит себя во всей красе: на React работают Pinterest и Instagram.

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

Vue

React отличается тем, что все элементы интерфейса мы рисуем через так называемые render-функции. Помните необычный код, смесь JS и HTML? Там это все и происходит.

Команда Vue считает, что шаблоны — более простая альтернатива, хотя в Vue тоже есть render-функции и даже поддержка JSX (синтаксис React). Кому-то нравятся шаблоны Vue, кому-то render-функции JSX, и обе стороны утверждают, что их код более читабельный, но в конечном итоге это вопрос личных предпочтений.

Команда Vue советует не выбирать между шаблонами и render-функциями, а сочетать их: логическую часть кода реализовать через render-функции, а презентационную — при помощи шаблонов.

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

Генератор проектов Vue намного круче: есть шаблоны под разные приложения и системы сборки, а еще — настройки нового проекта можно сохранять в пресет и использовать позже. И главное: новый проект можно настроить прямо в процессе его создания. Любой фреймворк универсален, но Vue особенно хорош для создания онлайн-магазинов: его используют Nintendo, Louis Vuitton и BMW USA.

Давайте посмотрим на простое Vue-приложение:

html lang="en"> meta> meta charset="UTF-8"> title>Hello World in Vue.jstitle> meta> body> div id="hello-world-app"> h1> msg >>h1> div> script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.min.js"> script> script> new Vue( el: "#hello-world-app", data()  return  msg: "Hello World!" > > >); script> body> html> 

Выглядит непонятно, но на самом деле все просто. Давайте разбираться в коде построчно:

• В самом начале у нас базовая часть HTML
• Тег div с id #hello-world-app содержит внутри наше приложение
• Внутри div мы видим заголовок h1 и ссылку на данные свойства msg — соответствующего объекта данных
• Потом мы вызываем библиотеку Vue.js, которая находится на cdnjs
• Затем мы инициируем новый объект c el внутри: el (element) говорит объекту о том, что наше приложение это #hello-world-app div
• После этого мы обеспечиваем необходимые для работы приложения данные при помощи соответствующего объекта. В данном конкретном случае — это данные для msg .

Сам создатель фреймворка Эван Ю считает , что лучшая часть Vue — это прогрессивная адаптивность: «Ты можешь использовать его как замену jQuery или создавать приложения любой сложности, используя CLI, роутер и Vuex». В конечном итоге, Vue — одновременно очень мощный и легкий в изучении фреймворк.

Angular

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

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

Из-за того, что Angular требует TypeScript, фреймворк привлекает команды с бэкендом на C-подобных языках (C#, C++, Java). Обычно это крупный интерпрайз.

Другая особенность Angular — двунаправленное связывание. Поменяли форму элемента на странице? Обновилось состояние приложения. К такому надо привыкнуть! А пока этого не произошло, отладка будет долгой и мучительной. Но двунаправленное связывание это хороший инструмент для создания сложных форм (который доступен и в Vue).

Посмотрим, как выглядит приложение «Привет, мир!» на Angular. Фреймворк работает через компоненты, подобные этому:

import  Component > from '@angular/core'; @Component( selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.scss'] >) export class AppComponent  title = 'Hello world!'; > 

Далее нам нужен шаблон страницы, который будет использовать этот компонент. Вот он:

 lang="ru">  charset="UTF-8">  name="viewport" content="width=device-width, initial-scale=1.0">  http-equiv="X-UA-Compatible" content="ie=edge"> >  >  

Полную версию приложения «Привет, мир!» на Angular можно посмотреть по ссылке .

Главное преимущество Angular является главным же недостатком: этот фреймворк предлагает только один способ строить архитектуру приложения. Это подходит тем, кто хочет сразу сесть и писать код, не думая об архитектуре. Однако придется долго копаться в технических деталях прежде чем вы сможете продуктивно работать.

Angular не берут для легких статических сайтов или для одноразовых приложений. В остальных случаях его очень выгодно использовать: проект может быть большим и сложным, но его легко тестировать, масштабировать и рефакторить. По этим причинам Angular используют в Gmail, Microsoft Office и Paypal.

Читайте также: Как сохранять фокус на протяжении всего обучения: советы от Хекслета

Как вы понимаете, фреймворк выбирают в зависимости от проекта и его потребностей, а не потому, что один фреймворк чуточку быстрее или умнее другого. Но мы не ответили на вопрос — какой фреймворк выбрать новичку без опыта в реальной разработке? Об этом мы поговорили с нашим наставником, Иваном Гагариновым.

В стримах на Хекслете ты часто отвечаешь на вопросы новичков, какой фреймворк изучать. Скажи, можно ли перейти сразу к фреймворкам и не изучать основы?

— Никто не может запретить сразу перейти к фреймворку. Такое часто встречается в околоразработческих профессиях: например, верстальщик решает расширить свой профиль и сразу приступает к разработке на фреймворке.

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

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

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

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

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

Выходит, надо знать огромное количество вещей еще до того, как начнешь проект на фреймворке. А Хекслет дает достаточно необходимых знаний, чтобы писать код правильно?

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

Достаточно сделать какое-нибудь простое приложение или переписать свой уже готовый проект на другой фреймворк — это будет отличный опыт, который высоко оценит любой работодатель.

На React гораздо больше вакансий, чем по Vue и Angular. Почему?

— Сложно сказать. Думаю, так просто исторически сложилось. Насколько я знаю, первые версии Angular имели множество неудобств — в дальнейшем это исправили и по сути AngularJS был полностью переписан, но React успел занять лидирующие позиции. Vue также стал популярным намного позже React.

Значит, в ближайшее время React вряд ли кто-то обойдет по популярности. В таком случае рискует ли новичок потерять время, выучив «не тот» фреймворк?

— Частично уже ответил на этот вопрос. Я считаю — нет. Знание любого фреймворка расширяет кругозор, делает разработчика более гибким.

Новичку, как мне кажется, самое главное сначала натренировать ум, сделать его более эластичным, чтобы он мог быстрее впитывать новые знания. Совершенно не важно, какой фреймворк выбран в первое время обучения. Если уже начали что-то изучать, то лучше довести дело до конца — любые знания будут полезны.

Конечно, если вы изначально поставили цель устроится например Angular-разработчиком, то имеет смысл изучать Angular вместо React (при условии, что вы знаете основы JavaScript и HTML, а еще разобрались в MVC).

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

— Обычно учить с чистого листа не приходится. Даже когда вышел новый Angular, он принёс много нового, но с самого начала всё учить не было необходимости.

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

Хорошо, но если все фреймворки хороши, то почему в профессии «Фронтенд-программист» на Хекслете предлагается изучить только React?

Огромное количество вакансий. Когда создавалась профессия, другие фреймворки не были так популярны. Конкуренцию разве что мог составить Angular, но AngularJS (первая версия Angular) многих не устраивал, поэтому выбор пал на React. В принципе не так важен выбор фреймворка. Зная основы, не составляет особого труда использовать тот или иной фреймворк.

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

React vs Vue vs Angular

В ходе развития веб-разработки 3 JavaScript-фреймворка стали хорошо известны всем front-end разработчикам: React, Vue.js и Angular.

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

Все три фреймворка могут использоваться практически взаимозаменяемо для создания компонентных frontend-приложений с расширенными возможностями пользовательского интерфейса. Однако окончательный выбор зависит от требований проекта и предпочтений разработчика.

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

Архитектура

1. React

Как видно из официального примера «Hello World» ниже, React не требует определенной структуры проекта, и вы можете начать использовать его всего с нескольких строк кода.

ReactDOM.render( 
Hello, world!
, document.getElementById('root') );

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

Более крупные строительные блоки, известные как компоненты, определяют независимые, многократно используемые составляющие, которые используются во всем приложении. Они принимают входные данные, известные как пропы, и создают элементы, которые впоследствии представлены пользователю. Наиболее распространенный вариант структурирования проекта заключается в разбитии интерфейса на такие компоненты как импорт в основной компонент App.js и его последующий рендер в React DOM.

React построен на JavaScript, но в нем также широко используется JSX (JavaScript XML), расширение грамматики, позволяющее создавать элементы, одновременно содержащие JavaScript и HTML. React JavaScript API и блоки, написанные с помощью JSX, совместимы, но в большинстве своем JSX более удобен для использования и позволяет избежать написания длинного и, возможно, неинтуитивного создания HTML элементов с помощью JavaScript. Для сравнения ниже представлен один и тот же компонент написан с помощью JSX:

const Hello = (props) => < return Hello ; > const root = ReactDOM.createRoot(document.getElementById('root')); root.render();

и React JavaScript API:

const Hello = (props) => < return React.createElement('div', null, `Hello $`); > const root = ReactDOM.createRoot(document.getElementById('root')); root.render(React.createElement(Hello, , null));

React также поддерживает TypeScript, но, к счастью для менее опытных разработчиков, его использование является опциональным.

2. Vue

Основная библиотека Vue.js сосредоточена только на слое View. Ее называют прогрессивным фреймворком, потому что мы можем расширить ее функциональность с помощью официальных и сторонних библиотек, таких как Vue Router или Vuex, чтобы превратить ее в настоящий фреймворк.

Хотя Vue не связан с паттерном MVVM (Model-View-ViewModel), его дизайн был частично вдохновлен им. В Vue вы будете работать в основном на уровне ViewModel, чтобы убедиться, что данные приложения обрабатываются таким образом, чтобы фреймворк мог отобразить актуальный вид и состояние приложения за минимальное количество ре-рендеров.

Синтаксис шаблонов Vue позволяет создавать компоненты, сочетая привычный HTML со специальными директивами и возможностями. Этот синтаксис шаблонов является предпочтительным, хотя чистый JavaScript и JSX также поддерживаются. Компоненты в Vue небольшие, самодостаточные и могут быть повторно использованы во всем приложении. Уникальной деталью Vue есть так называемые Однофайловые компоненты (SFC) с расширением .vue, которые состоят из трех частей – template, script и style, значение которых интуитивно понятно каждому разработчику.

Типичный формат .vue файла приведён ниже:

Template – написанный на расширенной версии HTML, он служит директивой для фреймворка о том, как производить окончательную разметку компонента на основе его внутреннего состояния. Позволяет создавать разметку относительно условий или динамически с помощью vue-директив (v-if, v-for и др.).

Script – предназначен для написания логики компонента и контроля его состояния. Vue как и React позволяет опционально использовать как JavaScript, так и TypeScript.

Style – вмещает в себя CSS (так поддерживает написание стилей на CSS пре-процессорах). Написанные стили энкапсулируются в компоненте и не влияют на остальные компоненты.

Многим концепт помещения всего необходимого кода для функционирования компонента в одном файле покажется достаточно удобным. SFC являются рекомендуемым способом организации кода в проектах Vue.js, особенно больших. Как и в случае с React, рекомендовано использовать основной компонент App.vue для рендера вашего приложения.

3. Angular

AngularJS, оригинальный фреймворк, является MVC (Model-View-Controller) фреймворком. Но в Angular 2 нет строгой связи с MV*-паттернами, поскольку он также основан на компонентах.

Проекты в Angular структурированы на Модули, Компоненты и Сервисы. Каждое приложение Angular имеет как минимум один рутовый компонент и один рутовый модуль.

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

Каждый компонент в Angular содержит шаблон, логику c метаданными и опционально стили, разделенные на отдельные файлы в отличии от Vue. Метаданные для компонента указывают Angular, где найти строительные блоки, необходимые для создания и представления вида компонента. Шаблоны Angular написаны на HTML, но могут также включать синтаксис шаблонов Angular со специальными директивами, как и в случае с Vue.

Сервисы в Angular используются компонентами для делегирования задач, таких как получение данных или проверка ввода. Они являются отдельной частью приложений Angular, в отличии от React и Vue, которым нужно устанавливать дополнительные библиотеки для достижения похожих целей. Хотя Angular не принуждает к их использованию, настоятельно рекомендуется структурировать приложения как набор отдельных сервисов, которые можно использовать повторно.

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

Экосистема

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

1. React

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

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

Экосистема React также включает React Native, позволяющий создавать нативные приложения для iOS и Android написанные на React. Таким образом, React может стать отличным выбором для создания мобильных приложений с использованием веб-технологий.

React является частью стека MERN, в который входят MongoDB, ExpressJS, React и NodeJS. Преимуществом данного стека есть единый язык программирования – Javascript.

2. Vue

Хотя Redux может быть использован с Vue, однако официального биндинга, как в случае с React, нет. Но не стоит переживать, поскольку существует Vuex – официальный аналог Redux, созданный специально для приложений Vue и поддерживаемый командой разработки Vue.js.

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

Для разработки мобильных приложений существует перспективный проект под названием Weex, разработанный компанией Alibaba. Однако Weex далеко не такой зрелый и мощный, как React Native. Более того, поскольку проект разрабатывается и используется больше в Китае, сложнее найти документацию и решения проблем на английском языке.

Vue часто используется с Laravel из-за их хорошей интеграции. Laravel предлагает полную JavaScript и CSS поддержку, позволяющую использовать Vue в Laravel проектах.

3. Angular

Для управления состояниями в Angular также существует официальный проект NgRx, вдохновленный Redux.

Как и в случае с Vue и React, существует множество готовых к использованию компонентов, легко импортируемые в Angular проекты. Однако стоит помнить о наличии множества официальных компонентов в библиотеке Angular Material. Это официальный проект от Google, который предлагает готовые компоненты (кнопки, списки, диалоговые окна и т.д.) для приложений Angular.

NativeScript является оптимальным вариантом для создания кроссплатформенных мобильных приложений в Angular. Он также может быть использован с Vue, но поддержка Angular более развита.

Angular является частью известного стека MEAN, состоящий также из MongoDB, ExpressJS и NodeJS. Подобно стеку MERN, он полностью полагается на JavaScript как для фронтенда, так и для бэкенда.

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

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

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

1. Бенчмарк JS фреймворков

Проект JS Framework Benchmark является хорошим способом посмотреть сравнения производительности различных фреймворков, с помощью выполнения базовых операций над таблицой из 1000 рандомизированных записей. Ниже приводятся результаты сравнения React, Vue и Angular по времени в милисекундах, затраченном на каждую из них.

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

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

2. Исследование производительности Perf Track

Проект Perf Track от Google Chrome Labs ставит за цель проверить производительность вебсайтов, написанных на популярных фреймворках. Давайте взглянем на данные ниже:

�� удовлетворительное время выполнения

Стоит заметить, что приведенные данные были собраны на момент 1-го ноября 2020 года для мобильных устройств и на них влияет не только выбор фреймворка, но и множество других факторов. Для третьего пункта, непредвиденного сдвига лэйаута страницы при прогрузке элементов, выбор фрейворка и вовсе мало влияет. Однако попробуем сделать некоторые выводы.

Первая прорисовка контента и наибольшая прорисовка контента показывает, что Vue и React лучше справляются с прогрузкой и рендерингом страницы, чем Angular, которому обычно нужно больше времени, чтобы подготовить приложение. Задержкой первого ввода (3 пункт) является временный промежуток между действием юзера (клик на кнопку, ввода данных) и реакцией страницы на него и, к счастью, все 3 фреймворка показывают исключительно хорошие результаты по этому параметру. Также стоит заметить, что свыше 70% приложений на Vue загружают менее 1MB JavaScript для своей работы, тогда как другие 2 фреймворка и Angular в частности обычно занимают намного больше памяти. Однако, нужно понимать что это может значить, что большинство маленьких проектов написанны на Vue, тогда как Angular используется для более массивных проектов.

3. Дополнительные приемы улучшения производительности

Основными двумя техниками, улучшающими работу фронтенд приложений, являются SSR (server-side rendering) и виртуализация. Рендеринг на стороне сервера по сути есть способность приложения скомпилировать HTML-файлы из сервера в полностью прогруженную страницу для юзера, а виртуализацией является прогрузка компонентов по мере их требования (например по мере скроллинга страницы).

React имеет по умолчанию официальный пэкэдж ReactDOMServer для рендеринга на стороне сервера, а для виртуализации многие используют посторонние библиотеки React-Virtualized и React-Window

Vue также по умолчанию имеет SSR пэкэдж Server-Renderer, однако с виртуализацией потенциальные разработчики могут испытывать проблемы, так как даже самая популярная библиотека Vue Virtual Scroll List имеет некоторое количество багов и не настолько стабильна, как её аналоги для других фреймворков.

Angular в очередной раз подтверждает свое звание полноценного фреймворка, имея официальный Angular Universal для серверного рендеринга и встроенные компоненты для виртуализации.

Сложность обучения и популярность

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

1. React

На первый взгляд может показаться, что React – самый простой в использовании фреймворк, просто импортируем библиотеку, и можно писать JavaScript с использованием React API. Однако в самом начале мы уже рассмотрели насколько неудобно выглядит простой Hello world! Пример, написанный на чистом JavaScript, поэтому каждый начинающий React девелопер должен смириться с фактом, что альтернативы обучению JSX нет, поскольку его использование является аксиомой в сообществе для создания HTML-лэйаута компонентам. Изначально необходимость частично переходить на «микс» из JavaScript и HTML может показаться несколько неинтуитивной. С другой стороны, начиная с версии 16.8 React вводит функциональные компоненты, что значительно упрощает синтаксис и позволяет быстро создавать компоненты в виде простых ES6 стрелочных функций с типично JSX лэйаутом в возвратном значении.

const exampleComponent = (props) => < . // JavaScript return( . // JSX ); >; export default exampleComponent;

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

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

2. Vue

Одним из концептов, с которым нужно познакомиться начинающим Vue разработчикам, является расширенный HTML синтаксис с директивами. Большинство основных Vue директив интуитивно понятны – v-if для рендеринга при условии, v-for для рендеринга в цикле, v-on для биндинга функционала к ивент листенерам и так далее. Наличие лэйаута, функционала и стилей в одном .vue файле с интуитивным синтаксисом также делает разработку каждого компонента максимально простой и без перескакивания между файлами.

С релизом Vue 3 в 2020 году, создатели фреймворка разрешили множество проблем, которые имело сообщество с использованием Vue для больших проектов, введя возможности для более широкого реюза функционала между компонентами. Также была улучшена поддежка таких проектов с помощью рефакторинга исходного кода Vue на TypeScript.

Так как Vue является самым «молодым» фреймворком, размер сообщества естественно поменьше, чем у React и Angular, и всеобщая популярность старой версии Vue 2 в основном среди китайских пользователей также создавала некоторые проблемы в обмене знаниями и поиске ответов на вопросы. Однако по той же статистике npm – Vue является лидером в приросте загрузок за последний год. Значительные улучшения в Vue 3 позволяют быть уверенными, что Vue скоро может обогнать по популярности Angular.

3. Angular

Звание полноценного фреймворка не дается легко, и Angular разработчикам приходится знакомиться с многими концептами. Angular ожидает, что разработчики будут придерживаться определенной структуры в написании кода и постоянно использовать модули с сервисами, помимо компонентов. Как и в случае с Vue необходимо изучить дополнительный HTML синтаксис состоящий из ng-* директив. И стоит помнить, что Angular работает лучше всего с TypeScript и в случае выбора этого фреймворка нужно будет обязательно ознакомиться с TypeScript. Также сложность изучения повышает широкое использование RxJS — библиотеки для реактивного программирования, которая позволит удобно организовать работу с событиями и асинхронным кодом и есть более мощной, но в то же время сложной альтернативой промисам.

Будучи более старым фреймворком, чем React или Vue, и эволюционировав из своего прототипа Angular.js, Angular может похвастаться огромным сообществом, и он все ещё является популярным выбором фреймворка для больших проектов. Однако у первой версии Angular была достаточно известная проблема – сложность апгрейда проекта на более новые версии, которая впоследствии была исправлена в Angular 2 и выше. Тем не менее в последнее время множество проектов предпочитают использовать React или Vue, особенно те, что начинают как старт-апы с небольшими командами.

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

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

Более детальное сравнение функциональности, реюза логики, управление состоянием и роутинг мы рассмотрим с вами во второй части. А пока до встречи!

Angular или React: что выбрать в 2023 году?

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

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

Что такое Angular и React?

Angular (также известный как Angular 2.0) — это платформа для разработки, выпущенная компанией Google в 2016 году. Первая версия фреймворка называется AngularJS, но он имеет ряд фундаментальных отличий по сравнению с более поздними версиями. Например, в AngularJS используется только язык JavaScript, в то время, как его наследник обеспечивает поддержку и JS, и TypeScript.

React — это библиотека JavaScript, разработанная Facebook в 2013 году. Разработчики включили в инструмент несколько нововведений, которые позволяли упростить процесс разработки. Например, они одними из первых стали использовать компонентно-ориентированную архитектуру, то есть разделение проекта на логические и функциональные компоненты. Эта архитектура настолько понравилась сообществу, что разработчики Google также добавили ее в Angular2.

Сходства и отличия React и Angular

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

Angular — это полноценный фреймворк. То есть «из коробки» он дает полную архитектуру приложения, а также включает в себя ряд крошечных библиотек для выполнения конкретных задач. Но это не всегда плюс: часть модулей будут висеть неиспользованными и создавать ненужную нагрузку.

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

Языки программирования

TypeScript — это язык, предполагающий строгую типизацию данных, что приводит к написанию более надежного кода и меньшему количеству ошибок на этапе поддержки. Программист не сможет написать приложение на Angular без знания TS, так как он используется во фреймворке по умолчанию. React также можно связать с TypeScript при помощью специальных настроек, но стандартно библиотека работает только с JavaScript.

Сложность и стоимость разработки

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

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

Масштабируемость

Если у вас в команде есть специалисты, которые смогут составить план и грамотно настроить архитектуру приложения, то React весьма гибкий в возможностях. Но из MVC (Model-View-Controller) он предоставляет только View, то есть отображение. Остальные компоненты придется настраивать самостоятельно, и в неграмотных руках это может привести к серьезным проблемам в будущем, когда приложение будет разрастаться.

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

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

Основное отличие инструментов состоит в том, что React предоставляет виртуальный DOM, а Angular инкрементный.

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

Инкрементный DOM хранит каноническое представление DOM в самом себе. Это означает, что в процессе не используется дополнительная память, что имеет значение для устройств с ограниченным объемом памяти.

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

Безопасность

Так как обе технологии опенсорсные, то нет смысла сравнивать их в плане безопасности. Для каждого фреймворка или библиотеки на JS есть список наиболее очевидных уязвимостей, которые стоит учитывать при разработке. И выбор в пользу определенного инструмента не повлияет на вероятность взлома или утечки данных.

Тестирование

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

Популярность

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

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

Документация в Angular намного длиннее, так как в ней огромное количество встроенных библиотек и функций. К тому же Google продолжает развивать экосистему: предоставляет регулярные улучшения и исправления ошибок. Но из-за быстрого развития фреймворка обновления документации иногда не успевают за релизами.

Сообщество ReactJS испытывает аналогичную проблему. У библиотеки есть некоторая документация для последних версий, но следить за всеми изменениями и интеграциями — непростая задача. Однако эта проблема нейтрализуется поддержкой сообщества. ReactJS имеет большой пул разработчиков, готовых поделиться своими знаниями на тематических форумах.

Обновления

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

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

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

Характеристика	React	Angular
Назначение	Библиотека занимается только компонентами пользовательского интерфейса. Дизайн MVC требует реализации Flux, но он дает больше гибкости в организации кода	Полнофункциональная платформа — дает четкое представление о том, как должно быть спроектировано приложение, а также включает в себя ряд крошечных библиотек
Привязка данных	Односторонняя привязка данных означает, что элемент пользовательского интерфейса не может влиять на состояние компонента	Поддерживает как одностороннюю, так и двустороннюю привязку данных. Двусторонняя привязка данных означает, что если мы изменим ввод пользовательского интерфейса, состояние модели изменится, и наоборот
Возможности для UI	Разработанные сообществом инструменты пользовательского интерфейса предоставляют широкий спектр компонентов с возможностью их кастомизации	Включает в себя ряд компонентов Material UI, которые упрощают настройку пользовательского интерфейса
DOM	Виртуальный DOM — каждый раз, когда DOM изменяется, создается новый виртуальный DOM по сравнению с предыдущим, и в «реальном» DOM обновляются только различия	Инкрементный DOM — когда создается новый DOM, он сравнивает его с предыдущим и применяет различия к «фактическому» DOM, выделяя память только при необходимости
Популярность	203 тыс. звезд на Github	86 тыс. звезд на Github
Для каких приложений подходит	Отлично подходит для приложений любого объема и сложности	Лучше всего фреймворк проявляет себя в сложных приложениях с большой нагрузкой. Для небольших продуктов разработка на Angular обойдется дороже, но не принесет явных преимуществ

Заключение

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

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

React или Angular или Vue.js — что выбрать?

Фреймворки JavaScript развиваются очень быстрыми темпами, и это означает, что сегодня мы часто обновляем версии Angular, React и еще одного игрока на этом рынке — Vue.js.

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

Плюсы и минусы Angular

Angular — это супергероическая среда JavaScript MVVM, основанная в 2009 году, которая отлично подходит для создания интерактивных веб-приложений.

• Angular используется вместе с Typescript. Он имеет исключительную поддержку для этого.
• Angular-language-service — обеспечивает интеллектуальные возможности и автозаполнение шаблона HTML-компонента.
• Новые функции, такие как generation Angular, использующие библиотеки npm из CLI, generation, и разработка компонентов, использующая Angular.
• Подробная документация, позволяющая разработчику получить всю необходимую информацию, не прибегая к помощи его коллег. Однако это требует больше времени для обучения.
• Односторонняя привязка данных, которая обеспечивает исключительное поведение приложения, что сводит к минимуму риск возможных ошибок.
• MVVM (Model-View-ViewModel), которая позволяет разработчикам работать отдельно над одним и тем же разделом приложения, используя один и тот же набор данных.
• Внедрение зависимостей от компонентов, связанных с модулями и модульностью в целом.
• Структура и архитектура, специально созданные для большой масштабируемости проекта.

• Разнообразие различных структур (Injectables, Components, Pipes, Modules и т. д.) усложняет изучение по сравнению с React и Vue.js, у которых есть только «Component».
• Относительно медленная производительность, учитывая различные показатели. С другой стороны, это можно легко решить, используя так называемый «ChangeDetectionStrategy», который помогает вручную контролировать процесс рендеринга компонентов.

Плюсы и минусы React

React — это библиотека JavaScript, разработанная Facebook в 2013 году, которая отлично подходит для создания современных одностраничных приложений любого размера и масштаба.

• Легко изучить, благодаря простому дизайну, использованию JSX (HTML-подобный синтаксис) для шаблонов и очень подробной документации. Разработчики тратят больше времени на написание современного JavaScript и меньше беспокоятся о коде, специфичном для фреймворка.
• Очень быстрая, благодаря реализации React Virtual DOM и различным оптимизациям рендеринга.
• Отличная поддержка рендеринга на стороне сервера, что делает его мощной платформой для контент-ориентированных приложений.
• Первоклассная поддержка Progressive Web App (PWA) благодаря генератору приложений `create-react-app`.
• Привязка данных является односторонней, что означает меньше нежелательных побочных эффектов.
• Redux, самая популярная платформа для управления состоянием приложений в React, ее легко учить и использовать.
• React реализует концепции функционального программирования (FP), создавая простой в тестировании и многократно используемый код.
• Приложения могут быть созданы с помощью TypeScript или Facebook’s Flow, имеющими встроенную поддержку JSX.
• Переход между версиями, как правило, очень прост: Facebook предоставляет «кодовые модули» для автоматизации большей части процесса.
• Навыки, полученные в React, могут быть применены к разработке на React Native.

• React не однозначен и оставляет разработчикам возможность выбирать лучший способ развития. Это может быть решено сильным лидерством проекта и хорошими процессами.
• Сообщество делится по способам написания CSS в React, которые разделяются на традиционные таблицы стилей (CSS Modules) и CSS-in-JS (т.е. Emotion и Styled Components).
• React отходит от компонентов на основе классов, что может стать препятствием для разработчиков, которым более комфортно работать с объектно-ориентированным программированием (ООП).
• Смешивание шаблонов с логикой (JSX) может сбить с толку некоторых разработчиков при первых знакомствах с React.

Плюсы и минусы Vue.js

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

• Усиленный HTML. Это означает, что Vue.js имеет много характеристик схожих с Angular, а это, благодаря использованию различных компонентов, помогает оптимизации HTML- блоков.
• Подробная документация. Vue.js имеет очень подробную документацию, которая может ускорить процесс обучения для разработчиков и сэкономить много времени на разработку приложения, используя только базовые знания HTML и JavaScript.
• Адаптивность. Может быть осуществлен быстрый переход от других фреймворков к Vue.js из-за сходства с Angular и React с точки зрения дизайна и архитектуры.
• Потрясающая интеграция. Vue.js можно использовать как для создания одностраничных приложений, так и для более сложных веб-интерфейсов приложений. Важно, что небольшие интерактивные элементы можно легко интегрировать в существующую инфраструктуру без негативных последствий.
• Масштабирование. Vue.js может помочь в разработке довольно больших шаблонов многократного использования, которые могут быть сделаны почти за тоже время, что и более простые.
• Крошечный размер. Vue.js весит около 20 КБ, сохраняя при этом свою скорость и гибкость, что позволяет достичь гораздо лучшей производительности по сравнению с другими платформами.

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

Заключение

Для опытного разработчика нет существенной разницы в том, какой фреймворк использовать, просто нужно некоторое время, чтобы привыкнуть к новому. В нашей компании мы используем в основном в React и Angular, но Vue.js также на заметке. У каждого фреймворка есть свои плюсы и минусы, а это означает, что при разработке продукта нужно сделать правильный выбор для каждого отдельного случая.