Presentation about switching to Angular.JS that was performed on GlobalLogic tech talk

1. Перехід на
Angular.JS
Howto

2. Про себе
Розробляв підтримував і розвивав:
● HTML5 Games
● Mobile Web applications
● Desktop web applications
Skype: pavlo.yuriychuck
Twitter: pavlo_yuriychuck

3. Angular.js з точки зору менеджера
● Один постачальник - Google
● Покриває широкий спектр задач
● Спільнота:
○ StackOverflow
○ Google Groups
○ Github issues
● Документація:
○ Книги, туторіали, статті, блоги, відео
● Реклама
● Репутація: Google Closure && GWT

4. Angular.js з точки зору програміста
● Двостороннє зв’язування даних та
представлення
● Модульність
● Багата функціональність “з коробки”
● Інфраструктура веб-додатку
● Документація
● Щось дуже нагадує Adobe Flex ;)

5. Аналіз: за
● Те чого завжди не вистачало у інших
фреймворках: broadcasting, services
● Багато засобів для реалізації
предметної області
● Співмірні з jQuery stack можливості
щодо Ajax. Більш строга модель
Deferred
● Dependency injection

6. Аналіз: проти
● Важка та відносно монолітна. Модульність тільки
з версії 1.2
● Складність вивчення
● Документація - більшість правди ви знайдете в
коментарях до статей ніж у самих статтях ;(
● Пошук помилок та відлагодження займають
багато часу. Малоінформативні повідомлення про
помилки.
● Знову відвикати від Require.js ;(
● Непередбачувані помилки та підводні камені

7. Насправді ;)

8. Ієрархія проблем
1. Крос-браузерність - jQuery, Underscore, Twitter
bootstrap
2. Додатки
a. MV* - Backbone, Exos.JS, Knockout, Ember, Ext.
JS, Chaplin, Marionette, Can.JS, Thorax
b. Realtime - Meteor, Derby
c. Functional - Bacon.JS
3. Модульність - Require.JS || LMD, Bower,
Component.JS
4. Інфраструктура - Angular.JS, Closure, DojoToolkit

9. Екосистема
● Yeoman - генератор коду та скелету
програми
● Grunt.js - багатоцілева система збірки
● Bower - пакетний менеджер
● Node.js - серидовище виконання
○ npm - менеджер пакетів для Node
○ nvm - менеджер версій для Node

10. Екосистема - продовження
● Testing
○ Karma - серидовище для запуску тестів
○ Jasmine - фреймворк для тестування по
замовчуванню
○ Mocha - набагато потужніший фреймворк
○ Chai - бібліотека допущень (Asserts)
○ Sinon.js - бібліотека для заглушок (Mocks,
Stubs)
○ Angular UT && Angular e2e testing

11. Екосистема
● Docular - генерація документації
● Користувацький інтерфейс:
○ Angular UI
○ Angular Bootstrap
○ LESS || SASS
● i18n:
○ Dynamic locales
○ Angular-translate
○ Angular i18n || Angular i18n build

12. Причини для переходу
1. Багато взаємодій з сервером
2. Складний користувацький інтерфейс
3. Багато компонентів та взаємозв’язків
між ними
4. Складна предметна область
5. Необхідно мати хорошу основу для
майбутніх веб-додатків

13. Причини для непереходу
● Швидке прототипування
● Розробка ігор
● Розробка веб додатків які потребують
оптимізацій щодо швидкості (WebGL,
Realtime rendering, VNC)
● Залежність логіки від Require.js або
YepNope
● Коли “легковісність” критична

14. Код:
●
●
●
●
●
●
Application skeleton
Unit tests - тестування провайдера
Gruntfile - скрипти автоматизації
Bower config - налаштування пакетів
npm config - налаштування пакетів
Karma config - налаштування тестів

15. Предметна область
● Директиви - окремі елементи UI, робота з DOM
● Фільтри - довільні перетворювачі даних
● Провайдери - фабрика яку можна налаштувати
до використання
● Сервіси - бізнес логіка
● Фабрики - універсальне джерело даних,
пристосоване для спільного використання в інших
сервісах
● Декоратори - модифікація поведінки існуючих
сервісів чи фабрик

16. Поради
● Варто одразу писати код minsafe, щоб не було
проблем з мініфікацією коду
● Directives для роботи з DOM, Великі шматки
розмітки у partials/views
● Не виконуйте важких операцій при роботі з
даними які прив’язані до view.
● Якщо у вас одні і ті ж дані представляються у
різних частинах view - зробіть їх копію за
допомогою фільтрів

17. Поради
● $apply() не панацея, її варто використовувати
лише в директивах та тестах
● Забудьте про $.ajax - є $http
● Забудьте про $.Deferred - є $q
● Якщо в контролері з’являються filterByXXX,
groupByYYY, sortByZZZ - виносьте їх одразу у
фільтри
● ng-repeat та ng-include створюють власну область
видимості $scope

18. Ознаки того, що ви на правильному шляху
● Бізнес логіка не сконцентрована в
контролерах
● Ви не використовуєте плагіни jQuery
для всього підряд і вам достатньо jqLite
● Ви можете оцінювати час на розробку
та тестування
● Ви пишете код в термінах предметної
області

19. Перехід
● Навчальний курс
● Youtube канал
● Angular.js recipies - сама корисна книга
;)
● Angular services - що і для чого в
Angular
● Angular scopes - області видимості
● Організація коду

20. Humor
// Insanity Warning: scope depth-first traversal
// yes, this code is a bit crazy, but it works and we have tests to prove it!