1.
UI Architecture & Web Performance<br />Kyle Simpson<br />@getify<br />getify@gmail.com<br />http://getify.me<br />#uiperf<br />

2.
— Agnieszka Gasparska <br />

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.

5.
…just chip away everything that doesn’t look like a horse. <br /> — unknown <br />

6.

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.

9.

10.

11.

12.
ui architecture + web performance<br />ytf am i putting these together… in one talk?<br />

13.
FACT:<br />web performance optimization is 100% about improving the front-end<br />

14.
FACT:<br />87.3019354% of web performance optimization is not actually happening in the front-end<br />

15.
web performance optimization<br />

16.

17.

18.

19.
dynamic loading<br />

20.
RequireJS<br />

21.
Dominoes<br />

22.
LABjs<br />LoadingAndBlockingJavaScript<br />the performance script loader<br />

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.
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.
FF3 with <script> & <img> tags<br />FF3.5 with <script> & <img> tags<br />LABjs in every browser<br />

26.

27.

28.
combiner<br />(Nicholas Zakas)<br />

29.
Facebook<br />BigPipe, Haste, Pagelets<br />

30.
but how?<br />

31.
UI Architecture<br />how you process, package, deliver to, and communicate with the client/presentation layer<br />

32.
UI Architecture<br />in between the FRONT end and the BACK end is…<br />

33.
UI Architecture<br />in between the FRONT end and the BACK end is…<br />the MIDDLE end<br />

34.
UI Architecture<br />templating<br />url routing<br />data validation<br />ajax<br />data formatting<br />cookies/headers<br />

35.
traditional web architecture<br />

36.

37.
ui architecture <br />

38.
what’s my motivation?<br />

39.
performance anxiety optimization<br />

40.
spaghetti code<br />

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.
CVC<br />clients views controllers<br />

43.

44.
ui architecture <br />

45.
clients<br />everything is a client of everything else<br />decoupled, modular, scalable<br />

46.
templating, portable, DRY, platform agnostic, core web technology<br />views<br />

47.
controllers<br />small, independent, powerful<br />

48.
what i‘mNOT suggesting<br />yet another framework<br />ditch whole architecture<br />mvc is wrong/weak<br />

49.
what iAM suggesting<br />it‘s ok to rethink!<br />CVC is an alternatepattern for UI architecture<br />

50.
JavaScript<br />(on the server)<br />

51.
BikechainJS<br />V8<br />“engine”<br />modules<br />

52.
HandlebarJS<br />{ }<br />templating engine <br />text/html templates <br />JSON data input<br />

53.
LABjs on the server<br />37<br />

54.
Mincir<br />JavaScript compressor (in JavaScript)<br />37<br />

55.
the power of UI architecture in the hands of front-end engineers<br />CVC + JavaScript<br />=<br />

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