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!