Design on a scalable, state-based, front-end application architecture to manage business logic and control flow. We'll synthesize a number of programming patterns to help you decouple not only views and data, but also navigation paradigms and transitions between states to keep your product agile and moving forward without having to refactor.
10. Modularity is the degree to which top down
a system’s components may
be separated and recombined.
(wikipedia)
?
Abstraction is the process of
formulating generalized ideas or
concepts by extracting common
qualities from specific examples bottom up
(the free dictionaty)
10
11. Modularity top down
• odules
m
• xtensions
e
large-scale rapid development
Abstraction
• outing
r
• ages
p bottom up
• ata/APIs
d
11
17. The Mythical Man Month
Frederick Brooks Jr.
“Men and months are interchangeable commodi-
ties only when a task can be partitioned among many
workers with no communication among them”
30. Where to start
backbone boilerplate
modular + build for production
aura
modular + widgets + message passing
31. Sandbox
facade
“The programmer is most effective if shielded
from, rather than exposed to the details of
construction of system parts other than his
own“
-Frederick Brooks Jr.
32. each module has a sandbox
module module module
module sandbox module
extension extension
core
extension extension
This promotes loose coupling so you can change
modules without affecting others
57. module group extension
If a group of modules
represents an
application, what if we
can manage groups to
run multiple applications
or portals within a single
page app?
67. fail()
v
no
route
yes
route fsm controller
Backbone routing with FSM
68. v
swap layout
fail()
no no
start modules
yes
route FSM group?
yes
enter()
controller resetRoutes()
69.
70.
71. router extension
• manage routes, delegate route callbacks to FSM
module groups extension
• modify core to handle groups with async/dfd
layout extension
• render views using message passing
fsm extension
• manage state (group)
• if routes pass, send allow controllers to callback
data extension
• manage model/collection cache
72. what we covered
how to take core components of a
web application (routes, navigation,
layouts, etc) and divy them up into
modules/extensions so that the
application can grow efficiently;
without the need to refactor.
bottom up + top down!
73. node.js tech to use and checkout
end-to-end JS!
backbone boilerplate
great for build + gettings started
aura
widgets and module lifecycle
backbone layout manager
views/layouts
async.js
asyncronous flow control
grunt.js
build
require.js
module loading
r.js
optimizer
74. props, credit, and people to checkout
Tim Branyen
Addy Osmoni
Nicholas Zakas