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.

1. Built to Last
Building scalable front-end application architectures
with business logic.

2. Dan Lynch
Engineer & Artist
questions/thoughts?
@skatalynch

3. The Web

4. Building Things
1999, AutoCAD 10

5. I like helping other people
build
SideFX
city builder interface
2006

6. Building things that build
things
Vim3D
vim interface to building 3D

7. famo.us
our biz dev built this
app on the first famo.us
framework

8. interface for building
interactive textbooks
mathapedia

9. building tools for people

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

12. Why Modularity?

13. Adding New Code
Most time you spend is maintaining
code, not writing new code

14. Intuitive
Co-workers depend on your code to
make sense

15. Extendability
If features change, it’s
easy to extend or swap
parts

16. Debug/Test
It’s easy to test individual modules

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”

18. Complex Communication

19. Spaghetti Code
• specific to application
• not reusable
• the app is the testing framework

20. Perfectly Partitionable

21. Modules
• interdependent
• little knowledge about the application
• it is the sum of the modules that makes up the application

22. Module: Each of a set of standardized parts
or independent units that can be used to con-
struct a more complex structure (google definition)

23. Various Module Definitions +
Terminolgies
• JS module pattern
• AMD modules
• Web application modules

24. JavaScript Module Pattern
private and public encapsulation using closures

25. AMD Modules

26. Web Application Modules
HTML + CSS + JS
(components)

27. Application Modules
model
view
controller

28. Application Framework
“An Application Framework is like a playground
for your code”
- Nicholas Zakas

29. Application Framework
module module module
module sandbox module
extension extension
core
extension extension

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

33. each module has a sandbox

34. sandbox exposes functionality
module module module
sandbox
core

35. sandbox exposes functionality

36. application core
module module module
module sandbox module
extension extension
core
extension extension

37. module registration, lifecycle,
and intercommunication

38. application core is responsible for:
message passing
module life-cycle

39. application core - the mediator
• communication hub & centralized controller
• intermediary between interdependent modules

40. application core - the mediator
only N channels!
module
module mediator
module
modules use transitive communication through mediator

41. publish
photo gallery module

42. publish
“get-fb-photos”
Gallery Module

43. “get-fb-photos”
mediator

44. subscribe
“get-fb-photos”
FB Integration Module

45. subscribe
fb integration module

46. photo gallery module

47. module life-cycle

48. build for
extension

49. extending the core
module module module
module sandbox module
extension extension
core
extension extension

50. Where is my layout?
Where do my routes go?
Where does my data live?

51. Decouple Your Web App
Navigation
URLs/routes/controllers
Data
data/models/collections
Pages
layouts/views/templates

53. layout extension
enable abstraction of navigation paradigms

54. route:books
router
route:books
module mediator
render:books
render:books
layout

55. controller

56. layout

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?

58. module group extension

59. no
change group v
route
yes
route group? controller

60. module group extension

61. change group
swap layout
afterRender()
start modules
$.when.apply($, promises).done

62. Protecting Resources/Modules

63. typical backend
flow
yes
route middleware controller
no
middleware can protect resources

64. can the front-end JS function like the backend?
route controller
(typical Backbone routing with no FSM)

65. Finite State Machine
• events
• states
• transitions
• actions

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()

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

77. Thank You!
@skatalynch