https://habr.com/ru/post/492126/

• Разработка веб-сайтов
• JavaScript
• Программирование

Доброго времени суток, друзья!

Популярность JS продолжает расти. Свидетельством этого является широкое применение JS как во фронтенде, так и в бэкенде, а также в мобильной разработке. Для ускорения разработки и повышения качества приложений существует большое количество фреймворков и библиотек. Самыми популярными из них являются следующие:



Представленная статистика основана на исследованиях StateOfJS за 2016, 2017, 2018, 2019 годы. Интерактивная версия доступна в нашем блоге.

1. React.js

React.js является самой популярной библиотекой для создания пользовательских интерфейсов. Часто ошибочно именуемая JS-фреймворком для фронтенда, данная библиотека отвечает лишь за представление в связке Модель-Представление-Контроллер (Model View Controller — MVC) для построения пользовательских интерфейсов и облегчает создание переиспользуемых компонентов. React — это библиотека с открытым исходным кодом, использующая виртуальный DOM для оптимизации обновлений DOM посредством обновления только тех компонентов, которые подверглись изменениям, что позволяет разработчикам чувствовать свободу в написании кода, как если бы страница обновлялась после каждого изменения. React использует JSX, который похож на HTML и является расширением синтаксиса JS. JSX — полезный визуальный помощник в деле разработки пользовательского интерфейса внутри JS-кода. JSX также имеет встроенную защиту XSS, производя очистку входных данных по умолчанию. Использовать React можно и без JSX, ограничившись нативным JS. Babel поддерживает подсветку синтаксиса JSX в ваших любимых редакторах кода. Необходимость изучения JSX в React усложняет процесс обучения. В отличие от других фреймворков, в React необходимо самому создавать рабочий процесс (рабочее окружение), а не просто пользоваться встроенными инструментами. React помогает создавать сложные пользовательские интерфейсы с помощью компонентов, которые разделяют интерфейс на переиспользуемые тесно взаимодействующие друг с другом части. Компоненты принимают входные данные (именуемые свойствами, напоминающими функции в JS) и возвращают элементы React, описывающие то, что должно отображаться на экране. React не требует использования фреймворка или библиотеки построения зависимостей, поскольку основан на компонентах. React Native позволяет разрабатывать мобильные приложения для iOS и Android, предлагая разработчикам мобильных приложений лучшие практики нативной разработки. С целью повышения производительности React допускает рендеринг статичной разметки на стороне сервера через ReactDOMserver, обычно используемого совместно с node.js. React позволяет настроить современное веб-приложение с помощью одной команды и одной зависимости.

Примечание: React и веб-компоненты решают разные задачи. Разработчики, как правило, не используют веб-компоненты вкупе с React, однако такая возможность все же имеется (например, если вы хотите использовать компонент пользовательского интерфейса, основанный на веб-компонентах). Как поясняется на официальном сайте React: «Веб-компоненты обеспечивают надежную инкапсуляцию переиспольуемых компонентов, в то время как React представляет собой декларативную библиотеку, которая синхронизирует DOM с вашими данными. Эти цели дополняют друг друга».

Количество скачиваний React с GitHub превышает 3 млн. Присмотритесь к React, если предпочитаете работать с виртуальным DOM и хотите получить множество готовых к использованию компонентов.

2. Vue.js

Vue.js позиционирует себя как прогрессивный фреймворк, позволяющий осуществить постепенный переход от «одностраничника» до полновесного приложения (полного стека). Vue был создан Evan You после работы в Google. Evan хотел создать JS-фреймворк, который бы взял лучшее из AngularJS, при этом будучи более легким. Одним из возможных негативных последствий влияния Angular является поддержка двусторонней привязки данных, которая подверглась жесткой критике (более подробную информацию см. в разделе, посвященном Angular). Несмотря на небольшой размер, Vue представляет «плавно адаптируемую экосистему», которая масштабируется от библиотеки JS до полнофункционального популярного JS-фреймворка для сложных веб-приложений. Vue позволяет создавать переиспользуемые компоненты, инкапсулирующие HTML, CSS и JS для общих элементов пользовательского интерфейса. Vue имеет более низкий порог вхождения, чем React и Angular, поскольку вам не нужно изучать TypeScript (расширение JS от Microsoft для Angular) или JSX. Для освоения Vue достаточно знаний ванильного JS. По данным GitHub, количество скачиваний Vue превышает 1,2 млн. Выберите Vue, если нуждаетесь во фреймворке с отличной документацией и возможности быстрого старта.

3. Angular

AngularJS или Angular 1 был создан Google как фреймворк для реализации MVC и MVVM (Model-View-View-Model) в 2009 году. Впоследствии команда разработчиков Angular возглавила создание Angular 2, поставившей амбициозную цель — полностью переписать AngularJS на основе TypeScript. Angular использует HTML в качестве языка шаблонов и поддерживает синтаксис расширения HTML. В отличие от React, Angular — это полноценный фреймворк. Angular довольно сложен в изучении, а Angular 1 подвергся критике за двустороннюю привязку данных, которые многие считают антипаттерном, обуславливающим сложность поддержки и отладки кода в сложных приложениях.

4. Preact

Preact представляет собой меньшую по размеру и более быструю альтернативу React, использующую тот же API. Preact фокусируется на повышении производительности (~3КБ против ~45КБ у React) и рациональном использовании памяти, низком пороге вхождения и общей совместимости с React API. Несмотря на то, что проект оптимизирован для достижения поставленных целей, preact-compact позволяет вставлять готовый React-код без каких-либо изменений. Это может быть полезно для проектов, которые сильно зависят от функций React, отсутствующих в Preact. Однако при этом вам придется отказаться от некоторых преимуществ данной библиотеки. По статистике GitHub количество скачиваний Preact превышает 19 тысяч. Остановите свой выбор на Preact, если желаете легкую и быструю замену React.

5. Ember.js

Ember.js, описывающий себя как «фреймворк для амбициозных веб-разработчиков» нацелен на продуктивность программистов. Ember.js идеально подходит для одностраничных приложений, основанных на шаблоне MVVM. Он был написан Yehuda Katz, который ранее входил в ядро команды разработчиков jQuery. Кроме возможности создания клиентской части приложений, Ember также включает в себя официальный слой данных (data layer), позволяющий взаимодействовать с бэкендом путем двухстороннего связывания данных. У Ember есть целый набор плагинов, предлагающий множество полезных инструментов интеграции. Ember-CLI, дополнение командной строки, обеспечивает поддержку различных технологий, включая CoffeeScript, Handlebars, SaaS/Less и др. Количество скачиваний Ember на Github превышает 20 тысяч. Обратите внимание на Ember, если вас интересует элегантный и быстро развивающийся фреймворк с огромным сообществом.

Бонус. 6. Svelte

Заслуживающий упоминания Svelte, представляет собой фреймворк, который компилируется в JS во время сборки, что влияет на производительность на стороне клиента. Svelte не имеет виртуального DOM или зависимостей на стороне клиента. Объявивший себя «радикально новым подходом к созданию пользовательских интерфейсов», Svelte переносит основную часть работы, выполняемой браузером при использовании других фреймворков и библиотек, на компиляцию, которая происходит при сборке приложения. Представленный широкой общественности в 2016 году и достигший третьей версии к моменту написанию этих строк, Svelte набирает популярность среди разработчиков, которые ценят производительность. Эта производительность достигается за счет обратной совместимости, когда браузеры, такие как IE11 и его более ранние версии, не поддерживают сгененированный код. Конечно, общая экосистема Svelte не так развита, как у более популярных фреймворков. Приглядитесь к Svelte, если вы ищете легковесный феймворк с высокой производительностью и разумным порогом вхождения.

Заключение

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



См. интерактивную версию данной таблицы.

Уважаемые читатели, а какие фреймворки в своей работе используете вы?

Благодарю за внимание.