Топ-5 JS-фреймворков для фронтенд-разработки в 2020 году. Часть 1

Original author: Shifa Martin
  • Translation
Вероятно, фронтенд-разработчикам знакомо нечто подобное: вводишь в поисковике «лучшие JavaScript-фреймворки» и получаешь в ответ целую гору результатов, из которой очень непросто выбрать именно то, что нужно.

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



В основу составления этого рейтинга фреймворков и библиотек легли результаты опроса более чем 450 разработчиков из ValueCoders. Сюда попали пять наиболее интересных инструментов.

Разработчики из ValueCoders выбирают React


Я, когда узнала о том, что мои коллеги голосуют за React, не удивилась. Большинство участников опроса сочло React одной из лучших JavaScript-библиотек. Наши разработчики использовали React во множестве проектов. Это позволило ясно увидеть сильные стороны этого инструмента. Тот, кто пользуется React, получает комбинацию из следующих возможностей:

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

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

Обзор нашего приложения


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

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


Сведения об ученике и о его занятиях

Собственно говоря, я получила опыт работы с React в ходе создания этого приложения. Означает ли это то, что React — это признанный всеми лидер фронтенд-инструментов? Нет, не означает. Многие, например, могут особо отметить Vue, назвав этот фреймворк одним из лучших и вспомнив о богатом наборе имеющихся в нём стандартных вспомогательных средств.

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

А для начинающих разработчиков сложно даже сделать выбор, ограничив варианты тройкой ведущих фреймворков — Angular, React и Vue. Мы, для того, чтобы облегчить подобный выбор, отобрали 5 самых интересных фронтенд-фреймворков и библиотек, на которые стоит обратить внимание тем, кто собирается заниматься веб-разработкой в 2020 году.

Большая пятёрка фронтенд-инструментов


Если отталкиваться от популярности и распространённости инструментов фронтенд-разработки, то вот — пять наиболее заметных JavaScript-фреймворков и библиотек:

  • React
  • Vue
  • Angular
  • Ember
  • Backbone.js

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


Объёмы загрузок пакетов angular, ember-source, react, vue и backbone


Сравнение пакетов angular, ember-source, react, vue и backbone

Теперь поговорим о каждом из этих проектов. Начнём с React.

1. React


В JavaScript-мире React — это, определённо, лидер. В этой библиотеке используются идеи реактивного программирования, она вводит во фронтенд-разработку и множество собственных концепций.

Для того чтобы гибко использовать React в разработке веб-проектов, нужно изучить множество дополнительных инструментов. Вот, например, далеко не исчерпывающий список подобных инструментов, представленный библиотеками, которые можно использовать совместно с React. Это — Redux, MobX, Fluxy, Fluxible, RefluxJS. В React-разработке, кроме того, можно использовать jQuery AJAX, Superagent, Axios и Fetch API.

▍Конкурентный режим


Вот твит от 24 октября сего года, в котором сообщается о введении в React экспериментальной возможности по поддержке конкурентного режима (Concurrent Mode). Разработчики React постоянно улучшают этот режим. Здесь можно найти ссылки на выступления с React Conf 2019, посвящённые конкурентному режиму и другим нововведениям React, таким, как рендеринг ленивых (создаваемых с помощью React.lazy) компонентов внутри компонентов React.Suspense. Обе эти технологии позволяют сделать React-приложения более отзывчивыми за счёт выполнения рендеринга без блокировки главного потока. Это позволят React не задерживать обработку высокоприоритетных задач, таких, как формирование реакции приложения на воздействия пользователя.

▍Suspense и другие технологии


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

Ещё одно новшество, появившееся в React 16.8, это хуки (Hook). Хуки React позволяют разработчику пользоваться важнейшими возможностями React и при этом обойтись без применения компонентов, основанных на классах. Среди таких возможностей — управление состоянием компонента и работа с методами его жизненного цикла. React содержит несколько встроенных хуков, но при этом позволяет программисту создавать собственные хуки.

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

В React-программировании используются такие понятия как состояние (state) и свойства (props) компонента. Они представлены соответствующими объектами. Их использование позволяет организовать хранение данных в компоненте и обмен данными между компонентами. Например — передачу данных из программной логики, реализуемой компонентом, в интерфейс приложения, или передачу данных от родительских компонентов дочерним компонентам.

▍Элементы экосистемы React


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

  • Сама библиотека React и React Router — средство для управления маршрутами в приложении.
  • Пакет react-dom, предназначенный для работы с DOM.
  • Инструменты разработчика React для браузеров Firefox и Chrome.
  • JSX — язык разметки, который позволяет описывать HTML-элементы в JavaScript-коде.
  • Средство командной строки create-react-app, которое предназначено для создания шаблонных React-проектов.
  • Различные вспомогательные библиотеки. Среди них, например, можно отметить библиотеку Redux, используемую для управления состоянием приложений, и библиотеку Axios, используемую для обмена данными с серверными API.

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

2. Angular


На конференции AngularConnect 2019 команда разработчиков Angular сделала заявления, которые позволяют считать выход Angular 9 поворотной точкой в развитии этого фреймворка. В частности, планируется сделать компилятор Angular Ivy стандартным средством, доступным для всех приложений. Основные преимущества этой технологии заключаются в том, что её применение позволяет ускорить процесс разработки, уменьшить размер приложений, повысить их производительность и надёжность.

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

Angular известен своей гибкостью. Именно поэтому всё ещё актуальны версии Angular 1.x. Однако многие разработчики в наши дни пользуются Angular 2+ из-за MVC-архитектуры фреймворка, которая значительно изменилась в сторону архитектуры, основанной на компонентах.

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

▍Элементы экосистемы Angular


Вот некоторые составные части экосистемы Angular:

  • Инструменты командной строки, упрощающие создание заготовок приложений.
  • Набор модулей, которые можно использовать при разработке Angular-проектов: @angular/common, @angular/compiler, @angular/core, @angular/forms, @angular/http, @angular/platform-browser, @angular/platform-browser-dynamic, @angular/router и @angular/upgrade.
  • Библиотека Zone.js, которая позволяет управлять контекстами выполнения кода.
  • Языки TypeScript и CoffeeScript.
  • Обмен данными в Angular-приложениях можно организовать с использованием RxJS и наблюдаемых (Observable) объектов.
  • Angular Augury — средство для отладки Angular-приложений.
  • Технология Angular Universal, предназначенная для организации серверного рендеринга Angular-приложений.

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

Продолжение, часть 2

Уважаемые читатели! Если бы вам предложили назвать лучший фреймворк для фронтенд-разработки — что бы вы выбрали?


RUVDS.com
1,512.76
RUVDS – хостинг VDS/VPS серверов
Share post

Comments 32

    +2

    Почему статья обрывается на середине? Вроде текущий объем не супербольшой, чо бы делить ее на несколько частей

      –4
      Статья на самом деле большая — поэтому решили разбить перевод на две части. Сегодня переведем остальное, завтра опубликуем продолжение.
        0
        Ну если назвали статью «Топ 5...», то в ней и пишите про 5. Жду логичного дополнения текущей статьи.
          0
          Мы уже опубликовали вторую часть.
      –1
      Компоненты, пригодные для многократного использования.

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


      Синхронизация состояния приложения и интерфейса.

      Только если его хранить в компонентах. Любое другое состояние не будет синхронизировано.

        +13
        Я, когда узнала о том, что мои коллеги голосуют за React, не удивилась. Большинство участников опроса сочло React одной из лучших JavaScript-библиотек. Наши разработчики использовали React во множестве проектов. Это позволило ясно увидеть сильные стороны этого инструмента.


        Я протер глаза на всякий случай. Но… это же точная реклама стирального порошка из 90-ых. Когда я узнала, что моя соседка тоже выбирает Тайд, я не удивилась. Большинство моих подруг тоже выбрали для себя Тайд как один из самых лучших стиральных порошков. Теперь у меня появилось время больше проводить времени с семьёй.
          +1
          Сравнение пакетов angular, ember-source, react, vue и backbone
          И зачем там данные по Angular.js?
            +2

            Да и бэкбон тут каким-то боком. Срочно переписываем все проекты с React на lodash!


            image

            +1
            backbone В 2020 году? Возможно, вместо него, стоило бы рассмотреть svelte.
              +2

              Где это кофескрипт используется в angular?

                0
                В JavaScript-мире React — это, определённо, лидер.

                Очень громкое заявление, основанное, очевидно, на кол-во скачанных npm пакетах? Если же смотреть на звезды гитхаба и кол-во форков, то лидирует Vue
                  0
                  А в чём смысл большого количества форков? Много изменений от комьюнити? И что это значит? Такой кривой, что всё править надо, или такой замечательный, что «ещё вот эту фичу запилить и будет идеал»?
                  Как понять, реального на нём много пишут, или оно для поиграться да по быстрому накидать одноразовую тулзу используется?
                  Я интересуюсь с точки зрения поизучать что-то из нового, на всякий случай.
                  Посмотрел по рынку (только фронт) — нужно много реакт или ангуляр разработчиков. Vue тоже попадается, но меньше. С другой стороны, меня и тут не плохо кормят, так что хотелось бы именно на перспективу, что-бы не устареть, инструмент поизучать.
                  Вообще, судя по знакомым — нужны PHP и jQuery в первую очередь :) (ну, это если в поддержку идти на среднюю з/п но без потогонки)
                    +1

                    На перспективу — $mol. Фичи из него только-только появляются в других фреймворках.

                      0

                      Предлагаю переименовать $mol в $авангард.

                        0

                        И продаться банку Авангард.

                          0

                          У меня была аналогия не с банком. Если убрать одну букву l то к молу скорее могут проявить интерес люди из МО.

                            0
                            московской области?
                              0

                              А пока из Смоленска… Там ведь даже С как доллар в названии есть xD

                      0
                      А надо подходить не с позиции «сколько и на чем вакансий», а с позиции «что учить, чтобы быстро сделать оптимальное по производительности приложение». Вот с этой позиции лучше брать Vue, он учится быстрее, нет Реактового оверхеда и избыточности.
                      Вот тут сравнение
                      www.codeinwp.com/blog/angular-vs-vue-vs-react
                    0
                    фреймворков и библиотек

                    Автор мешает все в одну кучу — фреймворки и библиотеки. А это две разные сущности. Поэтому сравнивать React и Angular и Vue впрямую не получится.

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

                    Эмм… Flux? Статья похоже на копипаст из различной свежести источников.
                      0
                      Меня Angular устраивает.
                        –1
                        а должен раздражать
                          0
                          Да не, норм, наоборот кайфую, особенно после нативного и jQ говно кода который писали раньше.
                            0
                            Он заложник бывшей популярности, а должен умереть.
                              0
                              Просто должен или есть объективные причины почему он меня должен раздражать и умереть?
                                0
                                Зачем же лучшему жс-фреймворку умирать?
                                  0
                                  лучшему? Эволюционно уродлив и несет груз наследия от которого избавиться можно как и в реале при диктатуре — через смерть диктатора.
                          0

                          Нет Svelte? Закрываем вкладку.

                          Only users with full accounts can post comments. Log in, please.