Від автора: AngularJS – JS фреймворк з відкритим вихідним кодом, розроблений і підтримуваний google. Інструмент дає все необхідне для створення і управління динамічними front end сторінками для веб-додатки. Модульний підхід до веб-дизайну та підтримує величезне співтовариство роблять AngularJS популярним серед професійних розробників. На ділі, на AngularJS працюють деякі з найбільш навантажених сайтів в мережі, в тому числі google і Virgin America. Це керівництво служить як Angular введення і містить поради з підвищення продуктивності AngularJS.
Що таке AngularJS?
AngularJS створений для спрощення складних процесів створення і управління JS додатками. В основі лежить структура MVC, що робить фреймворк особливо корисним для створення односторінкових сайтів. Бібліотека заснована на звичайному JS і HTML, тому AngularJS автоматично піклується про маніпуляції з DOM і AJAX запитах, які в іншому випадку розробникам довелося б писати самим. Інструмент надає модульні будівельні блоки коду JS, які можна поєднувати і тестувати. AngularJS можна легко додати будь-яку HTML сторінку з допомогою простого тега.
Плюси і мінуси AngularJS
Що виділяє AngularJS серед конкурентів:
Спрощена двостороння прив’язка даних. AngularJS дозволяє прив’язувати дані до HTML за допомогою виразів, а директиви AngularJS дозволяють розробникам розширювати функціонал HTML і створювати нові конструкції. Маніпуляції з DOM і код прив’язки даних обгорнуті в прості елементи, які можна швидко і просто вставити HTML-шаблони.
AngularJS спроектований універсальним фреймворком, тому з його допомогою можна створити веб-додаток для майже будь-якого типу. Якщо ви створюєте одностраничное веб-додаток, кращого способу не знайти.
AngularJS входить в пакет З MEAN, який також включає MongoDB, Express.js і Node.js. Тому він дозволяє управляти front end і back end проекту з допомогою JS. В якості альтернативи можна використовувати для back end Ruby on Rails. З AngularJS також добре стикується ASP.NET і C#.
AngularJS побудований по техніці functionality-first, тому фреймворк найбільше підходить для розробки зверху вниз. Модульна концепція AngularJS дозволяє спростити поділ роботи на різні команди у великих проектах. У пріоритеті мінімальна кількість коду, тому додатка AngularJS, як правило, компактні і легкі в редагуванні.
Тим не менш, є моменти, які необхідно знати при виборі AngularJS для свого проекту.
Перше і найголовніше, AngularJS дуже «впертий» і нав’язує свою структуру розробникам. Для новачків і навіть профі розробників це хороша новина. AngularJS спроектовано максимально user friendly, тому його інструменти інтуїтивно зрозумілі. Однак розробникам, божевільним на гнучкості, доведеться шукати обхідні шляхи.
Для деяких проектів AngularJS надто лишній. В таких випадках більше підійдуть більш легкі фреймворки типу Backbone.js для статичних сайтів. AngularJS також не пристосований обробляти маніпуляції з DOM з великою кількістю даних, так як годиться на «брудні перевірки» для управління змінами DOM (будь-яка зміна змінних тягне оновлення DOM). Для більшості сайтів це не буде проблемою, але GUI редактори і відео гри можуть лагают.
AngularJS також не підтримує високонавантажених галереї фото, тому instagram написаний на іншому фреймворку. Подібні проблеми з продуктивністю можна нівелювати через форми з високим рівнем інтерфейсу взаємодії. Принаймні, Gmail написаний на них.
Поради щодо оптимізації AngularJS
У AngularJS безліч вбудованих інструментів оптимізації, але це не позбавляє фреймворк від скарг на продуктивність. Якщо у вас немає масивної інфраструктури, як у google, вам, швидше за все, доведеться використовувати кращі практики для підвищення продуктивності додатків на AngularJS.
Неважливо, чи знаєте ви, що вам необхідний приріст продуктивності, або ви просто хочете знати, що можна поліпшити, ось кілька порад щодо прискорення додатків на AngularJS:
1. Слідкуйте за дайджест циклом
Дайджест цикл програми AngularJS – хороший індикатор його продуктивності. Уявіть дайджест цикл, як цикл, який перевіряє наявність змін у змінних. Чим коротше дайджест цикл, тим швидше додаток працює.
2. Скоротіть кількість відстежень
Кожен раз при введенні прив’язки даних, ви створюєте все більше змінних $$watchers і $scopes, що подовжує дайджест цикл. Занадто багато $$watchers можуть викликати лаги. Тому використовуйте їх по мінімуму.
3. По можливості використовуйте одноразові прив’язки
Якщо ви працюєте зі старою версією AngularJS, ви можете скористатися перевагою одноразової прив’язки. Для цього просто додайте двокрапку перед значенням. При правильному використанні значення буде дозволено один раз, після чого воно зникне зі списку відстеження. Важливо відзначити, що функція одноразової прив’язки, представлена в AngularJS 1.3, недоступна в AngularJS 4.0.
4. Використовуйте scope.$evalAsync
Якщо вручну намагатися активувати дайджест цикл, коли він вже запущений, можна отримати помилку. Щоб цього не було, використовуйте scope.$evalAsync замість $apply, коли необхідно ініціалізувати дайджест цикл. Операції стануть в чергу на виконання в кінець циклу без створення нового циклу.
5. Використовуйте панель розробника Chrome CPU Profiler і Timeline
З допомогою Profiler і Timeline можна знайти вузькі місця у продуктивності, щоб локалізувати зусилля по оптимізації. Читайте наше повне керівництво на Chrome DevTools.
6. Обмежте доступ до DOM
Доступ до DOM можна дорого обходитися, тому зберігайте маленький розмір дерев DOM. Не змінюйте DOM без реальної на те необхідності і не встановлюйте инлайновые стилі. Це запускає рефлоу JS.
7. Видаліть CSS класи і директиви коментарів
При створенні директиви її можна призначити на елемент, атрибут, CSS клас і коментар. Якщо вам не потрібен CSS клас і директиви коментарів, видаліть їх для підвищення продуктивності.
8. Вимкніть дані про налагодження
Інструменти Batarang і Protractor покладаються на дані про прив’язку і областях видимості, які AngularJS прикріплює до DOM елементів. Тому після закінчення налагодження вимкніть додаткові дані, щоб вони не тягнули додаток.
9. Використовуйте Lodash
Lodash дозволяє швидко переписувати логіку програми для поліпшення вбудованих методів AngularJS і підвищення продуктивності. Якщо ваш додаток не використовує Lodash, методи можна переписати вручну на чистому JS.
10. Використовуйте ng-if або ng-switch замість ng-show
Директива ng-show просто вмикає або вимикає CSS display для заданого елемента. Для видалення елемента з DOM необхідно використовувати ng-if або ng-switch.
11. По можливості уникайте ng-repeat
Зловживання ng-repeat може значно знизити продуктивність програми. На щастя, є альтернативи. Наприклад, замість використання ng-repeat для фонового глобальної навігації можна самому з допомогою провайдера $interpolate рендери шаблон на об’єкт перед його конвертацією в вузол DOM.
12. Використовуйте $watchCollection
Коли використовуєте $watch – 2 параметра добре, 3 вже багато. Третій параметр змушує AngularJS запускати глибоку перевірку, що з’їдає багато ресурсів. Розробники придумали обхідний шлях $watchCollection. Він веде себе як третій параметр $watch і перевіряє лише перший шар всіх властивостей об’єкта. Тому він не уповільнює проект.
13. Використовуйте $cacheFactory
Якщо вам необхідний зберігати дані, які потім необхідно перераховувати, використовуйте директиву $cacheFactory. Вона працює подібно будь-якому іншому методу запам’ятовування.
14. Використовуйте console.time
Якщо у вас проблеми з налагодженням, console.time (Chrome DevTools) – відмінний інструмент вимірювання часу виконання і продуктивності.
15. Сповільніть оновлення ng-model
Уповільнення оновлення полів вводу з допомогою директиви ng-model може зменшити дайджест цикл. Наприклад, ng-model-options=”{debounce:200}” запускає дайджест цикл не частіше разу в 200ms.
16. Використовуйте $filter
AngularJS запускає фільтри DOM двічі в кожному дайджест циклі: спершу для виявлення змін, потім для відновлення змінених значень. Провайдер $filter дозволяє попередньо обробляти дані перед відправкою їх подання, тим самим пропускається парсинг DOM, що економить час.
17. Жорстко слідкуйте за областями видимості
Не давайте змінним занадто велику область видимості, щоб збирач сміття JS можу вивільнити трохи пам’яті.
18. Посторінкова навігація або нескінченний скрол
Якщо нічого не допомогло, можна зменшити кількість зацикливаемых елементів з допомогою посторінкової навігації або нескінченного скрола. У AngularJS для цього навіть є директива ngInfiniteScroll.
Краще використовувати кращі практики з самого початку, а не повертатися і все переробляти. Перед тим як сісти кодити, добре подумайте, як можна обмежити прив’язки, спостерігачі та витратні директиви типу ng-repeat. Рішення проблем і допомога шукайте в офіційній документації AngularJS.
Продуктивність AngularJS та інструменти тестування
У мережі можна знайти безліч інструментів для поліпшення і тестування продуктивності додатків на AngularJS. Парочка кращих:
1. Protractor
Protractor створила команда Angular. Це дозволяє запускати автоматизовані комплексні тести. Protractor побудований поверх webDriverJS і Selenium, тому він може похвалитися всіма їхніми функціями. В тому числі і Selenium grid – функція запуску тестів в декількох браузерах. Тест сьюти можна написати на Jasmine або Mocha.
2. WebDriverIO
WebDriverIO – реалізація W3C webDriver API, але більш гнучка, ніж WebDriverJS. Його командний рядок, дозволяє налаштовувати тести навіть людям, не знайомим з програмуванням. WebDriverIO відмінно підтримується і має активне співтовариство розробників.
3. NightwatchJS
NightwatchJS – кастомний реалізація W3C webdriver API. Інструмент простий у розширенні і кастомізації. У комплекті йде власний фреймворк для тестування і механізми перевірок. Підтримка гірше ніж у WebDriverIO і Protractor.
4. TestingWhiz
Команди Dynamic дозволяють TestingWhiz синхронізуватися з різним серверним часом очікування для точного комплексного тестування додатків Angular. У TestingWhiz не потрібно писати код, що робить інструмент дуже популярним серед програмістів.
5. Batarang
Batarang – розширення Chrome від команди Angular для спрощення процесу налагодження. У ньому є пара корисних функцій, але в основному використовується для відстеження тестів продуктивності.
Підвищення продуктивності AngularJS – постійний процес
У кінці також пораджу використовувати CDN для прискорення файлів AngularJS. Завдяки розумному кешуванню, це оптимізує час завантаження для відвідувачів по всій земній кулі. Якщо у вас немає CDN, на яку можна перекинути файли AngularJS, ось вам Angular CDN і використовуйте наші open source посилання для прискорення доставки.
Зараз є безліч JS-фреймворків, однак AngularJS залишається улюбленим для багатьох. Тому найближчим часом він нікуди не піде. Щоб по максимуму вичавлювати з свого додатку, оптимізацію AngularJS необхідно зробити звичкою. Добре налаштована продуктивність програми дозволить виводити більше контенту з меншою кількістю коду, що вивільняє ресурси, які можна витратити в іншому місці.
