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

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

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

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


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

Преимущества Angular:

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

Недостатки Angular:

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

Компании, использующие Angular: Microsoft, Autodesk, MacDonald’s, UPS, Cisco Solution Partner Program, AT&T, Apple, Adobe, GoPro, ProtonMail, Clarity Design System, Upwork, Freelancer, Udemy, YouTube, Paypal, Nike, Google, Telegram, Weather, iStockphoto, AWS, Crunchbase.

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


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

Преимущества React:

  • Легко изучить, благодаря простому дизайну, использованию 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:

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

Компании, использующие React: Facebook, Instagram, Netflix, New York Times, Yahoo, Khan Academy, Whatsapp, Codecademy, Dropbox, Airbnb, Asana, Atlassian, Intercom, Microsoft, Slack, Storybook и многие другие

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


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

Преимущества Vue.js:

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

Недостатки Vue.js:

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

Компании, которые используют Vue.js: Xiaomi, Alibaba, WizzAir, EuroNews, Grammarly, Gitlab и Laracasts, Adobe, Behance, Codeship, Reuters.

Заключение


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

Подробнее
Реклама

Комментарии 41

    +8

    О, напишите ещё про плюсы и минусы машинного перевода.

      +1
      Кажется, вот оригинал:
      React vs Angular vs Vue.js — What to choose in 2019? (updated)

      Я так понял, за такие «переводы» (которые даже не помечены соответствующим тегом) ныне дают инвайт… По крайней мере, со стороны это выглядит именно так.
      +2
      После vue angular показался чутка overengineered со всеми своими концепциями и приправленный rxjs'ом сверху. Знаете такое чувство, когда открываешь какой-нибудь компонент и думаешь «е##ть, что тут происходит вообще» =) Вот это ангуляр.

      Имхо его надо брать если у вас прям большое серьезное приложение и у команды достаточно опыта писать на нем правильно, иначе есть риск потонуть.
        0
        С чего бы это вдруг именно Angular для чего-то большого, а остальным типо это так, для простеньких апликух? Где увидели/услышали эту фразу и приняли ее за истину?
          +1
          Остальные фреймы для чего угодно, тут нет противопоставления, это исключительно мое имхо по поводу ангуляра.
            0
            Angular 2+ — это SPA. By design. Из него конечно можно с помощью напильника, синей изоленты и какой-то матери сделать пару легковесных компонентов, но зачем?
              0
              React и Vue это типо это так, для простеньких апликух по вашему? На что-то большое не годятся?
                0
                FreightLiner и Камаз это типа так, для всякой мелочёвки по вашему, если на них нельзя как на Белазах по 100 тонн за раз возить? На что-то большее не годятся?
                  0

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

                  0
                  Из него конечно можно с помощью напильника, синей изоленты и какой-то матери сделать пару легковесных компонентов

                  Сомнительное утверждение. Даже после вырезания всего и вся результат сложно будет назвать легковесным.

              0
              Может быть Blazor?
                +4
                Когда читаешь в статье «реакт очень быстр, потомушто VDOM» — понимаешь, что в этой статье пошло не так примерно всё, что вообще могло пойти не так.
                  +1

                  Компании, которые используют Vue.js: Habr.

                    0

                    Habr разве компания?)

                    +2
                    Мда, еще одна статья про сравнение этих фреймворков. Еще и непонятно о какой компании говорится в статье)
                    Ну ладно.

                    «Преимущества React:
                    Легко изучить.»
                    Так было года 3-4 назад. Думаю, этот пункт пора перенести в vue. Сейчас наверное 90% реакт проектов используют Redux. Так что, говоря о react можно прикреплять весь общепринятый зоопарк плагинов к нему. Примерно таких: react-router, redux, redux-forms, redux-saga, reselect.
                    Помимо этого есть куча тонкостей в самом react, а также несколько часто-используемых техник. А недавно появившиеся хуки вообще вынудили и старых разработчиков переучивать api жизненного цикла.
                    Со всем этим реакт точно проще angular? Что-то я не уверен.
                    На мой взгляд пора валить с реакта( Дэн хорошо постарался.
                      0

                      В Vue тоже появился новый апи на хуках и с ним тоже используют всякие vuex.

                        0
                        Видел, но пока не пробовал. Возможно с ним тоже будут свои проблемы. И думаю, что будут.
                        Но там хотя-бы useMounted, useUpdated сделали, а не объединили 3 метода в useEffect, поведение которого зависит от внутреннего содержимого. (Интересно, кого нанимает фейсбук? Спецов по алгоритмам и оптимизации? А то лично я в решениях реакта не ощущаю, что его разработчики толком разбираются в проектировании)
                        Хотя сейчас смотрю, там тоже есть useEffect, из названия которого не понятно, что он делает.

                        Жаль, что разработчики реакта и vue не нашли/не придумали решение проблемы повторного использования логики без перехода в функциональный стиль.
                          0
                          useEffect, поведение которого зависит от внутреннего содержимого

                          А как оно зависит?

                            0
                            Добавляем return, возвращающий некую функцию, добавляется поведение аналогичное componentWillUnmount.
                            Добавляем второй параметр в вызов useEffect(() => {}, []), вместо componentDidMount получаем componentDidMount + componentDidUpdate (вроде бы). Выше, я неправильно написал, что от внутреннего содержимого, т.к. в этом случае поведение зависит от наличия второго параметра при вызове метода.
                              0

                              Похоже вы просто недоразобрались в апи хуков: https://reactjs.org/docs/hooks-effect.html

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

                            codesandbox.io/s/pedantic-silence-xu0jd — Переиспользование логики, и добавление useEffect в классовые компоненты (аналог reactjs.org/docs/hooks-custom.html)

                            Наслаждайтесь, все очень даже легко и просто переиспользуется с классовыми компонентами
                              0
                              Видел уже ваше решение. Когда оно заменит hoc и хуки во всех основных сторонних плагинах, тогда может и буду использовать) Но скорее из react-а раньше классы выпилят, чем это случится.
                                0
                                Зачем что либо ком-то заменять? Если это уже предусмотрено и работает, просто бери и пользуйся, тут просто обычная работа с классовым компонентом, никакой магии
                                  0
                                  Хотя бы затем, что чем меньше различных решений одной и той же проблемы в проекте, тем лучше.
                                  Ну и реальная проблема с некоторыми сторонними компонентами (а может даже с очень многими), от которой свое решение не поможет. Допустим, надо использовать сторонний компонент и нужно добавить какой-нибудь не предусмотренный в нем функционал или убрать не нужный. А компонент так спроектирован, что этого нельзя сделать. Либо бери другой, менее подходящий плагин, либо копируй исходники в свой проект и меняй их, либо ищи еще какое-нибудь решение проблемы. До недавнего времени повсеместно использовались HOC. Компоненты в библиотеках зачастую предоставлялись уже обернутые в них. А удалить/отключить ненужный HOC нельзя. И получается, что вместо того, чтобы получить набор «кирпичиков», для использования в своих компонентах, получаем готовые не очень гибкие компоненты. Вообще, пока логика будет писаться в самих компонентах, этого не избежать.
                                    0
                                    Ну так не фиг использовать под каждый чих сторонние компоненты… Тем более если их поведение тебя не устраивает на 100%. А вообще если такая великая проблема писать код собственноручно, то форкаешь неугодный компонент, правишь его так, чтобы тебя устраивал, публикуешь в npm и вуаля. Я вот вообще не использую сторонние компоненты, либо использую те, поведение которых на 100% устраивает и никаких проблем не знаю много лет.
                                      0
                                      Бизнесу надо побыстрее и подешевле.
                                      Не вижу смысла дискутировать об этом. У нас с вами разные ситуации.
                                        0
                                        Мало ли что надо бизнесу, уважающий себя разработчик не будет терпеть всякую дичь ради денег, вакансий тонны на рынке
                                          0

                                          А много ли вакансий, где не придётся страдать от очередного кривого фреймворка "на Реакте"?

                                            0
                                            Полно, с 2012 года 90% проектов я пишу с нуля и не страдаю
                                              0

                                              Ну доброе утро значит. Последние 2 года 90% проектов безальтернативно пишут "на Реакте".

                                                0
                                                ну и? мне реакт нравится
                                                  0

                                                  Не сомневаюсь. Когда заходите повысить эффективность своей работы он вам резко разонравится.

                                      0

                                      Я просто оставлю это здесь: https://habr.com/ru/post/314752/

                          0

                          Для крупных и сложных веб приложений с нуля уровня энтерпрайз — однозначно Angular 2+, как наиболее целостную экосистему, для всего остального есть vue.js

                            0
                            Да? Прям однозначно? А что если есть разработчики реально высокого уровня, которые знают что такое построение архитектуры? Для них тоже дорога в энтерпрайз в паре с React или Vue закрыта?
                              0

                              Я пилил на Ангуляре энтерпрайз. Могу сказать, что он для этого совсем не подходит. Ему с одной стороны не хватает высокоуровневых решений (как в каком-нибудь ExtJS). А с другой — гибкости. И это если не говорить про отвратительную переусложнённую архитектуру, которую они на живую чинят ломая обратную совместимость, из-за чего многие компоненты для Ангуляра, которые вы можете найти в интернете не работают или глючат.

                              0
                              Относительно медленная производительность, учитывая различные показатели.

                              Это не совсем так. Если писать код "в лоб" (т.е. без оптимизаций), то ангуляр быстрее реакта в большинстве случаев. Если с оптимизациями — будет одинаково.

                                0

                                Я использую Vue.js на многих проектах и очень им доволен


                                Достаточно двух тегов v-if и v-for, чтобы начать с ним работать и получить выигрыш по скорости разработки и объему кода раз в 10, и ничего больше можно не изучать


                                Я считаю это огромным плюсом Vue.js

                                  0

                                  А когда v-model осваивает, такое начинается… )))

                                  –1

                                  Не интересно. Где минусовать?

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

                                  Самое читаемое