Mobile First with Angular.JS - Владимир Цветков, Obecto

479 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

No notes for slide

Mobile First with Angular.JS - Владимир Цветков, Obecto

  1. 1. Mobile-First with AngularJS
  2. 2. CLASS OF 2001 CLASS OF 2006
  3. 3. programmer | ˈprəәʊgraməә | noun ! a person that turns caffeine (and pizza) into computer programs.
  4. 4. I am architect
  5. 5. But not that kind of an architect... Picture property of Warner Bros.
  6. 6. “… guide, as in mountaineering. A guide is a more experienced and skilful team member who teaches other team members to better fend for themselves yet is always there for the really tricky stuff.” -- Martin Fowler, Who needs an Architect? http://martinfowler.com/ieeeSoftware/whoNeedsArchitect.pdf
  7. 7. PARENT Sofia Zoo, 2013
  8. 8. Startup = Growth => We’re looking for growth hacks
  9. 9. growth hacking ! looking for low-cost and innovative alternatives to traditional approaches
  10. 10. Architecture Crash Course in Agenda Client-Side Problems (& the Angular take on those) Directives, Data binding & Filters Development Problems (& how the tooling works) Mobile-First Headaches
  11. 11. Architecture Crash Course in Agenda Client-Side Problems (& the Angular take on those) Directives, Data binding & Filters Development Problems (& how the tooling works) Mobile-First Headaches
  12. 12. MVC, MVCS, MVWhatever M V C this is what we’re familiar with — let’s complicate it a bit M V C S in a perfect world there would be only 4 dots with arrows between them...
  13. 13. M V C M M V V C C S S S in situations like that you need to take care of dependency management Problem 1: Dependencies
  14. 14. Problem 2: Event Handling M V C What kind of events? Who dispatches these events? How to subscribe to the events of interest? How such events reach the model, controller or whatever?
  15. 15. Problem 3: Presentation Patterns M V C What logic is allowed to be put in the HTMLs? How does the model get adapted for the needs of the View? How to mediate the cooperation between several components? How about the View Display logic and DOM manipulation? V.D. V.L. M.P. Med.
  16. 16. The Angular approach $scope M V W $scope M V W $scope M V W $scope M V W $scope M V W D.I. Hierarchy of scopes tied to HTML DOM Dependencies Injector is a registry for all Angular components Events travel through the hierarchy of $scope — emit & broadcast Presentation Model & Passive View as presentation patterns
  17. 17. Architecture Crash Course in Agenda Client-Side Problems (& the Angular take on those) Directives, Data binding & Filters Development Problems (& how the tooling works) Mobile-First Headaches
  18. 18. yo scaffolds out a new application, writing your Grunt configuration and pulling in relevant Grunt tasks and Bower dependencies that you might need for your build. Grunt is used to build, preview and test your project, thanks to help from tasks curated by the Yeoman team and grunt-contrib. Bower is used for dependency management, so that you no longer have to manually download and manage your scripts.
  19. 19. Don’t forget to check out the code: ! https://github.com/npacemo/beit-first-try ! So far we’re at this commit: ! https://github.com/npacemo/beit-first-try/commit/eb9237
  20. 20. Architecture Crash Course in Agenda Client-Side Problems (& the Angular take on those) Directives, Data binding & Filters Development Problems (& how the tooling works) Mobile-First Headaches
  21. 21. Architecture Crash Course in Agenda Client-Side Problems (& the Angular take on those) Directives, Data binding & Filters Development Problems (& how the tooling works) Mobile-First Headaches
  22. 22. Architecture Crash Course in Agenda Client-Side Problems (& the Angular take on those) Directives, Data binding & Filters Development Problems (& how the tooling works) Mobile-First Headaches More Headaches…
  23. 23. Please, send your Questions on my daddy’s email (vtsvetkov@obecto.com) or else he’ll be late for my party!

×