Лучшие JavaScript фреймворки, библиотеки и инструменты в 2017
Свежая подборка самых популярных и наиболее востребованных 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 — новая библиотека, которая автоматически подключает и отключает модули в зависимости от состояния.