porting flickr to yui3 - f2e summit
DESCRIPTION
TRANSCRIPT
![Page 1: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/1.jpg)
Porting Flickr to YUI 3Ross Harmes
![Page 2: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/2.jpg)
Porting Flickr to YUI 3Lessons in Performance
Ross Harmes
![Page 3: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/3.jpg)
In August we launched a new photo page…
![Page 4: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/4.jpg)
We decided to completely demolish the old page and rebuild with YUI3
![Page 5: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/5.jpg)
Using YUI3 was a delight…
![Page 6: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/6.jpg)
…but blindly converting from 2 to 3 could lead to some problems
![Page 7: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/7.jpg)
The easy part: converting from YUI2 to 3
![Page 8: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/8.jpg)
The big secret: it's really easy, and mostly mechanical
![Page 9: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/9.jpg)
Events work in mostly the same way
![Page 10: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/10.jpg)
![Page 11: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/11.jpg)
DOM calls are now made off of nodes instead of Y.DOM
![Page 12: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/12.jpg)
![Page 13: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/13.jpg)
Events and DOM interactions are probably 90% of the code for most sites
![Page 14: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/14.jpg)
We found that there were two ways to do it
![Page 15: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/15.jpg)
1. Convert just enough to make it work in YUI3
![Page 16: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/16.jpg)
2. Rewrite it using YUI3 idioms
![Page 17: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/17.jpg)
We used both techniques
![Page 18: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/18.jpg)
The bottom line: give it a try
![Page 19: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/19.jpg)
The harder part: making your converted code fast
![Page 20: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/20.jpg)
1. Action queuing
![Page 21: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/21.jpg)
One of the first perf. recommendations is to move all the JS to the bottom of the page
![Page 22: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/22.jpg)
This means UI elements that need JS to work will fallback to the non-JS case until the scripts load
![Page 23: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/23.jpg)
Our solution: Action Queuing
![Page 24: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/24.jpg)
This isn't making the JS load faster
![Page 25: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/25.jpg)
Getting creative with the loading indicators helps
![Page 26: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/26.jpg)
2. Combo handler
![Page 27: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/27.jpg)
We use a lot of small JS modules on the page. This made our combo URLs very long:http://l.yimg.com/g/combo.gne?event/event-min.js&j/query-string-args.js.v85201.14&j/flickr_location_search.js.v85793.14&j/
flickr_nav.js.v92497.14&base/base-min.js&anim/anim-min.js&dump/dump-min.js&datatype/datatype-xml-min.js&substitute/substitute-min.js&queue-promote/queue-promote-min.js&io/io-min.js&json/json-min.js&j/flickr_api.js.v93039.14&j/history-manager.js.v90829.14&j/photo-data.js.v92868.14&j/context-data.js.v92557.14&j/context-manager.js.v91220.14&j/sprintf.js.v90343.14&j/transjax-base.js.v85036.14&j/focus-tracker.js.v93044.14&event-simulate/event-simulate-min.js&j/photo-button-bar-transjax-en-us.js.v92588.14&j/image-fader.js.v85225.14&j/number-transjax-en-us.js.v90582.14&j/number.js.v87306.14&j/photo-filmstrip-transjax-en-us.js.v90793.14&j/photo-filmstrip.js.v92881.14&event/event-synthetic-min.js&j/event-annotations.js.v91160.14&j/event-mousedrag.js.v90789.14&j/math.js.v87441.14&j/fave-star.js.v91965.14&j/global-dialog-transjax-en-us.js.v85507.14&j/global-dialog-zeus.js.v92830.14&j/keyboard-shortcut-manager.js.v92698.14&node/node-event-simulate-min.js&j/photo-permalink.js.v91170.14&j/yahoo/autocomplete_2.5.1-zeus.js.v92829.14&j/bo-selecta-transjax-en-us.js.v90792.14&j/bo-selecta-zeus.js.v91866.14&cookie/cookie-min.js&j/dejaview-zeus.js.v90642.14&j/photo-people-transjax-en-us.js.v90822.14&j/photo-people-controller.js.v88235.14&j/input-hint.js.v86479.14&j/photo-comments-transjax-en-us.js.v92483.14&j/swfobject.js.v85491.14&j/photo-comments.js.v92853.14&j/photo-keyboard-shortcuts.js.v92892.14&j/box-host.js.v89305.14&j/photo-notes-transjax-en-us.js.v93010.14&j/string-filters.js.v91087.14&j/photo-notes-zeus.js.v93044.14&j/excanvas.js.v39120.14&j/bitmap-text-zeus.js.v87486.14&j/bitmap-type-silkscreen.js.v87486.14&j/photo-sidebar-transjax-en-us.js.v90794.14&stylesheet/stylesheet-min.js&j/photo-sidebar.js.v92813.14&j/photo-context-menu-transjax-en-us.js.v90793.14&j/photo-lightbox-transjax-en-us.js.v92868.14&j/ywa.js.v89879.14&j/photo-ywa-tracking.js.v92723.14&j/occult.js.v90963.14&j/yahoo-ult.js.v92052.14&j/photo-zeus.js.v93054.14&j/photo-people-list.js.v92992.14&j/photo-button-bar.js.v92891.14&j/photo-context-menu.js.v92706.14&j/photo-lightbox.js.v93054.14&j/insitu-transjax-en-us.js.v90792.14&j/insitu-zeus.js.v91793.14&j/photo-insitu.js.v91169.14&j/photo-group-invites-transjax-en-us.js.v90793.14&j/photo-group-invites.js.v91020.14&j/tagrs_zeus-transjax-en-us.js.v93081.14&j/tagrs_zeus.js.v93081.14&j/photo-sidebar-owner-transjax-en-us.js.v91626.14&j/photo-sidebar-owner.js.v92860.14&j/photo-sidebar-admin.js.v92656.14&j/photo-geolocation-transjax-en-us.js.v92191.14&j/photo-geolocation.js.v92894.14&j/personmenu-transjax-en-us.js.v90792.14&j/personmenu-zeus.js.v92796.14&j/share-menu-zeus-transjax-en-us.js.v92581.14&j/share-menu-zeus.js.v92971.142,792 characters
![Page 28: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/28.jpg)
Turns out that a small but vocal minority of users sit behind firewalls that restrict URL length
![Page 29: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/29.jpg)
The algorithm we settled on was string substitution:
http://l.yimg.com/g/combo.gne?event/event-min.js&j/.H-.K.A.vNKE8&j/.CP-.U-.DE.A.vKEJx&j/.J_.BR_.CA.A.vKYke&j/.J_.DB.A.vPpBR&base/base-min.js&anim/anim-min.js&dump/dump-min.js&datatype/datatype-xml-min.js&substitute/substitute-min.js&queue-promote/queue-promote-min.js&io/io-min.js&json/json-min.js&j/.J_.DS.A.vPFJk&j/.CE-.K.A.vNy2Z&j/.B-.BY.A.vPADv&j/.H-.BY.A.vPrpi&j/.CC.A.vNiA4&j/.C-.BL.A.vPL3k&j/.CV-.CH.A.vPFSX&event-simulate/event-simulate-min.js&j/.B-.T-.CI-.C-.F.A.vPJPD&j/.CW-.CU.A.vKFrV&j/.Y-.C-.F.A.vNqG8&j/.Y.A.vLKiR&j/.B-.M-.C-.F.A.vPKTH&j/.B-.M.A.vPKTH&event/event-synthetic-min.js&j/.G-.BD.A.vNHSF&j/.G-.BO.A.vNwR2&j/.DL.A.vLPjB&j/.CX-.CY.A.vP8NB&j/.X-.W-.C-.F.A.vKPQ8&j/.X-.W-.D.A.vPzvZ&j/.Q-.BX-.K.A.vPvAp&node/node-event-simulate-min.js&j/.B-.BP.A.vNJaV&j/.CM/.BA_2.5.1-.D.A.vPzug&j/bo-.S-.C-.F.A.vNwWc&j/bo-.S-.D.A.vP5RV&cookie/cookie-min.js&j/.BZ-.D.A.vNstz&j/.B-.L-.C-.F.A.vNxPV&j/.B-.L-.BH.A.vMdVz&j/.CN-.DD.A.vLjHZ&j/.B-.O-.C-.F.A.vPpcH&j/.BM.A.vKPmx&j/.B-.O.A.vPHa6&j/.B-.Q-.BQ.A.vPBmT&j/.DR-.DG.A.vMLJp&j/.B-.BE-.C-.F.A.vPHP2&j/.U-.CG.A.vNFGP&j/.B-.BE-.D.A.vPFSX&j/.BV.A.vm3Ux&j/.Z-.DK-.D.A.vLQEc&j/.Z-.DJ-.BJ.A.vLQEc&j/.B-.I-.C-.F.A.vPKTH&stylesheet/stylesheet-min.js&j/.B-.I.A.vPLW4&j/.B-.H-.BB-.C-.F.A.vNwXV&j/.B-.N-.C-.F.A.vPADv&j/.CL.A.vN4N4&j/.B-.CL-.BW.A.vPwkv&j/.CF.A.vNC22&j/.CM-.DO.A.vPboB&j/.B-.D.A.vPGbc&j/.B-.L-.CZ.A.vPJpv&j/.B-.T-.CI.A.vPKDV&j/.B-.H-.BB.A.vPvQc&j/.B-.N.A.vPGbc&j/.B-.DM-.CO-.C-.F.A.vNwXV&j/.B-.DM-.CO.A.vNDHi&j/.BF_.D-.C-.F.A.vPGYK&j/.BF_.D.A.vPGYK&j/.B-.I-.CQ-.BK-.C-.F.A.vNwZD&j/.B-.I-.CQ-.BK.A.vLWQP&j/.B-.I-ad.E.A.vPukZ&j/.B-.R-.C-.F.A.vPfwg&j/.B-.R.A.vPBqk&j/.CB-.C-.F.A.vNwWc&j/.CB-.D.A.vPyvn&j/.DN-.BB-.D-.C-.F.A.vPs7F&j/.DN-.BB-.D.A.vPM5F
1,702 characters (40% smaller)
![Page 30: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/30.jpg)
This fixes the problem for almost all users… but Sonicwall turns out to have a limit below 1600 characters
![Page 31: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/31.jpg)
And then there was the XXX problem
![Page 32: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/32.jpg)
3. Convenience methods
![Page 33: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/33.jpg)
We noticed that on IE8/7, scrolling was very jerky
![Page 34: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/34.jpg)
The culprit: pollers in Y.delegate() and Y.on()
![Page 35: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/35.jpg)
We replaced both with Y.all().on(), and more customized solutions
![Page 36: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/36.jpg)
Convenience methods have a cost
![Page 37: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/37.jpg)
4. Fragment fetcher
![Page 38: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/38.jpg)
On most pages, there are a lot of low percentage actions
![Page 39: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/39.jpg)
Optimize for the 99% case; don’t load markup, CSS or JS for rarely used actions
![Page 40: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/40.jpg)
Loading indicators can help here as well
![Page 41: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/41.jpg)
The long-term part: a culture of performance
![Page 42: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/42.jpg)
The old metrics are meaningless
![Page 43: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/43.jpg)
What do we measure?
![Page 44: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/44.jpg)
What is the best sampling rate?
![Page 45: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/45.jpg)
Put the graphs in a place where FEs will see them
![Page 46: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/46.jpg)
Browsers behave so differently that lumping them in together hides
successes
![Page 47: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/47.jpg)
In order to measure just the changes you make, you need a reference
system
![Page 48: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/48.jpg)
![Page 49: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/49.jpg)
In closing…
![Page 50: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/50.jpg)
YUI3 is amazing – give it a try!
![Page 51: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/51.jpg)
If you can't have real performance, fake it
![Page 52: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/52.jpg)
Dig deeply into the JS library you use
![Page 53: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/53.jpg)
Measure the moments important to your page
![Page 54: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/54.jpg)
And NEVER include XXX in a URL
![Page 55: Porting Flickr to YUI3 - F2E Summit](https://reader037.vdocuments.net/reader037/viewer/2022102922/54bd88ff4a7959704c8b45a2/html5/thumbnails/55.jpg)
Thank you!
[email protected] at: lanyrd.com/spdm
Photo creditshttp://www.flickr.com/photos/markscott/1117392453/http://www.flickr.com/photos/cybertoad/2102752062/http://www.flickr.com/photos/whiteoakart/471538245/http://www.flickr.com/photos/wwarby/3016567069/http://www.flickr.com/photos/richoz/3791167457/http://www.flickr.com/photos/lin/372711782/http://www.flickr.com/photos/cdhc/274211112/http://www.flickr.com/photos/ennor/353250218/http://www.flickr.com/photos/jensaar/386863409/http://www.flickr.com/photos/sterlic/4299631538/http://www.flickr.com/photos/candyflossblackmarket/1139767634/http://www.flickr.com/photos/bobcatrock/2653120251/
http://www.flickr.com/photos/jm2c/3677835375/http://www.flickr.com/photos/kevinkyen/4721020630/http://www.flickr.com/photos/sindykids/2666402195/http://www.flickr.com/photos/simonhua/4696240744/http://www.flickr.com/photos/inkiboo/203350186/http://www.flickr.com/photos/sahlgoode/5012048467/http://www.flickr.com/photos/sshb/3981130921/http://www.flickr.com/photos/blueskin808/1422588776/http://www.flickr.com/photos/roadsidepictures/1389358202/http://www.flickr.com/photos/boliston/3958674786/http://www.flickr.com/photos/httpwwwactionpixsmarukocom/4812699768/