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

8. PARENT
Sofia Zoo, 2013

10. Startup = Growth
=> We’re looking for growth hacks

11. growth hacking
!
looking for low-cost and innovative
alternatives to traditional approaches

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.

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

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

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…

43. Please, send your
Questions on my
daddy’s email
(vtsvetkov@obecto.com)
or else he’ll be late for
my party!