JavaScript Architecture:The Front and the Back of

It

SXSWi 2010Kyle Simpson

@getifyhttp://getify.me

#frontandbackofit

#jsarch

UI Architecture

all the stuff that it takes to process, package, deliver, and communicate with the client (presentation layer)

UI Architecture

url routing

data validation

data formatting

templating

ajax

UI Architecture

in between the FRONT end and the BACK end is…

the MIDDLE end

traditional web architecture

what‘s my motivation?

1. performance

2. MVC

spaghetti codemove over, QBasic

3.DRY

4. role separatio

n

a new “view”

CVCclients views controllers

clients

everything is a client of everything else

decoupled, modular, scalable

views

templating, portable, DRY, platform agnostic,

core web technology

controllers

small, independent, powerful

what i‘m NOT

suggesting

another framework

ditch whole architecture

mvc is wrong/weak

CVC is an alternate pattern for thinking about UI architecture

what i AM suggesting

it‘s ok to rethink!

JavaScript

(on the server)

node.js (V8)

narwhal(rhino)

JavaScriptCore, SpiderMonkey, etc

CommonJS

files

i/o

processes

networking

BikechainJS

V8 “engine” modules

CVC + JavaScript

the power of UI architecture in the hands of front-end

engineers

=

but how????

HandlebarJS{ }

templating engine text/html templates

JSON data input

details, details…

100% JavaScript (browser or server)

application “state” selects templates

“compiles” templates into JS

Wrapping up

More info

http://blog.getify.com

http://spkr8.com/talks/2518

http://github.com/getify/BikechainJS

http://github.com/getify/HandlebarJS

please provide feedback!!!!

Kyle Simpson@getifyhttp://getify.me

#jsarch

http://sxsw.getify.com

#frontandbackofit