The document discusses various loading strategies for YUI 3, focusing on methods to optimize script loading and improve performance, such as using CDN, lazy loading, and event-driven module loading. It emphasizes the importance of minimizing HTTP requests, managing app rollouts, and balancing file downloads to enhance user interactivity without adding complexity. Additionally, it includes practices for integrating plug-and-play widgets and strategies for preloading assets efficiently.

1. YUI 3 Loading Strategies Caridy Patino / @caridy Frontend Engineer Yahoo! Search YUI Evangelist

2. Evolution

5. developer.yahoo.com/performance/rules.html

6. Put Scripts at Bottom

7. Minimize HTTP Requests

8. Use a Content Delivery Network (CDN)

10. JS Loader Frameworks changed the game

11. YUI LABjs HeadJS ControlJS RequireJS Load.js YepNope.js $script.js LazyLoad curl.js DeferJS jquery.defer.js jQl DominateJS JSL Bootstrap StealJS bdLoad NBL.js https://spreadsheets.google.com/ccc?key=0Aqln2akPWiMIdERkY3J2OXdOUVJDTkNSQ2ZsV3hoWVE#gid=0

13. dd, substitute and slider tabview, oop, event, node, widget, etc yui seed loader

14. Static Combo Strategy

17. Data-driven initialization routine

18. Using app-rollout files

19. Using app-rollout files

20. Rollout vs Loader

21. Rollout Composition Library Plugins Custom Init.js

22. A big app-rollout takes more time to download and can potentially freeze the browser

23. Simple rollout

24. Interactivity Core & Lazy Components

26. Defining the interactivity core is crucial

28. Core and Lazy Components core rollout lazy components

29. Parallel Download Strategy

30. Get app-rollout early without compromising domready and onload

31. “ Ideal Solution”

33. Parallel Download: Challenges Produce a VERY tiny non-blocking bootstrap Avoid blocking onload with app-rollout Split the app-rollout into multiple and balanced files

34. Event Binder Strategy

35. Time to Interactivity

36. Time to Interactivity

37. Users should be able to interact with the page at any time

38. Catch and hold some events until the handler become available

39. But, doing so without increasing the complexity of the application

40. yuilibrary.com/gallery/show/event-binder

41. Event Binder: Features Event-driven Module Loading Early Event Binding

42. Event-driven Module Loading

43. Regular YUI 3 Module

44. Event-driven Module Loading

45. Early Event Binding

46. Early Event Binding

48. iFrame Strategy

49. Plug & Play Widgets

50. A Plug & Play Widget is an independent piece of software that can run on any page

51. Widgets: Challenges Inject the widget without degrading the host page Keep the widget JavaScript in a sandbox Keep the widget CSS in a sandbox

52. A YUI instance can be tailored to work off a different document

53. yuilibrary.com/gallery/show/parent-window

54. Injecting a widget using an iframe

55. widget-app-rollout.js

56. Preload Strategy

57. http://www.linkedin.com/jsearch

58. Preload: Features Store static JS assets in cache without executing them Store static CSS assets in cache without including them

59. Stay ahead of the users without increasing the complexity of the app

60. yuilibrary.com/gallery/show/preload

63. … some more thoughts Optimize only if it doesn’t add complexity to your app Granularity is good for optimization Rollouts can help you to control the loading process Focus on the bottle necks that affect the majority of your users Work on the user perception

64. Thanks! Caridy Patino http://github.com/caridy http://twitter.com/caridy