Перехід на
Angular.JS
Howto
Про себе
Розробляв підтримував і розвивав:
● HTML5 Games
● Mobile Web applications
● Desktop web applications
Skype: pavlo...
Angular.js з точки зору менеджера
● Один постачальник - Google
● Покриває широкий спектр задач
● Спільнота:
○ StackOverflo...
Angular.js з точки зору програміста
● Двостороннє зв’язування даних та
представлення
● Модульність
● Багата функціональніс...
Аналіз: за
● Те чого завжди не вистачало у інших
фреймворках: broadcasting, services
● Багато засобів для реалізації
предм...
Аналіз: проти
● Важка та відносно монолітна. Модульність тільки
з версії 1.2
● Складність вивчення
● Документація - більші...
Насправді ;)
Ієрархія проблем
1. Крос-браузерність - jQuery, Underscore, Twitter
bootstrap
2. Додатки
a. MV* - Backbone, Exos.JS, Knock...
Екосистема
● Yeoman - генератор коду та скелету
програми
● Grunt.js - багатоцілева система збірки
● Bower - пакетний менед...
Екосистема - продовження
● Testing
○ Karma - серидовище для запуску тестів
○ Jasmine - фреймворк для тестування по
замовчу...
Екосистема
● Docular - генерація документації
● Користувацький інтерфейс:
○ Angular UI
○ Angular Bootstrap
○ LESS || SASS
...
Причини для переходу
1. Багато взаємодій з сервером
2. Складний користувацький інтерфейс
3. Багато компонентів та взаємозв...
Причини для непереходу
● Швидке прототипування
● Розробка ігор
● Розробка веб додатків які потребують
оптимізацій щодо шви...
Код:
●
●
●
●
●
●

Application skeleton
Unit tests - тестування провайдера
Gruntfile - скрипти автоматизації
Bower config -...
Предметна область
● Директиви - окремі елементи UI, робота з DOM
● Фільтри - довільні перетворювачі даних
● Провайдери - ф...
Поради
● Варто одразу писати код minsafe, щоб не було
проблем з мініфікацією коду
● Directives для роботи з DOM, Великі шм...
Поради
● $apply() не панацея, її варто використовувати
лише в директивах та тестах
● Забудьте про $.ajax - є $http
● Забуд...
Ознаки того, що ви на правильному шляху

● Бізнес логіка не сконцентрована в
контролерах
● Ви не використовуєте плагіни jQ...
Перехід
● Навчальний курс
● Youtube канал
● Angular.js recipies - сама корисна книга
;)
● Angular services - що і для чого...
Humor
// Insanity Warning: scope depth-first traversal
// yes, this code is a bit crazy, but it works and we have tests to...
Upcoming SlideShare
Loading in …5
×

Global logic tech talk switching to Angular.js

527 views

Published on

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

Published in: Education
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
527
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
3
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

Global logic tech talk switching to Angular.js

  1. 1. Перехід на Angular.JS Howto
  2. 2. Про себе Розробляв підтримував і розвивав: ● HTML5 Games ● Mobile Web applications ● Desktop web applications Skype: pavlo.yuriychuck Twitter: pavlo_yuriychuck
  3. 3. Angular.js з точки зору менеджера ● Один постачальник - Google ● Покриває широкий спектр задач ● Спільнота: ○ StackOverflow ○ Google Groups ○ Github issues ● Документація: ○ Книги, туторіали, статті, блоги, відео ● Реклама ● Репутація: Google Closure && GWT
  4. 4. Angular.js з точки зору програміста ● Двостороннє зв’язування даних та представлення ● Модульність ● Багата функціональність “з коробки” ● Інфраструктура веб-додатку ● Документація ● Щось дуже нагадує Adobe Flex ;)
  5. 5. Аналіз: за ● Те чого завжди не вистачало у інших фреймворках: broadcasting, services ● Багато засобів для реалізації предметної області ● Співмірні з jQuery stack можливості щодо Ajax. Більш строга модель Deferred ● Dependency injection
  6. 6. Аналіз: проти ● Важка та відносно монолітна. Модульність тільки з версії 1.2 ● Складність вивчення ● Документація - більшість правди ви знайдете в коментарях до статей ніж у самих статтях ;( ● Пошук помилок та відлагодження займають багато часу. Малоінформативні повідомлення про помилки. ● Знову відвикати від Require.js ;( ● Непередбачувані помилки та підводні камені
  7. 7. Насправді ;)
  8. 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. 9. Екосистема ● Yeoman - генератор коду та скелету програми ● Grunt.js - багатоцілева система збірки ● Bower - пакетний менеджер ● Node.js - серидовище виконання ○ npm - менеджер пакетів для Node ○ nvm - менеджер версій для Node
  10. 10. Екосистема - продовження ● Testing ○ Karma - серидовище для запуску тестів ○ Jasmine - фреймворк для тестування по замовчуванню ○ Mocha - набагато потужніший фреймворк ○ Chai - бібліотека допущень (Asserts) ○ Sinon.js - бібліотека для заглушок (Mocks, Stubs) ○ Angular UT && Angular e2e testing
  11. 11. Екосистема ● Docular - генерація документації ● Користувацький інтерфейс: ○ Angular UI ○ Angular Bootstrap ○ LESS || SASS ● i18n: ○ Dynamic locales ○ Angular-translate ○ Angular i18n || Angular i18n build
  12. 12. Причини для переходу 1. Багато взаємодій з сервером 2. Складний користувацький інтерфейс 3. Багато компонентів та взаємозв’язків між ними 4. Складна предметна область 5. Необхідно мати хорошу основу для майбутніх веб-додатків
  13. 13. Причини для непереходу ● Швидке прототипування ● Розробка ігор ● Розробка веб додатків які потребують оптимізацій щодо швидкості (WebGL, Realtime rendering, VNC) ● Залежність логіки від Require.js або YepNope ● Коли “легковісність” критична
  14. 14. Код: ● ● ● ● ● ● Application skeleton Unit tests - тестування провайдера Gruntfile - скрипти автоматизації Bower config - налаштування пакетів npm config - налаштування пакетів Karma config - налаштування тестів
  15. 15. Предметна область ● Директиви - окремі елементи UI, робота з DOM ● Фільтри - довільні перетворювачі даних ● Провайдери - фабрика яку можна налаштувати до використання ● Сервіси - бізнес логіка ● Фабрики - універсальне джерело даних, пристосоване для спільного використання в інших сервісах ● Декоратори - модифікація поведінки існуючих сервісів чи фабрик
  16. 16. Поради ● Варто одразу писати код minsafe, щоб не було проблем з мініфікацією коду ● Directives для роботи з DOM, Великі шматки розмітки у partials/views ● Не виконуйте важких операцій при роботі з даними які прив’язані до view. ● Якщо у вас одні і ті ж дані представляються у різних частинах view - зробіть їх копію за допомогою фільтрів
  17. 17. Поради ● $apply() не панацея, її варто використовувати лише в директивах та тестах ● Забудьте про $.ajax - є $http ● Забудьте про $.Deferred - є $q ● Якщо в контролері з’являються filterByXXX, groupByYYY, sortByZZZ - виносьте їх одразу у фільтри ● ng-repeat та ng-include створюють власну область видимості $scope
  18. 18. Ознаки того, що ви на правильному шляху ● Бізнес логіка не сконцентрована в контролерах ● Ви не використовуєте плагіни jQuery для всього підряд і вам достатньо jqLite ● Ви можете оцінювати час на розробку та тестування ● Ви пишете код в термінах предметної області
  19. 19. Перехід ● Навчальний курс ● Youtube канал ● Angular.js recipies - сама корисна книга ;) ● Angular services - що і для чого в Angular ● Angular scopes - області видимості ● Організація коду
  20. 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!

×