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

815 views

Published on

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

1.Що таке Angular.JS на думку Менеджера і Розробника
2. Екосистема для розробки на Angular.JS
3. Причини для переходу і непереходу на Angular.JS
4. Предметна область, поради, книги
5. Ознаки, що Ви на вірному шляху

Цю презентацію значно доповнює схожа, але трохи інша. англомовна презентація Павла: "Pavlo Yuriychuk — Switching to Angular.js. Silk way"

Published in: Education
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
815
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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

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

×