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

Инструменты

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

Бандлеры

Линтеры

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

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

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

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

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

admin
10 июня 2018

Лайфхак: в какой последовательности изучать JavaScript

Огромный инструментарий JS и тонны материалов по нему. С чего начать? Расск...