javascript architecture: the front and the back of it
DESCRIPTION
Explore new ways to use JavaScript on the server and in the browser to achieve scalable, secure, robust, and maintainable UI architecture for web applications.TRANSCRIPT
![Page 1: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/1.jpg)
![Page 2: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/2.jpg)
JavaScript Architecture:The Front and the Back of
It
SXSWi 2010Kyle Simpson
@getifyhttp://getify.me
#frontandbackofit
#jsarch
![Page 3: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/3.jpg)
UI Architecture
all the stuff that it takes to process, package, deliver, and communicate with the client (presentation layer)
![Page 4: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/4.jpg)
UI Architecture
url routing
data validation
data formatting
templating
ajax
![Page 5: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/5.jpg)
UI Architecture
in between the FRONT end and the BACK end is…
the MIDDLE end
![Page 6: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/6.jpg)
traditional web architecture
![Page 7: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/7.jpg)
![Page 8: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/8.jpg)
what‘s my motivation?
![Page 9: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/9.jpg)
1. performance
![Page 10: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/10.jpg)
2. MVC
![Page 11: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/11.jpg)
spaghetti codemove over, QBasic
![Page 12: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/12.jpg)
3.DRY
![Page 13: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/13.jpg)
4. role separatio
n
![Page 14: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/14.jpg)
a new “view”
![Page 15: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/15.jpg)
CVCclients views controllers
![Page 16: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/16.jpg)
![Page 17: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/17.jpg)
clients
everything is a client of everything else
decoupled, modular, scalable
![Page 18: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/18.jpg)
views
templating, portable, DRY, platform agnostic,
core web technology
![Page 19: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/19.jpg)
controllers
small, independent, powerful
![Page 20: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/20.jpg)
what i‘m NOT
suggesting
another framework
ditch whole architecture
mvc is wrong/weak
![Page 21: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/21.jpg)
CVC is an alternate pattern for thinking about UI architecture
what i AM suggesting
it‘s ok to rethink!
![Page 22: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/22.jpg)
JavaScript
(on the server)
![Page 23: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/23.jpg)
node.js (V8)
narwhal(rhino)
JavaScriptCore, SpiderMonkey, etc
![Page 24: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/24.jpg)
CommonJS
files
i/o
processes
networking
![Page 25: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/25.jpg)
BikechainJS
V8 “engine” modules
![Page 26: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/26.jpg)
CVC + JavaScript
the power of UI architecture in the hands of front-end
engineers
=
![Page 27: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/27.jpg)
but how????
![Page 28: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/28.jpg)
HandlebarJS{ }
templating engine text/html templates
JSON data input
![Page 29: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/29.jpg)
details, details…
100% JavaScript (browser or server)
application “state” selects templates
“compiles” templates into JS
![Page 30: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/30.jpg)
Wrapping up
![Page 31: JavaScript Architecture: The Front and the Back of It](https://reader033.vdocument.in/reader033/viewer/2022052523/555842d9d8b42acb078b5175/html5/thumbnails/31.jpg)
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