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.

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

2. — Agnieszka Gasparska

3. Every block of stone has a statue inside it and it is the task of the sculptor to discover it. — Michelangelo

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

7. Perfection is achieved, not when there is nothing more to add, but when there is nothing left to take away. — Antoine de Saint-Exupery

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

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

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

15. web performance optimization

19. dynamic loading

20. RequireJS

21. Dominoes

22. LABjs LoadingAndBlockingJavaScript the performance script loader

23. When NOT to use LABjs 1. If your script uses document.write 2. If your script ITSELF does unsafe DOM-ready detection – does not apply to scripts that use the results of such detection.

24. When TO use LABjs Everywhere else (actually, wherever you load scripts over-the-wire, and you care about performance, and don’t have a suitable loader already)

25. FF3 with <script> & <img> tags FF3.5 with <script> & <img> tags LABjs in every browser

28. combiner (Nicholas Zakas)

29. Facebook BigPipe, Haste, Pagelets

30. but how?

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

32. UI Architecture in between the FRONT end and the BACK end is…

33. UI Architecture in between the FRONT end and the BACK end is… the MIDDLE end

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

35. traditional web architecture

37. ui architecture 

38. what’s my motivation?

39. performance anxiety optimization

40. spaghetti code

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.

42. CVC clients views controllers

44. ui architecture 

45. clients everything is a client of everything else decoupled, modular, scalable

46. templating, portable, DRY, platform agnostic, core web technology views

47. controllers small, independent, powerful

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

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

50. JavaScript (on the server)

51. BikechainJS V8 “engine” modules

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

53. LABjs on the server 37

54. Mincir JavaScript compressor (in JavaScript) 37

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

56. More info http://txjs.getify.com http://spkr8.com/t/3317  please provide feedback!!!! http://github.com/getify/BikechainJS http://github.com/getify/HandlebarJS #uiperf Kyle Simpson @getify getify@gmail.com http://getify.me