Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SXSWi 2010<br />Kyle Simpson<br />@getify<br />http://getify.me<br />#frontandbackofit<br />#jsarch<br />JavaScript Archit...
UI Architecture<br />all the stuff that it takes to process, package, deliver, and communicate with the client (presentati...
UI Architecture<br />templating<br />url routing<br />data validation<br />ajax<br />data formatting<br />
UI Architecture<br />in between the FRONT end and the BACK end is…<br />the MIDDLE end<br />
traditional web architecture<br />
what‘s my motivation?<br />
1. performance<br />
2. MVC<br />
spaghetti code<br />move over, QBasic<br />
3.DRY<br />
4. role separation<br />
a new “view”<br />
CVC<br />clients views controllers<br />
clients<br />everything is a client of everything else<br />decoupled, modular, scalable<br />
templating, portable, DRY, platform agnostic, core web technology<br />views<br />
controllers<br />small, independent, powerful<br />
what i‘mNOT suggesting<br />another framework<br />ditch whole architecture<br />mvc is wrong/weak<br />
what iAM suggesting<br />it‘s ok to rethink!<br />CVC is an alternatepattern for thinking about UI architecture<br />
JavaScript<br />(on the server)<br />
node.js (V8)<br />narwhal<br />(rhino)<br />JavaScriptCore, SpiderMonkey, etc<br />
CommonJS<br />files<br />i/o<br />processes<br />networking<br />
BikechainJS<br />V8<br />“engine”<br />modules<br />
the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />
but how????<br />
HandlebarJS<br />{  }<br />templating engine <br />text/html templates <br />JSON data input<br />
details, details…<br />100% JavaScript (browser or server)<br />application “state” selects templates<br />“compiles” temp...
Wrapping up<br />
More info<br />http://sxsw.getify.com<br />http://blog.getify.com<br />http://spkr8.com/talks/2518<br />please provide fe...
Upcoming SlideShare
Loading in …5
×

JavaScript Architecture: The Front and the Back of It

6,210 views

Published on

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.

Published in: Technology

JavaScript Architecture: The Front and the Back of It

  1. 1.
  2. 2. SXSWi 2010<br />Kyle Simpson<br />@getify<br />http://getify.me<br />#frontandbackofit<br />#jsarch<br />JavaScript Architecture:The Front and the Back of It<br />
  3. 3. UI Architecture<br />all the stuff that it takes to process, package, deliver, and communicate with the client (presentation layer)<br />
  4. 4. UI Architecture<br />templating<br />url routing<br />data validation<br />ajax<br />data formatting<br />
  5. 5. UI Architecture<br />in between the FRONT end and the BACK end is…<br />the MIDDLE end<br />
  6. 6. traditional web architecture<br />
  7. 7.
  8. 8. what‘s my motivation?<br />
  9. 9. 1. performance<br />
  10. 10. 2. MVC<br />
  11. 11. spaghetti code<br />move over, QBasic<br />
  12. 12. 3.DRY<br />
  13. 13. 4. role separation<br />
  14. 14. a new “view”<br />
  15. 15. CVC<br />clients views controllers<br />
  16. 16.
  17. 17. clients<br />everything is a client of everything else<br />decoupled, modular, scalable<br />
  18. 18. templating, portable, DRY, platform agnostic, core web technology<br />views<br />
  19. 19. controllers<br />small, independent, powerful<br />
  20. 20. what i‘mNOT suggesting<br />another framework<br />ditch whole architecture<br />mvc is wrong/weak<br />
  21. 21. what iAM suggesting<br />it‘s ok to rethink!<br />CVC is an alternatepattern for thinking about UI architecture<br />
  22. 22. JavaScript<br />(on the server)<br />
  23. 23. node.js (V8)<br />narwhal<br />(rhino)<br />JavaScriptCore, SpiderMonkey, etc<br />
  24. 24. CommonJS<br />files<br />i/o<br />processes<br />networking<br />
  25. 25. BikechainJS<br />V8<br />“engine”<br />modules<br />
  26. 26. the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />
  27. 27. but how????<br />
  28. 28. HandlebarJS<br />{ }<br />templating engine <br />text/html templates <br />JSON data input<br />
  29. 29. details, details…<br />100% JavaScript (browser or server)<br />application “state” selects templates<br />“compiles” templates into JS<br />
  30. 30. Wrapping up<br />
  31. 31. More info<br />http://sxsw.getify.com<br />http://blog.getify.com<br />http://spkr8.com/talks/2518<br />please provide feedback!!!!<br />http://github.com/getify/BikechainJS<br />http://github.com/getify/HandlebarJS<br />Kyle Simpson<br />@getify<br />http://getify.me<br />#frontandbackofit<br />#jsarch<br />

×