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

Если вы предпочитаете следить за тем, как я исследую эти фреймворки, вы можете посмотреть мое видео.

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

Теперь, когда мы разобрались с общими терминами, давайте рассмотрим, какие существуют фреймворки JavaScript с открытым исходным кодом.

Для контекста, вот общедоступные данные о популярности, основанные на загрузках пакетов NPM для каждого фреймворка благодаря тенденциям npm.

РеактJS

ReactJS был изобретен Facebook, и сегодня он является явным лидером среди фреймворков JavaScript, хотя он был изобретен намного позже Angular. React представляет концепцию, называемую виртуальным DOM, абстрактную копию, в которой разработчики могут использовать только те функции ReactJS, которые им нужны, без необходимости переписывать весь проект для работы в рамках. Кроме того, активное сообщество открытого исходного кода с проектом React определенно было рабочей лошадкой роста. Вот некоторые из ключевых сильных сторон React:

  • Разумная кривая обучения — разработчики React могут легко создавать компоненты React, не переписывая весь код на JavaScript. Узнайте о преимуществах ReactJS и о том, как он упрощает программирование, на главной странице ReactJS.
  • Высоко оптимизирован для производительности — реализация виртуального DOM React и другие функции повышают производительность рендеринга приложений. См. описание ReactJS о том, как его производительность может быть оценена и измерена с точки зрения того, как работает приложение.
  • Отличные вспомогательные инструменты — Redux, Thunk и Reselect — одни из лучших инструментов для создания хорошо структурированного отлаживаемого кода.
  • Односторонняя привязка данных. Модель, используемая в Reach, передается от владельца к ребенку, что упрощает отслеживание причин и следствий в коде. Подробнее об этом читайте на странице ReactJS о привязке данных.

Кто использует ReactJS? Поскольку его изобрел Facebook, сама компания активно использует React для своей главной страницы, а Instagram, как говорят, полностью основан на библиотеке ReactJS. Вы можете быть удивлены, узнав, что другие известные компании, такие как New York Times, Netflix и Khan Academy, также внедряют ReactJS в свои технологические стеки.

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

GitHub ReactJS в настоящее время показывает более 13 тысяч коммитов и 1377 участников проекта с открытым исходным кодом. И это проект с открытым исходным кодом под лицензией MIT.

Угловой

Сейчас React может быть ведущим JavaScript-фреймворком по количеству разработчиков, но Angular отстает. Фактически, в то время как React является более популярным выбором среди разработчиков с открытым исходным кодом и начинающих компаний, более крупные корпорации, как правило, предпочитают Angular (некоторые из них перечислены ниже). Основная причина заключается в том, что, хотя Angular может быть более сложным, его единообразие и последовательность хорошо подходят для более крупных проектов. Например, я работал как над Angular, так и над React на протяжении всей своей карьеры, и я заметил, что крупные компании обычно считают строгую структуру Angular сильной стороной. Вот некоторые другие сильные стороны Angular:

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

Известные веб-сайты, такие как YouTube, Netflix, IBM и Walmart, внедрили Angular в свои приложения. Я лично начал разработку внешнего интерфейса JavaScript с Angular, изучая этот предмет. Я работал над несколькими личными и профессиональными проектами с использованием Angular, но это был Angular 1.x, который в то время назывался AngularJS. Когда Google решил обновить версию до 2.0, они полностью переработали фреймворк, после чего он стал Angular. Новый Angular был полной трансформацией предыдущего AngularJS, который вытеснил некоторых существующих разработчиков и привлек новых разработчиков.

Страница Angular GitHub показывает 17 781 коммит и 1133 участника на момент написания этой статьи. Это также проект с открытым исходным кодом с лицензией MIT, поэтому вы можете свободно использовать его для своего проекта или вносить свой вклад.

VueJS

VueJS — очень интересный фреймворк. Это новичок на сцене фреймворков JavaScript, но его популярность значительно возросла за несколько лет. VueJS был создан Эваном Ю, бывшим инженером Google, работавшим над проектом Angular. Фреймворк стал настолько популярным, что многие фронтенд-инженеры теперь предпочитают VueJS другим фреймворкам JavaScript. На приведенной ниже диаграмме показано, как быстро фреймворк набирал обороты с течением времени.

Вот некоторые из ключевых сильных сторон VueJS:

  • Более простая кривая обучения. Даже по сравнению с Angular или React многие разработчики интерфейсов считают, что у VueJS самая низкая кривая обучения.
  • Небольшой размер — VueJS относительно легкий по сравнению с Angular или React. В его официальной документации указано, что его размер составляет всего около 30 КБ, в то время как проект, сгенерированный Angular, например, превышает 65 КБ.
  • Краткая документация — у Vue есть подробная, но краткая и четкая документация. См. его официальную документацию для себя.

GitHub VueJS показывает 3099 коммитов и 239 участников.

МетеорJS

MeteorJS — это бесплатный изоморфный фреймворк с открытым исходным кодом, что означает, что, как и NodeJS, он запускает как клиентский, так и серверный JavaScript. Meteor можно использовать в сочетании с любым другим популярным интерфейсным фреймворком, таким как Angular, React, Vue, Svelte и т. д.

Meteor используется несколькими корпорациями, такими как Qualcomm, Mazda и Ikea, а также многими приложениями, такими как Dispatch и Rocket.Chat. См. кейсы на официальном сайте.

Некоторые из ключевых особенностей Meteor включают в себя:

  • Данные по сети — сервер отправляет данные, а не HTML, и клиент их отображает. Данные в сети в основном относятся к тому, как Meteor формирует соединение WebSocket с сервером при загрузке страницы, а затем передает необходимые данные по этому соединению.
  • Разрабатывайте все на JavaScript — клиентская часть, сервер приложений, веб-страница и мобильный интерфейс могут быть разработаны с помощью JavaScript.
  • Поддерживает большинство основных фреймворков — Angular, React и Vue можно комбинировать и использовать вместе с Meteor. Таким образом, вы по-прежнему можете использовать свой любимый фреймворк, такой как React или Angular, но по-прежнему использовать некоторые замечательные функции, которые предлагает Meteor.

На данный момент GitHub Meteor показывает 22 804 коммита и 428 участников. Это довольно много для деятельности с открытым исходным кодом!

EmberJS

EmberJS — это JavaScript-фреймворк с открытым исходным кодом, основанный на шаблоне Model-view-viewModel(MVVM). Если вы никогда не слышали об EmberJS, вы определенно будете удивлены тем, как много компаний его используют. Apple Music, Square, Discourse, Groupon, LinkedIn, Twitch, Nordstorm и Chipotle используют EmberJS как один из своих технологических стеков. Посетите официальную страницу EmberJS, чтобы узнать обо всех приложениях и клиентах, использующих EmberJS.

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

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

Как и следовало ожидать от фреймворка, используемого многими приложениями, на странице Ember’s GitHub показано 19 808 коммитов и 785 участников. Это огромно!

KnockoutJS

KnockoutJS — это автономная среда JavaScript с открытым исходным кодом, использующая шаблон Model-View-ViewModel (MVVM) с шаблонами. Хотя об этом фреймворке, возможно, слышало меньше людей, чем об Angular, React или Vue, проект по-прежнему довольно активен среди разработчиков и использует такие функции, как:

  • Декларативное связывание. Система декларативного связывания Knockout предоставляет краткий и мощный способ связать данные с пользовательским интерфейсом. Как правило, легко выполнить привязку к простым свойствам данных или использовать одну привязку. Подробнее об этом читайте здесь, на странице официальной документации KnockoutJS.
  • Автоматическое обновление пользовательского интерфейса
  • Шаблон отслеживания зависимостей

Страница Knockout’s GitHub показывает около 1766 коммитов и 81 участника. Эти цифры не так значительны по сравнению с другими фреймворками, но проект по-прежнему активно поддерживается.

BackboneJS

BackboneJS — это облегченная среда JavaScript с интерфейсом RESTful JSON, основанная на парадигме проектирования Model-View-Presenter (MVP).

Говорят, что этот фреймворк используется Airbnb, Hulu, SoundCloud и Trello. Все эти кейсы вы можете найти на странице Backbone.

Страница BackboneJS GitHub показывает 3386 коммитов и 289 участников.

Стройный

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

Страница Svelte’s GitHub показывает 5729 коммитов и 296 участников на момент написания этой статьи.

АурелияJS

Последней в списке стоит Аурелия. Aurelia — это интерфейсный JavaScript-фреймворк, представляющий собой набор современных модулей JavaScript. Аурелия обладает следующими интересными особенностями:

  • Быстрый рендеринг — Aurelia утверждает, что ее фреймворк может рендерить быстрее, чем любой другой фреймворк сегодня.
  • Однонаправленный поток данных — Aurelia использует систему привязки на основе наблюдаемых данных, которая передает данные из модели в представление.
  • Создавайте с помощью ванильного JavaScript. Вы можете создавать все компоненты веб-сайта с помощью простого JavaScript.

Страница Aurelia’s GitHub показывает 788 коммитов и 96 участников на момент написания этой статьи.

Эта статья является перепубликацией моей оригинальной статьи, написанной для opensource.com: https://opensource.com/article/20/5/open-source-javascript-frameworks.