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

  • 88 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
88
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Mobile-First with AngularJS
  • 2. CLASS OF 2001 CLASS OF 2006
  • 3. programmer | ˈprəәʊgraməә | noun ! a person that turns caffeine (and pizza) into computer programs.
  • 4. I am architect
  • 5. But not that kind of an architect... Picture property of Warner Bros.
  • 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. PARENT Sofia Zoo, 2013
  • 8. Startup = Growth => We’re looking for growth hacks
  • 9. growth hacking ! looking for low-cost and innovative alternatives to traditional approaches
  • 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. Please, send your Questions on my daddy’s email (vtsvetkov@obecto.com) or else he’ll be late for my party!