KEMBAR78
Павло Юрійчук — Перехід на Angular.js. Howto | PDF
Перехід на
Angular.JS
Howto
Про себе
Розробляв підтримував і розвивав:
● HTML5 Games
● Mobile Web applications
● Desktop web applications
Skype: pavlo.yuriychuck
Twitter: pavlo_yuriychuck
Angular.js з точки зору менеджера
● Один постачальник - Google
● Покриває широкий спектр задач
● Спільнота:
○ StackOverflow
○ Google Groups
○ Github issues
● Документація:
○ Книги, туторіали, статті, блоги, відео
● Реклама
● Репутація: Google Closure && GWT
Angular.js з точки зору програміста
● Двостороннє зв’язування даних та
представлення
● Модульність
● Багата функціональність “з коробки”
● Інфраструктура веб-додатку
● Документація
● Щось дуже нагадує Adobe Flex ;)
Аналіз: за
● Те чого завжди не вистачало у інших
фреймворках: broadcasting, services
● Багато засобів для реалізації
предметної області
● Співмірні з jQuery stack можливості
щодо Ajax. Більш строга модель
Deferred
● Dependency injection
Аналіз: проти
● Важка та відносно монолітна. Модульність тільки
з версії 1.2
● Складність вивчення
● Документація - більшість правди ви знайдете в
коментарях до статей ніж у самих статтях ;(
● Пошук помилок та відлагодження займають
багато часу. Малоінформативні повідомлення про
помилки.
● Знову відвикати від Require.js ;(
● Непередбачувані помилки та підводні камені
Насправді ;)
Ієрархія проблем
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
Екосистема
● Yeoman - генератор коду та скелету
програми
● Grunt.js - багатоцілева система збірки
● Bower - пакетний менеджер
● Node.js - серидовище виконання
○ npm - менеджер пакетів для Node
○ nvm - менеджер версій для Node
Екосистема - продовження
● Testing
○ Karma - серидовище для запуску тестів
○ Jasmine - фреймворк для тестування по
замовчуванню
○ Mocha - набагато потужніший фреймворк
○ Chai - бібліотека допущень (Asserts)
○ Sinon.js - бібліотека для заглушок (Mocks,
Stubs)
○ Angular UT && Angular e2e testing
Екосистема
● Docular - генерація документації
● Користувацький інтерфейс:
○ Angular UI
○ Angular Bootstrap
○ LESS || SASS

● i18n:
○ Dynamic locales
○ Angular-translate
○ Angular i18n || Angular i18n build
Причини для переходу
1. Багато взаємодій з сервером
2. Складний користувацький інтерфейс
3. Багато компонентів та взаємозв’язків
між ними
4. Складна предметна область
5. Необхідно мати хорошу основу для
майбутніх веб-додатків
Причини для непереходу
● Швидке прототипування
● Розробка ігор
● Розробка веб додатків які потребують
оптимізацій щодо швидкості (WebGL,
Realtime rendering, VNC)
● Залежність логіки від Require.js або
YepNope
● Коли “легковісність” критична
Код:
●
●
●
●
●
●

Application skeleton
Unit tests - тестування провайдера
Gruntfile - скрипти автоматизації
Bower config - налаштування пакетів
npm config - налаштування пакетів
Karma config - налаштування тестів
Предметна область
● Директиви - окремі елементи UI, робота з DOM
● Фільтри - довільні перетворювачі даних
● Провайдери - фабрика яку можна налаштувати
до використання
● Сервіси - бізнес логіка
● Фабрики - універсальне джерело даних,
пристосоване для спільного використання в інших
сервісах
● Декоратори - модифікація поведінки існуючих
сервісів чи фабрик
Поради
● Варто одразу писати код minsafe, щоб не було
проблем з мініфікацією коду
● Directives для роботи з DOM, Великі шматки
розмітки у partials/views
● Не виконуйте важких операцій при роботі з
даними які прив’язані до view.
● Якщо у вас одні і ті ж дані представляються у
різних частинах view - зробіть їх копію за
допомогою фільтрів
Поради
● $apply() не панацея, її варто використовувати
лише в директивах та тестах
● Забудьте про $.ajax - є $http
● Забудьте про $.Deferred - є $q
● Якщо в контролері з’являються filterByXXX,
groupByYYY, sortByZZZ - виносьте їх одразу у
фільтри
● ng-repeat та ng-include створюють власну область
видимості $scope
Ознаки того, що ви на правильному шляху

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

Навчальний курс
Youtube канал
Angular.js recipies - сама корисна книга ;)
Angular services - що і для чого в Angular
Angular scopes - області видимості
Організація коду
Порівняння фреймворків
Майбутнє Angular.JS
Humor
// Insanity Warning: scope depth-first traversal
// yes, this code is a bit crazy, but it works and we have tests to prove it!

Павло Юрійчук — Перехід на Angular.js. Howto

  • 1.
  • 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.jsrecipies - сама корисна книга ;) Angular services - що і для чого в Angular Angular scopes - області видимості Організація коду Порівняння фреймворків Майбутнє Angular.JS
  • 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!