Кращі інструменти для JavaScript-розробника



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

Але перш ніж перейти до справи, хочемо уточнити:

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

AngularJS
Це популярний фреймворк корпоративного рівня, використовуваний багатьма розробниками для створення та обслуговування складних веб-додатків. Мабуть, правильніше буде охарактеризувати його як ДУЖЕ популярний. Angular використовують такі компанії, як domino's Pizza, Ryanair, iTunes Connect, PayPal і Google Checkout. Це фреймворк з відкритим вихідним кодом, підтримуваний 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

Джерело: Хабрахабр

0 коментарів

Тільки зареєстровані та авторизовані користувачі можуть залишати коментарі.