Morgan's knowledge sharing presentation.

1. Embracing YUI 3 & Frontend Performance Morgan Cheng, Jan 6th 2011

2. YUI 3 Lighter Faster Easier to use

3. YUI 2 to YUI 3

4. YUI 2 sample module YAHOO.namespace(‘MyProject’); (function() { var MODULE_NAME=“MyProject”, Dom = YAHOO.util.Dom; YAHOO.MyProject.MyDialog = function() { . . . }; }());

5. Another YUI 2 sample module YAHOO.namespace(‘MyProject’); (function() { var MODULE_NAME=“MyProject”, Dom = YAHOO.util.Dom Event = YAHOO.util.Event; YAHOO.MyProject.MyPage = { init: function() { }, . . . }; Event.onDOMReady(YAHOO.MyProject.MyPage.init, null, YAHOO.MyProject.MyPage); }());

6. Not Enough for Mash-up Page

7. Limitation YAHOO property can be overwritten… YAHOO.widget.HelloWorld = something; // by one developer … YAHOO.widget.HelloWorld = another; // by another developer

8. YUI 3 module YUI.add(“myModule”, function(Y) { Y.namespace(‘myproject’).mod = function() { }; }, “0.0.1”, //module version {requires: [‘node’]} // dependecies );

9. Use YUI 3 module YUI().use(“myModule”, function(Y) { varm = new Y.myProject.mod; . . . }); This might be easy to read: varyui = YUI(); yui. use(“myModule”, function(Y) { varm = new Y.myProject.mod; . . . });

10. Sandboxing YUI().use(“myModule”, function(Y) { varm = new Y.myProject.mod; }); YUI().use(“node”, function(Y) { //no myProject for this Y });

11. DOM <div id=“menu”> <h1>B1 Canteen Menu</h1> <ul> <li>Fish</li> <li class=“promotion”>Noodle</li> <li class=“promotion”>Meat</li> <li>Rice</li> <li>Tomato</li> </ul> </div>

12. In YUI 2 To get <li> element with “promotion” class under element with id “menu” var Dom = YAHOO.util.Dom; var el = Dom.get(‘menu’); varpromotedItems = Dom.getElementsByClassName(‘promotion’, ‘li’, el);

13. Selector API in YUI 3 One-liner YUI().use(‘node’, function(Y) { varpromtedItems = Y.all(‘#menuli.promotion’); });

14. Selector Best Practice Prefer “#id” Prefer simple selector over complex selector

15. YUI 2 Selector Utility http://developer.yahoo.com/yui/selector/ But, not chainable returning raw Dom elements

16. Node & NodeList Wrapper of DOM elements From function-based to object-based In YUI 2 var el = YAHOO.util.Dom.get(‘id’); YAHOO.util.Dom.addClass(el, ‘className’); In YUI 3 Y.one(‘id’).addClass(‘className’);

17. YUI 3 Chainable YUI().use(‘node’, function(Y) { Y.all(“#menuli”) .each(function(node, i, ctx) { if ( i % 2) { node.addClass(‘even’).removeClass(‘disable’); } }) .setStyle(‘color, ‘red’); });

18. Event Event Facade YUI().use(‘event’, ‘node’, function(Y) { Y.one(‘id’).on(‘click’, function(e) { Y.log(e.currentTarget); e.preventDefault(); }); });

19. Wait, but how does these stuff get loaded into page?

20. Seed File <script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"></script> YUI().use(‘node’, function(Y) { });

21. Seed File with Loader <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js&3.2.0/build/loader/loader-min.js"></script> YUI().use(‘node’, function(Y) { });

22. Traditional Way <script type="text/javascript" src="http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js&3.2.0/build/loader/loader-min.js&3.2.0/build/oop/oop-min.js&3.2.0/build/dom/dom-min.js&3.2.0/build/dom/dom-style-ie-min.js&3.2.0/build/event-custom/event-custom-base-min.js&3.2.0/build/event/event-base-min.js&3.2.0/build/pluginhost/pluginhost-min.js&3.2.0/build/node/node-min.js&3.2.0/build/event/event-delegate-min.js"></script>

23. YUI 3 Dependency Magic Ramp-up Combine

24. JavaScript Blocks

25. Script Blocks Page Rendering <script type=“text/javascript” src=“long-time.js”></script> <imgsrc=“I-am-bocked.png”></img>

26. Script Blocks Script <script type=“text/javascript” src=“long-time.js”></script> <script type=“text/javascript” src=“I-am-bocked.js”></script> post-IE8 browsers do asynchronous downloading

27. Non-blocking JavaScript defer attribute async attribute iframe document.write XHR injection Commented Javascript JavaScript downloaded as Image & Object …

28. Dynamic Script Tag function createScript(js) { var script = document.createElement(‘script’); script.type = ‘text/javascript’; script.async = “true”; var head = document.getElementsByTagname(‘head’)[0]; head.appendChild(script); }

29. Execution Order Matters Execution order is not guaranteed to be preserved for asynchronous script loading YUI 3 is born to solve execution order problem each module payload is not executed until all dependencies are ready

30. Don’t Get Excited Too Early

31. Deficiency in YUI 3 Loader YUI().use blocks each other YUI().use(‘node’, function() { . . . }); YUI().use(‘event’, function() { . . . });

32. Deficiency in YUI 3 Loader Disabling combo makes each module loaded in sequence YUI({ combine: false }).use(‘node’, ‘event’, function() { . . . });

33. Prefetch YUI Loader hack http://bazaar.launchpad.net/~launchpad-pqm/lazr-js/toolchain/annotate/188/src-js/lazrjs/loader/prefetch.js

34. Flickr Lesson #1 Firewall can cut your long URL http://yui.yahooapis.com/combo?3.2.0/build/yui/yui-min.js&3.2.0/build/oop/oop-min.js&3.2.0/build/event-custom/event-custom-min.js&3.2.0/build/event/event-base-min.js&3.2.0/build/pluginhost/pluginhost-min.js&3.2.0/build/attribute/attribute-min.js&3.2.0/build/dom/dom-min.js&3.2.0/build/dom/dom-style-ie-min.js&3.2.0/build/node/node-min.js&3.2.0/build/event/event-delegate-min.js&3.2.0/build/base/base-min.js&3.2.0/build/anim/anim-min.js&3.2.0/build/node/align-plugin-min.js&3.2.0/build/classnamemanager/classnamemanager-min.js&3.2.0/build/intl/intl-min.js&3.2.0/build/console/lang/console.js&3.2.0/build/event/event-synthetic-min.js&3.2.0/build/event/event-focus-min.js&3.2.0/build/widget/widget-min.js&3.2.0/build/dump/dump-min.js&3.2.0/build/substitute/substitute-min.js&3.2.0/build/console/console-min.js&3.2.0/build/plugin/plugin-min.js&3.2.0/build/console/console-filters-min.js&3.2.0/build/cookie/cookie-min.js&3.2.0/build/dom/dom-style-ie-min.js&3.2.0/build/event/event-resize-min.js&3.2.0/build/event/event-mouseenter-min.js&3.2.0/build/dd/dd-min.js&3.2.0/build/dd/dd-gestures-min.js&3.2.0/build/dd/dd-drop-plugin-min.js&3.2.0/build/dd/dd-plugin-min.js&3.2.0/build/event/event-touch-min.js&3.2.0/build/event-gestures/event-move-min.js&3.2.0/build/dd/dd-gestures-min.js&3.2.0/build/dataschema/dataschema-base-min.js&3.2.0/build/dataschema/dataschema-array-min.js&3.2.0/build/cache/cache-base-min.js&3.2.0/build/querystring/querystring-stringify-simple-min.js&3.2.0/build/io/io-base-min.js&3.2.0/build/json/json-min.js&3.2.0/build/dataschema/dataschema-json-min.js&3.2.0/build/dataschema/dataschema-text-min.js&3.2.0/build/dataschema/dataschema-xml-min.js&3.2.0/build/datasource/datasource-min.js

35. Flickr Lesson #2 Sexy URL is not welcome http://… &xxw.js&xxx.js&…

36. Multiple Pages Page A module A + B + C + D + E + X Page B module A + B + C + D + E + Y Page C module A + B + C + D + Z

37. YUI 3 in Action

38. Widget Class Diagram

39. Code Reuse Y.extend Y.augment Y.clone //deep copy by value Y.merge //mix-in multiple objects Y.aggregate

40. Powerful Y.mix Y.mix(r, s, ov, wl, mode, merge) mode: 0. object to object 1. prototype to prototype 2. prototype to prototype and object props 3. prototype to object 4. object to prototype

41. EventTarget publish fire on before after

42. Attribute set get

43. Base Initializer destrutor static property NAME as event prefix

44. Widget render renderUI bindUI syncUI

45. Plugin Y.namespace('QPlus').DigPlugin = Y.Base.create('Dig', Y.Plugin.Base, [], { //prototypal properties }, { // static properties });

46. Plugin Prototypal Properties Initializer destuctor

47. Plugin Static Properties NS Mandatory Used as host property name to reference plugin

48. Use Plugin plug Trigger initializer unplug Trigger destructor

49. AOP in YUI3 doBefore/onHostEvent/doAfter Y.SamplePlugin = Y.Base.create(‘sample’, Y.Plugin.Base, [], { initializer: function() { this.doBefore(‘someMethod’, function() { … } ); } }, { NS: ‘sample’ } );

50. Custom Event Application Level De-coupling Identified by string

51. YUI 2 Custom Event this.myEvent = new YAHOO.util.CustomEvent(‘myEvent’); this.myEvent.fire(); instance.myEvent.subscribe(doSomething);

52. YUI 3 Custom Event Y.fire(‘chengguan-coming’, 1, 2, 3); Y.on(‘chengguan-coming’, function(arg1, arg2, arg3) { . . . });

53. Advanced Custom Event this.publish(‘myEvent’, { broadcast: 2, //broadcast to all YUI instances defaultFn: handler // default event handler } ); this.fire(‘myEvent’); instance.on(‘myEvent’, doSomething);

54. Consistent Event API instance.on(‘click’, onClick); instance.on(‘myEvent’, doSomething);

55. Synthetic Event Extend DOM event Y.Event.define(‘flick’, { on: function(node, subscription, notifier) { }, detach: function(node, subscription notifier) { } });

56. Frontend Performance Improvments

57. No iframe iframe is slow iframerequires one more HTTP roundtrip iframe makes your application complicated

58. Flush Early Flush early and user view result early Flush early and external resources starts downloading early

59. MVC might hurt your performance Model View Controller

60. How ySymfony MVC works <head> </head> <body> <div id=“hd”></div> <div id=“bd”> <?php echo $sf_content?> </div> <div id=“ft”></div> </body> Lib Action Template

61. Enable Early Flush in ySymfony Don’t use layout setLayout(false) Fetch partial and flush it in Action getPartial flush Customize web response class to avoid head() after flush()

62. Don’t <html> . . . <body> <div> <div id=‘hd’></div> <?php flush(); ?> <? // some browser would not render till getting closing tag ?> <div id=‘bd’></div> <?php flush(); ?> <div id=‘ft’></div> </div> </body> </html>

63. Do <html> . . . <body> <div id=‘hd’></div> <?php flush(); ?> <div id=‘bd’></div> <?php flush(); ?> <div id=‘ft’></div> </body> </html>

64. JavaScript Loading Strategy

65. JavaScript Loading Strategy Dynamic Script Tag Concatenate JavaScript into single file with FUSE

66. Users are Not Patient User might start interact with the page before its JavaScript module is loaded It is not good to not respond to user interaction

67. Put User Actions into Queue

68. Event-Binder: A Tale of Two JavaScripts Inline Script Prevent default behavior Show progressive UI Put event into queue External Script Flush events from queue Hide progressive UI Remove former event handler

69. Just at Scratch Line

70. YUI 3 Resources http://developer.yahoo.com/yui/3/ http://yuiblog.com/ http://twitter.com/miraglia/yui/members yui-users@yahoo-inc.com

71. Web Performance Resources http://stevesouders.com/ http://www.perfplanet.com/ Velocity

72. Thanks