Embed Size (px)
Citation preview
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 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
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!
!
!
Development Problems (& how the tooling works)!
Mobile-First Headaches
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
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...
M V
C
MM
VV
C C
SS 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 interest?
How such events reach the model, controller or whatever?
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.
The Angular approach$scope
M V
W
$scopeM V
W
$scopeM V
W
$scopeM V
W
$scopeM 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
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
"
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.
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
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
"
"
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
"
"
"
Architecture Crash Course in
Agenda
Client-Side Problems (& the Angular take on those)
Directives, Data binding & FiltersDevelopment Problems (& how the tooling works)
Mobile-First Headaches
"
"
"
! More Headaches…"
Please, send your Questions on my
daddy’s email ([email protected]) or else he’ll be late for
my party!
