Your SlideShare is downloading. ×
0
Mobile-First
with AngularJS
CLASS OF 2001 CLASS OF 2006
programmer | ˈprəәʊgraməә |
noun
!
a person that turns caffeine (and pizza) into
computer programs.
I am architect
But not that kind
of an architect...
Picture property of Warner Bros.
“… guide, as in mountaineering. A
guide is a more experienced and skilful
team member who teaches other team
members to be...
PARENT
Sofia Zoo, 2013
Startup = Growth
=> We’re looking for growth hacks
growth hacking
!
looking for low-cost and innovative
alternatives to traditional approaches
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters
...
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters
...
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 ...
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
Problem 2: Event Handling
M V
C
What kind of events?
Who dispatches these events?
How to subscribe to the events
of intere...
Problem 3: Presentation Patterns
M V
C
What logic is allowed to be put
in the HTMLs?
How does the model get
adapted for th...
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
HTM...
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters
...
yo scaffolds out a new application, writing your Grunt
configuration and pulling in relevant Grunt tasks and
Bower dependenc...
Don’t forget to check out the code:
!
https://github.com/npacemo/beit-first-try
!
So far we’re at this commit:
!
https://g...
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters
...
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters
...
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & Filters
...
Please, send your
Questions on my
daddy’s email
(vtsvetkov@obecto.com)
or else he’ll be late for
my party!
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Mobile First with Angular.JS - Владимир Цветков, Obecto
Upcoming SlideShare
Loading in...5
×

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

136

Published on

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

  • Be the first to like this

No Downloads
Views
Total Views
136
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "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!
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×