Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

JavaScript Architecture: The Front and the Back of It

6.318 Aufrufe

Veröffentlicht am

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.

Veröffentlicht in: Technologie

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 />

×