Лучшие 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

jquery

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

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

Плюсы:

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

Минусы:

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

React

react

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

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

Плюсы:

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

Минусы:

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

Lodash и Uinderscore

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

Плюсы:

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

Минусы:

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

AngularJS

angularjs

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

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

Плюсы:

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

Минусы:

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

Angular 2

angular2

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

Плюсы:

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

Минусы:

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

Vue.js

vuejs

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

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

Плюсы:

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

Минусы:

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

Backbone.js

Backbone.js

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

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

Плюсы:

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

Минусы:

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

Ember.js

Ember.js

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

Плюсы:

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

Минусы:

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

Knockout.js

Knockout.js

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

Плюсы:

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

Минусы:

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

Примечание

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

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

Инструменты

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

Бандлеры

Линтеры

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

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

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

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

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Искать мидлов или растить джунов?
26 февраля Онлайн Бесплатно
Panda Meetup #39 Frontend
29 февраля Казань Бесплатно
.NET Z-meet up
27 февраля Санкт-Петербург Бесплатно

Комментарии 0

ВАКАНСИИ

Unity 3D Developer
по итогам собеседования
Аналитик DWH
Москва, по итогам собеседования
Frontend разработчик (React)
от 100000 RUB до 160000 RUB
Android разработчик
от 140000 RUB до 200000 RUB

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

BUG