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

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

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

AngularJS

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

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

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

GitHub: https://github.com/angular/angular.js ^[5]
Офсайт: angularjs.org ^[2]

ReactJS

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

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 ^[9]
Офсайт: Facebook.github.io/react/ ^[6]

Backbone

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

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

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

GitHub: https://github.com/jashkenas/backbone/ ^[14]
Офсайт: backbonejs.org ^[10]

Ember

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

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

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

GitHub: https://github.com/emberjs/ember.js ^[17]
Офсайт: emberjs.com ^[15]

jQuery

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

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

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

GitHub: https://github.com/jquery/jquery ^[20]
Офсайт: jquery.com ^[21]

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 ^[22]
Офсайт: underscorejs.org ^[23]

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

GitHub: https://github.com/lodash/lodash ^[24]
Офсайт: lodash.com ^[25]

D3.js

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

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

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

GitHub: https://github.com/mbostock/d3 ^[26]
Офсайт: d3js.org ^[27]

Babylon.js

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

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

GitHub: https://github.com/BabylonJS/Babylon.js ^[28]
Офсайт: babylonjs.com ^[29]

Three.js

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

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

GitHub: https://github.com/mrdoob/three.js/ ^[31]
Офсайт: threejs.org ^[30]

Mocha и Chai

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

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

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

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

GitHub Mocha: https://github.com/mochajs/mocha ^[32]
Офсайт Mocha: mochajs.org ^[33]

GitHub Chai: https://github.com/chaijs/chai ^[34]
Офсайт Chai: chaijs.com ^[35]

Karma

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

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

• Browser Screenshots ^[36]
• Если вы работает под OS X и хотите протестировать Edge или IE, то можете воспользоваться этим инструментом ^[37].

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

GitHub: https://github.com/karma-runner/karma ^[38]
Офсайт: karma-runner.github.io ^[39]

PhantomJS

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

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

GitHub: https://github.com/ariya/phantomjs ^[40]
Офсайт: phantomjs.org ^[41]

Grunt и Gulp

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

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

GitHub Grunt: https://github.com/gruntjs/grunt ^[42]
Офсайт Grunt: gruntjs.com ^[43]

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

GitHub Gulp: github.com/gulpjs/gulp ^[44]
Офсайт Gulp: gulpjs.com ^[45]

Babel

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

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

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

GitHub: https://github.com/babel/babel ^[49]
Офсайт: babeljs.io ^[50]

Автор: NIX Solutions

Источник ^[51]