Регулярно появляется какая-нибудь JS-библиотека, которую начинают шумно обсуждать на всевозможных форумах. Сначала постепенно нарастает энтузиазм, а затем сообщество быстро делится на противоборствующие лагери, по-разному относящиеся к новинке. Было бы просто невероятным подвигом рассмотреть все распространённые JS-фреймворки и библиотеки, поэтому хотим предложить вам список самых популярных и оказавших наибольшее влияние инструментов для фронтенд-разработки. А заодно дадим некоторые рекомендации по их использованию.

Но прежде чем перейти к делу, хотим уточнить:

  • Не нужно ломать копий, если в этот список не попали какие-то из ваших любимых фреймворков или библиотек.
  • Следите за обновлениями используемых вами инструментов. В последнее время начала активно внедряться кроссбраузерная и кроссаппаратная (cross-device) поддержка. Например, можно воспользоваться сканером, который подскажет, совместимы ли более старые версии с большинством устройств.


AngularJS


Это популярный фреймворк корпоративного уровня, используемый многими разработчиками для создания и обслуживания сложных веб-приложений. Пожалуй, правильнее будет охарактеризовать его как ОЧЕНЬ популярный. Angular используют такие компании, как Domino's Pizza, Ryanair, iTunes Connect, PayPal Checkout и Google. Это фреймворк с открытым исходным кодом, поддерживаемый Google. Angular позиционируется как «расширение HTML» для создания комплексных веб-приложений. Если вы знакомы с TypeScript, то вам может быть небезынтересно узнать, что Angular 2 написан именно на нём.

Angular — MVC-фреймворк. В нём реализован двусторонний дата-биндинг между моделями и представлениями (view). Такой подход позволяет автоматически обновляться с обеих сторон при любом изменении данных. В Angular можно создавать многократно используемые компоненты представлений (View Component). А благодаря имеющейся в нём структуре сервисов (service framework) можно легко построить взаимодействие между бэкендом и фронтендом. Ну и, наконец, Angular — это чистый JavaScript.

Рекомендации по использованию: если вы создаёте сложное фронтенд-приложение и вам нужен единый модульный фреймворк, позволяющий решать любые задачи.

GitHub: https://github.com/angular/angular.js
Офсайт: angularjs.org

ReactJS


Один из самых популярных JS-проектов прошлого года. Не говорил о нём, наверное, только очень ленивый. Почти на каждой конференции можно было послушать выступление, посвящённое React и прочим библиотекам этого семейства (Flux, Redux).

React — JS-библиотека для создания пользовательских интерфейсов. Это проект с открытым исходным кодом, по большей части разработан в Facebook, при участии ряда крупных компаний. С точки зрения MVC-модели React относится к V, практически игнорируя все остальные аспекты архитектуры приложения. Он реализует уровень компонентов (component layer), облегчающий создание и комбинирование UI-элементов. Отрисовка интерфейса оптимизируется благодаря абстрагированию DOM, что также позволяет отрисовывать React из Node.js. Кроме того, в React реализован односторонний реактивный поток данных, что делает инструмент куда более простым в понимании и освоении по сравнению с другими фреймворками.

Иногда React заменяет V в Ember и Angular.

Рекомендации по использованию: если вам нужен мощный фреймворк уровня представления (view layer), а остальные уровни приложения постольку поскольку. Либо можно использовать React как дополнение к Angular, Backbone или Ember. Наконец, React будет полезен при создании изоморфного веб-фреймворка.

GitHub: https://github.com/facebook/react
Офсайт: Facebook.github.io/react/

Backbone


Этот фреймворк известен своей простотой и умещается в один JS-файл. Автором Backbone является Джереми Ашкенас, создавший также CoffeScript и Underscore.js. Фреймворк особенно любят использовать команды разработчиков, создающие веб-приложения с простой структурой, которым не нужны монстры вроде Angular и Ember.

Backbone является полноценным MVC-фреймворком с маршрутизацией. С помощью моделей реализованы привязка key-value и события для обработки изменения данных. Модели и коллекции могут взаимодействовать с RESTful API. В представлениях используется декларативная обработка событий, а маршрутизатор управляет состоянием с помощью URL. Достаточно лишь создать одностраничное приложение без избыточного функционала и сложности.

Рекомендации по использованию: это отличный GOTO-фреймворк для создания простых веб-приложений.

GitHub: https://github.com/jashkenas/backbone/
Офсайт: backbonejs.org

Ember


В этом достаточно популярном фреймворке упор делается на повышение производительности программиста. Одним из ключевых разработчиков Ember является Йехуда Кац (Yehuda Katz), принимавший активнейшее участие в создании Ruby on Rails и jQuery. Ember позиционируется как «фреймворк для создания амбициозных веб-приложений», который не будет попусту тратить ваше время. Он ведёт себя очень своевольно и многие вещи решает самостоятельно, ставя разработчика перед фактом.

Ember тоже относится к MVC-фреймворкам. В нём используется шаблонизация и встроенный view engine, который автоматически обновляет данные так же, как и Angular, Backbone и React. Ember поддерживает технологию веб-компонентов, позволяющую расширять HTML с помощью собственных тэгов (как и Angular). Также во фреймворк встроен движок маршрутизации и модели, умеющие работать с вашим RESTful API.

Рекомендации по использованию: если вам нужен фреймворк, который просто работает. Также Ember будет полезен тем, кто не нуждается в гибкости из-за ограниченного бюджета или жёсткого дедлайна.

GitHub: https://github.com/emberjs/ember.js
Офсайт: emberjs.com

jQuery


Библиотека jQuery не нуждается в представлении. Только благодаря ей кроссбраузерные сайты стали реальностью, а веб обрёл современный вид. jQuery стала одной из причин, по которой большинство основных браузеров начали поддерживать веб-стандарты. Миссией jQuery Foundation является «улучшение открытого веба, чтобы он был доступен для всех, благодаря разработке и поддержке ПО с открытым кодом, а также сотрудничество с сообществом разработчиков».

jQuery — наиболее используемая JS-библиотека в мире, упрощающая работу с DOM, обработку событий, анимацию и использование AJAX.

Рекомендации по использованию: эту библиотеку можно использовать всегда. За исключением случаев, когда вы предпочтёте более компактную версию вроде Zepto.

GitHub: https://github.com/jquery/jquery
Офсайт: jquery.com

Underscore и lodash


Иногда стандартные возможности JavaScript не позволяют нам работать с полной отдачей. Всегда не хватает какой-нибудь вспомогательной функции, или функции, позволившей бы упростить код. Underscore и lodash — это JS-библиотеки, предлагающие свыше 100 вспомогательных функций и прочих «вкусностей» без необходимости делать monkey patching для встроенных JS-объектов. В частности, вам будут доступны такие вещи, как map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone и многое другое.

Рекомендации по использованию Underscore: если вам нужен один единственный JS-файл, который немедленно облегчит вашу жизнь как программиста.

GitHub: https://github.com/jashkenas/underscore
Офсайт: underscorejs.org

Рекомендации по использованию lodash: если вам нужна модульная и чуть более быстрая версия Underscore, с улучшенной поддержкой AMD и плагинов, созданных сообществом.

GitHub: https://github.com/lodash/lodash
Офсайт: lodash.com

D3.js


Одним из стандартных требований для веб-приложений является визуализация данных и построение графиков. И в этой сфере стандартом де-факто является D3.js. Это один из самых популярных проектов на Github, он используется во множестве компаний. D3 лежит в основе кучи библиотек для построения диаграмм, графиков и прочих видов визуализации.

D3 позволяет брать данные из любых источников и преобразовать в DOM/SVG/CSS. Проект поддерживает современные веб-стандарты, поэтому не беспокойтесь о возможности столкнуться с какими-то проприетарными форматами наподобие Flash или Silverlight.

Рекомендации по использованию: для визуализации любого вида.

GitHub: https://github.com/mbostock/d3
Офсайт: d3js.org

Babylon.js


Хотите сделать кроссбраузерную игру, целиком соответствующую современным веб-стандартам? Тогда присмотритесь к Babylon.js, трёхмерному движку на базе WebGL и JavaScript. Он позволяет создавать невероятные высококачественные игры с реалистичной физикой, звуком, системой частиц и прочими красотами.

Рекомендации по использованию: при создании любых игр и сложных 3D-сцен.

GitHub: https://github.com/BabylonJS/Babylon.js
Офсайт: babylonjs.com

Three.js


Это довольно компактная 3D-библиотека, позволяющая рендерить трёхмерные сцены на HTML5 холсте (canvas), SVG и WebGL без использования полноценных игровых движков. Three.js довольно проста в использовании, на офсайте можете посмотреть всевозможные способы её применения.

Рекомендации по использованию: если вам нужна простая 3D-визуализация, которую можно вывести на холст.

GitHub: https://github.com/mrdoob/three.js/
Офсайт: threejs.org

Mocha и Chai


Долгое время тестирование JavaScript-кода было невероятно раздражающим занятием. Хотя то же самое можно сказать и про тестирование кода на любом другом языке. Но тестированием должен периодически заниматься каждый разработчик, хотя многие из нас недолюбливают это занятие и избегают его. Однако две библиотеки с поэтическими названиями Mocha и Chai могут помочь вам в преодолении неприязни к процессу тестирования.

Mocha — это JS-фреймворк, облегчающий тестирование асинхронного кода в node модуле или браузерном приложении. Тесты в Mocha имеют улучшенное качество трассировки исключений и могут прогоняться сериями.

Chai — TDD/BDD assertion библиотека, которая может использоваться совместно с Mocha и позволяет выражать тесты в простой читаемой форме.

Рекомендации по использованию: всегда! Тестируйте свой код и делайте мир немного лучше.

GitHub Mocha: https://github.com/mochajs/mocha
Офсайт Mocha: mochajs.org

GitHub Chai: https://github.com/chaijs/chai
Офсайт Chai: chaijs.com

Karma


Раз уж в списке появились Mocha и Chai, то нужно включить сюда и прогонщика тестов, позволяющего проводить непрерывное интеграционное тестирование. Karma поможет вам автоматизировать работу тестов Mocha и Chai в разных браузерах.

Поскольку не все браузеры могут работать на любых платформах, то обратите внимание на пару бесплатных инструментов, которые облегчат вам процесс тестирования:


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

GitHub: https://github.com/karma-runner/karma
Офсайт: karma-runner.github.io

PhantomJS


Было бы не слишком экономно запускать браузеры целиком во время прогона тестов, это приводит к излишнему расходу памяти и ресурсов процессора. PhantomJS позволяет запустить headless версию WebKit, движка, используемого в Safari, а ранее ещё и в Chrome (сегодня в нём используется Blink). Так что прямо из JavaScript API вы сможете прогнать тесты, наделать скриншотов, помониторить сеть и автоматизировать просмотр страниц.

Рекомендации по использованию: если вам нужно прогнать обширное количество тестов, операций со страницами и промониторить сетевые запросы.

GitHub: https://github.com/ariya/phantomjs
Офсайт: phantomjs.org

Grunt и Gulp


В ходе подготовки выкатывания сайтов в продакшен нам обычно приходится выполнять такие задачи, как улучшение производительности с помощью минификации JavaScript и CSS, компиляцию CoffeeScript/TypeScript, модульное тестирование и т.д. Наверняка у вас уже есть под рукой пакет инструментов, которые готовят сайт к развёртыванию в продакшен. Но если нет, то можно порекомендовать Grunt или Gulp в качестве исполнителя задач (task runner). Для обоих написано несметное количество плагинов, позволяющих сделать с сайтом что угодно в процессе подготовки к развёртыванию.

Рекомендации по использованию Grunt: если вы предпочитаете писать конфигурационные файлы и вас не волнует, что исполнитель задач может генерировать промежуточные файлы.

GitHub Grunt: https://github.com/gruntjs/grunt
Офсайт Grunt: gruntjs.com

Рекомендации по использованию Gulp: если вы предпочитаете писать код вместо конфигурирования, и были бы не против использовать Node.js-потоки для увеличения производительности.

GitHub Gulp: github.com/gulpjs/gulp
Офсайт Gulp: gulpjs.com

Babel


JavaScript как язык быстро развивается. Например, прошлым летом был выпущен ECMAScript 2015, а многие из его основных возможностей уже реализованы в ряде браузеров. Если вас интересует вопрос совместимости с ECMAScript 2015, то можете изучить таблицу от kangax. Обратите внимание, что последние версии Edge, Chrome и Firefox почти полностью совместимы.

Но мы не живём в идеальном мире. Разработчикам приходится поддерживать старые версии браузеров, не поддерживающих самые современные и лучшие возможности JavaScript. А нам хотелось бы улучшить веб и наши кодовые базы. Это можно сделать с помощью Babel, JS-компилятора, преобразующего последние возможности SS-стандарта в ES5. Это поможет вам запускаться даже на очень старых браузерах наподобие IE 9. Для Babel написано несколько плагинов, облегчающих разработку с React, а также использование возможностей, не описанных спецификацией (например, ES7).

Рекомендации по использованию: если вы хотите использовать самые современные возможности JavaScript, но при этом необходимо сохранить поддержку старых браузеров.

GitHub: https://github.com/babel/babel
Офсайт: babeljs.io

Автор текста: Rami Sayar
Top JavaScript Frameworks, Libraries and Tools and When to Use Them

Комментарии (12)


  1. kroshanin
    29.02.2016 12:01
    +7

    Раз есть PhantomJs, то стоит добавить и его аналог SlimerJS.
    Разница между ними в том, что PhantomJs использует движок WebKit (Google Chrome), а SlimerJs использует движок Gecko (Mozilla Firefox). Последний в бОльшей степени поддерживает стандарты ECMAScript.


  1. gearbox
    29.02.2016 14:16

    webpack и branch?
    чай без should?
    continuous integration? Без CI нынче в приличном обществе не принято появляться.


  1. beduin01
    29.02.2016 14:27
    +3

    А где? http://vuejs.org/ Это же один из лучших фреймворков.


  1. markoffko
    29.02.2016 16:25
    +4

    Привет, нам не о чем написать?


  1. DeLaVega
    29.02.2016 18:15
    +7

    Не хватает подписи — «Ваш Кэп.»

    И заголовок — «Лучшие инструменты для JavaScript-разработчика» как то не соответствует содержанию. Вы просто перечислили MVC и либы последних годов, не более…


  1. nmakarov
    29.02.2016 19:48

    Добавлю shipit,js — довольно-таки простой тул для деплоя приложения куда угодно. cd project/; git checkout somebranch; shipit staging deploy и всё.

    Ещё bookshelf/knex — либы для датабаз и ORM (вполне ничего себе такой). Построен сверху backbone и гармонично вписывается в архитектуру (фактически, те же модели и коллекции).

    Всякие Grunt и Gulp уже давно не юзаю, не модно. Вся автоматизация определена в package.js и вызывается, к примеру, так: npm run watch-js или npm run mtest.

    Ну и React, да. Вместе с Babel, конечно же. И browserfy (webpack уж слишком громоздкий).


  1. alexeibs
    29.02.2016 21:56
    +1

    Mocha есть, а где Jasmine?


    1. aen
      29.02.2016 22:31

      Тогда стоит и про tape.js вспомнить.


  1. Strate
    29.02.2016 22:41

    Вместо перегруженных и неудобных expect и should рекомендую power-assert


  1. Xergin
    01.03.2016 01:59

    Сам по себе backbonejs практически не развивается. Я бы добавил в связку к нему хотя бы marionettejs в качестве примера.


  1. mittus
    04.03.2016 09:02

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


  1. nightstalker
    05.03.2016 14:47
    +1

    Пожалуй, правильнее будет охарактеризовать его как ОЧЕНЬ популярный. Angular используют такие компании, как Domino's Pizza, Ryanair, iTunes Connect, PayPal Checkout и Google.

    У реакта "послужной список" посерьезнее будет: facebook, instagram, airbnb, bbc, dropbox, lyft, uber и прочие.