Регулярно появляется какая-нибудь 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 в разных браузерах.
Поскольку не все браузеры могут работать на любых платформах, то обратите внимание на пару бесплатных инструментов, которые облегчат вам процесс тестирования:
- Browser Screenshots
- Если вы работает под OS X и хотите протестировать Edge или IE, то можете воспользоваться этим инструментом.
Рекомендации по использованию: для всестороннего тестирования ваших приложений, а также если вы хотите удостовериться, что тесты будут пройдены на всех браузерах.
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
Автор: NIX Solutions
