O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.
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...
Próximos SlideShares
Carregando em…5
×

JavaScript Architecture: The Front and the Back of It

6.328 visualizações

Publicada em

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.

Publicada em: Tecnologia

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

×