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

Howto

Розробляв підтримував і розвивав:● HTML5 Games● Mobile Web applications● Desktop web applicationsSkype: pavlo.yuriychuckTwitter: pavlo_yuriychuck

Про себе

● Один постачальник - Google● Покриває широкий спектр задач● Спільнота:

○ StackOverflow○ Google Groups○ Github issues

● Документація:○ Книги, туторіали, статті, блоги, відео

● Реклама● Репутація: Google Closure && GWT

Angular.js з точки зору менеджера

● Двостороннє зв’язування даних та представлення

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

Angular.js з точки зору програміста

● Те чого завжди не вистачало у інших фреймворках: 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, Thoraxb. Realtime - Meteor, Derbyc. 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

Перехід

// Insanity Warning: scope depth-first traversal

// yes, this code is a bit crazy, but it works and we have tests to prove it!

Humor