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

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

• 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.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!