Вероятно, фронтенд-разработчикам знакомо нечто подобное: вводишь в поисковике «лучшие 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

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


Комментарии (27)


  1. ThisMan
    20.11.2019 13:28

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


    1. ru_vds Автор
      20.11.2019 14:23

      Статья на самом деле большая — поэтому решили разбить перевод на две части. Сегодня переведем остальное, завтра опубликуем продолжение.


      1. c_kotik
        21.11.2019 12:36

        Ну если назвали статью «Топ 5...», то в ней и пишите про 5. Жду логичного дополнения текущей статьи.


        1. ru_vds Автор
          21.11.2019 13:12

          Мы уже опубликовали вторую часть.


  1. vintage
    20.11.2019 14:15
    -3

    Компоненты, пригодные для многократного использования.

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


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

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


  1. Alexufo
    20.11.2019 15:09
    +1

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


    Я протер глаза на всякий случай. Но… это же точная реклама стирального порошка из 90-ых. Когда я узнала, что моя соседка тоже выбирает Тайд, я не удивилась. Большинство моих подруг тоже выбрали для себя Тайд как один из самых лучших стиральных порошков. Теперь у меня появилось время больше проводить времени с семьёй.


  1. Odrin
    20.11.2019 18:02

    Сравнение пакетов angular, ember-source, react, vue и backbone
    И зачем там данные по Angular.js?


    1. vintage
      20.11.2019 18:21

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


      image


  1. softaria
    20.11.2019 22:50

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


  1. psFitz
    21.11.2019 01:10

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


  1. sashavoloh
    21.11.2019 15:42
    +1

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

    Очень громкое заявление, основанное, очевидно, на кол-во скачанных npm пакетах? Если же смотреть на звезды гитхаба и кол-во форков, то лидирует Vue


    1. naimjon94
      21.11.2019 19:27


      1. sashavoloh
        22.11.2019 20:45

        Люди чаще ищут что-то связанное с Реактом, потому что у них документация хуже?


    1. Tolomuco
      21.11.2019 19:27

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


      1. vintage
        21.11.2019 21:34

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


        1. babylon
          22.11.2019 14:29

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


          1. vintage
            22.11.2019 15:00

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


            1. babylon
              23.11.2019 15:05

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


              1. Alexufo
                23.11.2019 21:09

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


      1. sashavoloh
        22.11.2019 20:52
        -1

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


  1. JordanoBruno
    21.11.2019 21:56

    фреймворков и библиотек

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

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

    Эмм… Flux? Статья похоже на копипаст из различной свежести источников.


  1. bond1768
    22.11.2019 11:35

    Меня Angular устраивает.


    1. Alexufo
      22.11.2019 14:08

      а должен раздражать


      1. bond1768
        23.11.2019 20:26

        Да не, норм, наоборот кайфую, особенно после нативного и jQ говно кода который писали раньше.


        1. Alexufo
          23.11.2019 21:08

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


          1. bond1768
            24.11.2019 01:07

            Просто должен или есть объективные причины почему он меня должен раздражать и умереть?