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.
Dude, where’s my UI architecture?<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />#dudeui<...
		      — Agnieszka Gasparska <br />
Every block of stone has a statue inside it and it is the task of the sculptor to discover it. <br />				— Michelangelo <b...
…just chip away everything that doesn’t look like a horse. <br />					— unknown <br />
Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. <br />		— Anto...
UI Architecture<br />how you process, package, deliver to, and communicate with the client/presentation layer<br />
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 />
UI Architecture<br />in between the FRONT end and the BACK end is…<br />the MIDDLE end<br />
traditional web architecture<br />
ui architecture <br />
what’s my motivation?<br />
performance anxiety optimization<br />
spaghetti code<br />
i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY...
many hats<br />many roles<br />
CVC<br />clients views controllers<br />
ui architecture <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 />yet 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 UI architecture<br />
JavaScript<br />(on the server)<br />
BikechainJS<br />V8<br />“engine”<br />modules<br />
code<br />
HandlebarJS<br />{  }<br />templating engine <br />text/html templates <br />JSON data input<br />
code<br />demo<br />
the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />
More info<br />http://github.com/getify/BikechainJS<br />http://github.com/getify/HandlebarJS<br />#dudeui<br />Kyle Simps...
Upcoming SlideShare
Loading in …5
×

Dude, where's my UI architecture?

1,509 views

Published on

We will explore a bottom-up re-visioning of UI architecture, showing how the deconstructed approach of CVC (Client-View-Controller) solves many of the problems that plague traditional frameworks in the web application space.

Published in: Technology, News & Politics
  • Be the first to comment

  • Be the first to like this

Dude, where's my UI architecture?

  1. 1.
  2. 2. Dude, where’s my UI architecture?<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />#dudeui<br />
  3. 3.
  4. 4.
  5. 5.
  6. 6. — Agnieszka Gasparska <br />
  7. 7. Every block of stone has a statue inside it and it is the task of the sculptor to discover it. <br /> — Michelangelo <br />
  8. 8.
  9. 9. …just chip away everything that doesn’t look like a horse. <br /> — unknown <br />
  10. 10.
  11. 11. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. <br /> — Antoine de Saint-Exupery <br />
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16. UI Architecture<br />how you process, package, deliver to, and communicate with the client/presentation layer<br />
  17. 17. UI Architecture<br />templating<br />url routing<br />data validation<br />ajax<br />data formatting<br />
  18. 18. UI Architecture<br />in between the FRONT end and the BACK end is…<br />
  19. 19. UI Architecture<br />in between the FRONT end and the BACK end is…<br />the MIDDLE end<br />
  20. 20. traditional web architecture<br />
  21. 21.
  22. 22. ui architecture <br />
  23. 23. what’s my motivation?<br />
  24. 24.
  25. 25. performance anxiety optimization<br />
  26. 26. spaghetti code<br />
  27. 27. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. i will not repeat myself. DRY. <br />
  28. 28. many hats<br />many roles<br />
  29. 29. CVC<br />clients views controllers<br />
  30. 30.
  31. 31. ui architecture <br />
  32. 32. clients<br />everything is a client of everything else<br />decoupled, modular, scalable<br />
  33. 33. templating, portable, DRY, platform agnostic, core web technology<br />views<br />
  34. 34. controllers<br />small, independent, powerful<br />
  35. 35. what i‘mNOT suggesting<br />yet another framework<br />ditch whole architecture<br />mvc is wrong/weak<br />
  36. 36. what iAM suggesting<br />it‘s ok to rethink!<br />CVC is an alternatepattern for UI architecture<br />
  37. 37. JavaScript<br />(on the server)<br />
  38. 38. BikechainJS<br />V8<br />“engine”<br />modules<br />
  39. 39. code<br />
  40. 40. HandlebarJS<br />{ }<br />templating engine <br />text/html templates <br />JSON data input<br />
  41. 41. code<br />demo<br />
  42. 42. the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />
  43. 43. More info<br />http://github.com/getify/BikechainJS<br />http://github.com/getify/HandlebarJS<br />#dudeui<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />

×