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,465 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
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
1,465
On SlideShare
0
From Embeds
0
Number of Embeds
95
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

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

×