0
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

4,901

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
2 Comments
10 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,901
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
93
Comments
2
Likes
10
Embeds 0
No embeds

No notes for slide

Transcript of "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 />
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×