Built to Last Building scalable front-end application architectures with business logic.
May 08, 2015
Built to Last
Building scalable front-end application architectures with business logic.
Dan LynchEngineer & Artist
questions/thoughts? @skatalynch
The Web
Building Things
1999, AutoCAD 10
2006
SideFXcity builder interface
I like helping other people build
Building things that build things
Vim3D
vim interface to building 3D
famo.us
our biz dev built this app on the first famo.us framework
interface for buildinginteractive textbooks
mathapedia
building tools for people
10
Modularity is the degree to which 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 (the free dictionaty)
top down
bottom up
?
11
Modularity• modules• extensions
Abstraction• routing• pages• data/APIs
top down
bottom up
large-scale rapid development
Why Modularity?
Adding New Code
Most time you spend is maintaining code, not writing new code
Intuitive
Co-workers depend on your code to make sense
Extendability
If features change, it’s easy to extend or swap parts
Debug/Test
It’s easy to test individual modules
The Mythical Man MonthFrederick Brooks Jr.
“Men and months are interchangeable commodi-ties only when a task can be partitioned among many workers with no communication among them”
Complex Communication
Spaghetti Code• specific to application• not reusable• the app is the testing framework
Perfectly Partitionable
Modules• interdependent• little knowledge about the application• it is the sum of the modules that makes up the application
Module: Each of a set of standardized parts or independent units that can be used to con-struct a more complex structure (google definition)
Various Module Definitions + Terminolgies
• JS module pattern• AMD modules• Web application modules
JavaScript Module Pattern
private and public encapsulation using closures
AMD Modules
Web Application Modules
HTML + CSS + JS
(components)
Application Modules
model
view
controller
Application Framework
“An Application Framework is like a playground for your code”
- Nicholas Zakas
core
sandbox
module
module
module module
module
extensionextension
extensionextension
Application Framework
Where to start
backbone boilerplate modular + build for production
aura modular + widgets + message passing
Sandboxfacade“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.
core
sandbox
module
module
module module
module
extension
extension
extension
extension
each module has a sandbox
This promotes loose coupling so you can changemodules without affecting others
each module has a sandbox
sandbox exposes functionality
core
sandbox
module module module
sandbox exposes functionality
core
sandbox
module
module
module module
module
extension
extension
extension
extension
application core
module registration, lifecycle,and intercommunication
message passing
module life-cycle
application core is responsible for:
application core - the mediator
• communication hub & centralized controller• intermediary between interdependent modules
mediatormodule
module
module
application core - the mediator
modules use transitive communication through mediator
only N channels!
publish
photo gallery module
publish
“get-fb-photos”
Gallery Module
“get-fb-photos”
mediator
“get-fb-photos”
FB Integration Module
subscribe
subscribe
fb integration module
photo gallery module
module life-cycle
build for extension
core
sandbox
module
module
module module
module
extension
extension
extension
extension
extending the core
Where do my routes go?Where does my data live?
Where is my layout?
Decouple Your Web AppNavigation URLs/routes/controllers
Data data/models/collections
Pages layouts/views/templates
layout extension
enable abstraction of navigation paradigms
mediatormodule
router
layout
route:books
route:books
render:books
render:books
controller
layout
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?
module group extension
route
change group
route
group?
v
yes
no
controller
module group extension
swap layout
change group
$.when.apply($, promises).done
afterRender()
start modules
Protecting Resources/Modules
middleware
typical backend
middleware can protect resources
route controller
flow
yes
no
route
(typical Backbone routing with no FSM)
controller
can the front-end JS function like the backend?
Finite State Machine
• events• states• transitions• actions
route
fail()
route
fsm
v
yes
no
controller
Backbone routing with FSM
route
v
yes
yes
no no
FSM group?
fail()swap layout
start modules
enter()
resetRoutes()controller
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
what we coveredhow 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!
node.js end-to-end JS!backbone boilerplate great for build + gettings startedaura widgets and module lifecyclebackbone layout manager views/layoutsasync.js asyncronous flow controlgrunt.js buildrequire.js module loadingr.js optimizer
tech to use and checkout
props, credit, and people to checkout
Tim Branyen Addy Osmoni
Nicholas Zakas
@skatalynch
Thank You!