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

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

• Фреймворк и библиотека: в чем разница?
• React
• Vue
• Angular

Фреймворк и библиотека: в чем разница?

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

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

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

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

В этом гайде мы расскажем про основные веб-фреймворки для 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 выделяется если не своей философией, то синтаксисом. Вот как бы мы написали заголовок «Привет, мир!» на нем:

ReactDOM.render(
  <h1>Привет, мир!</h1>,
  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.js</title>
  </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!';
}

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

<html lang="ru">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <title>{{ title }}</title>
 </head>
 <body>
   {{ title }}
 </body>
</html>

Полную версию приложения «Привет, мир!» на 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

Попробовать бесплатно