Свежая подборка самых популярных и наиболее востребованных JavaScript фреймворков, библиотек и инструментов на 2017 год.





Кажется, что JS-библиотек и фреймворков больше, чем JS-разработчиков. На май 2017 года быстрый поиск по GitHub выдает более чем 1.1 миллион проектов на JavaScript. На npm.js находится 500 тысяч активно используемых пакетов с почти 10 миллиардами скачиваний каждый месяц.

Эта статья призвана объяснить элементарные различия между самыми популярными JS-фреймворками, инструментами и библиотеками. Являются ли они лучшими для вас — уже другой вопрос. Выберите что-нибудь одно и задержитесь на нем какое-то время. Но избавьте себя от заблуждения, что ваш любимый инструмент не заменится чем-нибудь «получше» независимо от вашего первоначального выбора.

Пожалуйста, примите нижеизложенные соглашения перед прочтением данной статьи:

• Мир JavaScript меняется изо дня в день. Эта статья будет устаревшей с момента ее публикации!
• Под «лучшими» имеются в виду «наиболее популярные проекты общего назначения». Все они бесплатны и имеют открытый исходный код, но список может не включать ваши любимые.
• В список не попали проекты, разработка которых приостановлена, даже если они широко распространены и активно используются.
• Упомянуты только клиентские приложения. Некоторые из них могут выполнять функции серверной части, однако список не содержит полностью серверно-ориентированных приложений вроде Express.js или Hapi.
• Информация о каждом проекте краткая и предоставляет свободу для дальнейшего изучения.
• У каждого проекта есть индикатор популярности, но статистика, как известно, может вводить в заблуждение.
• Автор подборки предвзят. Вы предвзяты. Все предвзяты!

Хитрая терминология

Для разных людей слова «фреймворк», «библиотека» и «инструмент» могут означать разные вещи в зависимости от контекста. Дадим общие определения, используемые здесь.

Библиотеки

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

Библиотека обычно сокращает время разработки примерно на 20%, позволяя вам не беспокоиться о мелочах. Отрицательные стороны:

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

Фреймворки

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

Фреймворк находится на более высоком уровне абстракции по сравнению с библиотекой и позволит вам без труда выстроить около 80% вашего приложения. Его минусы:

• последние 20% могут вызвать немалые трудности из-за ограничений, накладываемых фреймворком
• обновление фреймворка может быть сопряжено со сложностями, а порой и вовсе невозможно
• основной код и концепции редко удовлетворяют разработчиков в своем первозданном виде. Они всегда найдут «лучший» способ сделать что-либо.

Инструменты

Инструмент — это вспомогательное средство разработки, но он не является неотъемлемой частью проекта. Инструменты включают в себя системы сборки, компиляторы, транспайлеры, механизмы развертывания и другое.

Инструменты призваны облегчать процесс разработки. Например, многие предпочитают Sass чистому CSS, потому что он предоставляет возможность использовать циклы, функции, локальные переменные и многое другое. Браузеры не понимают Sass/SCSS синтаксис, так что код переводится в CSS.

Не вешайте на меня ярлыки!

Грань между фреймворками, библиотеками и инструментами довольно смутная. Фреймворк может содержать в себе библиотеку. Библиотека может реализовывать фреймворко-подобные методы. Инструменты могут быть неотъемлемой частью обоих.

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

Проекты упорядочены по популярности.

jQuery

Самая популярная js-библиотека всех времен. Она произвела революцию в программировании клиентской части веб-приложений, введя селекторы CSS для доступа к узлам DOM-дерева, обработчики событий, анимации и ajax-запросы.

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

Плюсы:

• Малый размер дистрибутива
• низкий порог вхождения, исчерпывающая документация в интернете
• лаконичный синтаксис
• легко расширяемый

Минусы:

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

React

Самая горячо обсуждаемая библиотека прошедшего года. React претендует на роль библиотеки для создания пользовательских интерфейсов. Он фокусируется на «View»-части MVC-разработки и позволяет создавать компоненты интерфейса, сохраняющие свое состояние. Это была одна из первых библиотек, реализующих виртуальное DOM-дерево.

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

Плюсы:

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

Минусы:

• новые концепции и синтаксис, которые придется изучить
• необходимы системы сборки
• может требовать сторонних инструментов и библиотек
• может быть несовместим с кодом и другими библиотеками, модифицирующими DOM-дерево

Lodash и Uinderscore

Эти две библиотеки объединены по причине того, что обе они предоставляют сотни инструментов для расширения функциональности нативных строк, чисел, массивов и методов работы с другими примитивами. Они довольно сильно пересекаются, поэтому их не рекомендуется использовать вместе в одном проекте.

Плюсы:

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

Минусы:

• некоторые методы доступны в ES2015 И других более поздних версиях JavaScript

AngularJS

Первый фреймворк (или MVC фреймворк) в нашем списке. Наиболее популярной является версия 1.х, расширяющая HTML двусторонней привязкой данных одновременно с разделением манипуляций с DOM и логики приложения.

Angular 1.x до сих пор находится в разработке, несмотря на версию 2 (которая теперь версия 4!). Запутались? Читайте дальше…

Плюсы:

• популярный фреймворк, поддерживаемый несколькими крупными компаниями
• универсальное решение для создания современных веб-приложений
• часть «стандартного» стека MEAN (MongoDB, Express.JS, AngularJS, NodeJS), доступны множество статей и туториалов

Минусы:

• сложнее в освоении в сравнении с некоторыми альтернативами
• обширная база кода
• несовместимость с Angular 2.x
• несмотря на то, что является проектом Google, самим Google не используется

Angular 2

Angular 2.0 был представлен миру в сентябре 2016. Он был полностью переписан и представляет модульную модель компонентов, создаваемую на TypeScript. В марте 2017 состоялся релиз версии 4.0 (третья была пропущена во избежание нестыковок в семантическом версионировании).

Плюсы:

• универсальное решение для создания современных веб-приложений
• все еще часть стека MEAN
• TypeScript предоставляет некоторые преимущества для людей, знакомых с объектно-ориентированными языками вроде C# и Java

Минусы:

• см. минусы Angular 1.x

Vue.js

Легкий современный фреймворк для создания пользовательских интерфейсов. Предлагает React-подобный виртуальный слой ст поддержкой DOM, который может быть интегрирован с другими библиотеками.

Vue.js использует синтаксис шаблона HTML для связки DOM и данных. Модели являются простыми js-объектами, которые перестраивают интерфейс и/или контент при изменении данных.

Плюсы:

• зрительские симпатии и растущая популярность
• прост в освоении с нуля
• мало зависимостей и хорошая производительность

Минусы:

• молодой проект — высокие риски
• меньше ресурсов, чем у альтернатив

Backbone.js

Backbone.js был одним из первых клиентских фреймворков, реализующих модель MVC. Единственная зависимость — Underscore.js, созданный тем же разработчиком.

Скорее его можно отнести к библиотекам, потому что он может быть интегрирован в другие проекты. Хотя большинство разработчиков все же склонно называть Backbone.js фреймворком.

Плюсы:

• компактный, легкий и простой в изучении
• не добавляет дополнительной логики в HTML
• прекрасная документация
• использован в разработке многих приложений включая Trello, Wordpress, LinkedIn и Groupon

Минусы:

• низкий уровень абстракции по сравнению с альтернативами (например, AngularJS)
• требует дополнительных компонентов для реализации фич вроде связывания данных
• более современные фреймворки отказались от модели MVC

Ember.js

Один из крупнейших фреймворков, основанных на модели MVVM. Он реализует шаблонизацию, связывание данных и библиотеки.

Плюсы:

• единое решение для клиентских приложений
• позволяет разработчикам быть продуктивными (использует jQuery)
• хорошая обратная совместимость
• одобряется современными стандартами веб-разработки

Минусы:

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

Knockout.js

Старейший MVVM фреймворк, использующий обозреватели для отслеживания состояния интерфейса. Поддерживает шаблонизацию и отслеживание зависимостей.

Плюсы:

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

Минусы:

• вносит излишнюю сложность в большие проекты
• разработка замедлилась
• популярность сходит на нет

Примечание

Хотите больше?

• Polymer — библиотека, обеспечивающая кроссбраузерную поддержку компонентов HTML5
• Meteor — full-stack платформа для веб-приложений
• Aurelia — относительно молодой легковесный кроссплатформенный фреймворк
• Svelte — совсем новый проект, переводящий исходный код фреймворка в код JavaScript
• Conditioner.js — новая библиотека, которая автоматически подключает и отключает модули в зависимости от состояния.

Инструменты

Менеджеры задач общего назначения

• Gulp.js
• npm
• Grunt

Бандлеры

• Webpack
• Browserify
• RequireJS

Линтеры

• ESLint
• JSHint
• JSLint

Тестирование

• Mocha
• Jasmine
• Qunit

Другие статьи по теме

Какой JavaScript фреймворк следует учить в 2018 году

Скрытые фичи JavaScript