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
16. 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
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. 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...
19. 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
20. 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?
21. 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.
22. 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
23. 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
24. 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.
25.
26.
27.
28.
29.
30.
31. 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
32. 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
33.
34.
35.
36.
37. 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
38.
39.
40.
41. 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…
