UI Architecture & Web Performance<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />#uiperf<...
— 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<br />
…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 /> — Ant...
ui architecture + web performance<br />ytf am i putting these together… in one talk?<br />
FACT:<br />web performance optimization is 100% about improving the front-end<br />
FACT:<br />87.3019354% of web performance optimization is not actually happening in the front-end<br />
web performance optimization<br />
dynamic loading<br />
RequireJS<br />
Dominoes<br />
LABjs<br />LoadingAndBlockingJavaScript<br />the performance script loader<br />
When NOT to use LABjs<br />1. If your script uses document.write<br />2. If your script ITSELF does unsafe DOM-ready detec...
When TO use LABjs<br />Everywhere else<br />(actually, wherever you load scripts over-the-wire, and you care about perform...
FF3 with <script> & <img> tags<br />FF3.5 with <script> & <img> tags<br />LABjs in every browser<br />
combiner<br />(Nicholas Zakas)<br />
Facebook<br />BigPipe, Haste, Pagelets<br />
but how?<br />
UI Architecture<br />how you process, package, deliver to, and communicate with the client/presentation layer<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 />
UI Architecture<br />templating<br />url routing<br />data validation<br />ajax<br />data formatting<br />cookies/headers<...
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...
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 />
HandlebarJS<br />{ }<br />templating engine <br />text/html templates <br />JSON data input<br />
LABjs on the server<br />37<br />
Mincir<br />JavaScript compressor (in JavaScript)<br />37<br />
the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />
More info<br />http://txjs.getify.com<br />http://spkr8.com/t/3317<br /> please provide feedback!!!!<br />http://github.c...
Upcoming SlideShare
Loading in …5
×

UI Architecture & Web Performance

4,031 views

Published on

We all know that web performance optimization is becoming critical to the success of web sites and applications. The problem is, we often don’t have the control over the UI Architecture (“middle-end”) that we need to really make things better.

We’ll talk about how to use JavaScript (client- and server-side) to revamp the middle-end so we can throttle web performance (and code maintainability) to the next level.

Published in: Technology
0 Comments
11 Likes
Statistics
Notes
no profile picture user

  • Be the first to comment

Show More
No Downloads
Views
Total views
4,031
On SlideShare
0
From Embeds
0
Number of Embeds
179
Actions
Shares
0
Downloads
90
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

UI Architecture & Web Performance

  1. 1. UI Architecture & Web Performance<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />#uiperf<br />
  2. 2. — Agnieszka Gasparska <br />
  3. 3. Every block of stone has a statue inside it and it is the task of the sculptor to discover it. <br /> — Michelangelo<br />
  4. 4.
  5. 5. …just chip away everything that doesn’t look like a horse. <br /> — unknown <br />
  6. 6.
  7. 7. 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 />
  8. 8.
  9. 9.
  10. 10.
  11. 11.
  12. 12. ui architecture + web performance<br />ytf am i putting these together… in one talk?<br />
  13. 13. FACT:<br />web performance optimization is 100% about improving the front-end<br />
  14. 14. FACT:<br />87.3019354% of web performance optimization is not actually happening in the front-end<br />
  15. 15. web performance optimization<br />
  16. 16.
  17. 17.
  18. 18.
  19. 19. dynamic loading<br />
  20. 20. RequireJS<br />
  21. 21. Dominoes<br />
  22. 22. LABjs<br />LoadingAndBlockingJavaScript<br />the performance script loader<br />
  23. 23. When NOT to use LABjs<br />1. If your script uses document.write<br />2. If your script ITSELF does unsafe DOM-ready detection – does not apply to scripts that use the results of such detection.<br />
  24. 24. When TO use LABjs<br />Everywhere else<br />(actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a suitable loader already)<br />
  25. 25. FF3 with <script> & <img> tags<br />FF3.5 with <script> & <img> tags<br />LABjs in every browser<br />
  26. 26.
  27. 27.
  28. 28. combiner<br />(Nicholas Zakas)<br />
  29. 29. Facebook<br />BigPipe, Haste, Pagelets<br />
  30. 30. but how?<br />
  31. 31. UI Architecture<br />how you process, package, deliver to, and communicate with the client/presentation layer<br />
  32. 32. UI Architecture<br />in between the FRONT end and the BACK end is…<br />
  33. 33. UI Architecture<br />in between the FRONT end and the BACK end is…<br />the MIDDLE end<br />
  34. 34. UI Architecture<br />templating<br />url routing<br />data validation<br />ajax<br />data formatting<br />cookies/headers<br />
  35. 35. traditional web architecture<br />
  36. 36.
  37. 37. ui architecture <br />
  38. 38. what’s my motivation?<br />
  39. 39. performance anxiety optimization<br />
  40. 40. spaghetti code<br />
  41. 41. 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 />
  42. 42. CVC<br />clients views controllers<br />
  43. 43.
  44. 44. ui architecture <br />
  45. 45. clients<br />everything is a client of everything else<br />decoupled, modular, scalable<br />
  46. 46. templating, portable, DRY, platform agnostic, core web technology<br />views<br />
  47. 47. controllers<br />small, independent, powerful<br />
  48. 48. what i‘mNOT suggesting<br />yet another framework<br />ditch whole architecture<br />mvc is wrong/weak<br />
  49. 49. what iAM suggesting<br />it‘s ok to rethink!<br />CVC is an alternatepattern for UI architecture<br />
  50. 50. JavaScript<br />(on the server)<br />
  51. 51. BikechainJS<br />V8<br />“engine”<br />modules<br />
  52. 52. HandlebarJS<br />{ }<br />templating engine <br />text/html templates <br />JSON data input<br />
  53. 53. LABjs on the server<br />37<br />
  54. 54. Mincir<br />JavaScript compressor (in JavaScript)<br />37<br />
  55. 55. the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />
  56. 56. More info<br />http://txjs.getify.com<br />http://spkr8.com/t/3317<br /> please provide feedback!!!!<br />http://github.com/getify/BikechainJS<br />http://github.com/getify/HandlebarJS<br />#uiperf<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />

×