Your SlideShare is downloading. ×
0
Livestand                               LearningsWednesday, November 9, 201152
Livestand                                     Learnings               http://blog.jeffreymcmanus.com/157/learnings-is-a-st...
The next hour of your life*                    • Livestand                    • WebApp, Native                    • YUI   ...
The next hour of your life*                    • Livestand                    • WebApp, Native                    • YUI   ...
Livestand                              • Rich Content Presentation                              • Highly Customizable Cont...
Decisions, Decisions                              Native?                              WebApp?Wednesday, November 9, 20117...
Native       • Runtime(s) which can access device h/w       • Runtime(s) which may perform better       • Runtime(s) acros...
WebApp   • A common runtime across devices - shared code   • A runtime we have (experienced) developers for   • An open ru...
Hybrid   • A common runtime across devices - shared code   • A runtime we have (experienced) developers for   • An open ru...
Livestand     • Virtually all of the UI and App Logic is JS, HTML, CSS     • Native Services LayerWednesday, November 9, 2...
Livestand     • Virtually all of the UI and App Logic is JS, HTML, CSS     • Native Services Layer                • Multi-...
YUI                              • Modules, Dependencies                              • JS Utils (oop, each, bind ...)    ...
Modules and Dependencies                                           News                                                   ...
Modules and Dependencies                                            News                                                  ...
Modules and Dependencies                                                          News                                    ...
Modules and Dependencies                                                                        News                      ...
Modules and Dependencies                                                                        News                      ...
Modules and Dependencies                                                                Stocks                            ...
Modules and Dependencies                                                                        News                      ...
Node, Event, Gestures           Going Through 10,000 Lines of Code With                    A Fine Toothed CombWednesday, N...
Node, Event, Gestures           Going Through 10,000 Lines of Code With                    A Fine Toothed CombWednesday, N...
Node & NodeListWednesday, November 9, 201122:43 (2.4min) Aside from the abstraction, you also get sugar - NodeList iterati...
Node & NodeList           item = e.target.ancestor(li[data-name]);           icon.getComputedStyle(backgroundImage);Wednes...
Node & NodeList   node.all([data-image],[data-bg-image]).each(         function(node){               ...               anc...
Node & NodeList                  children = node.get(childNodes);                  ...                  while (parent.get(...
EventWednesday, November 9, 201124:00 (1.5 min) Same for event. Sugar: once, delegate, handle.detach()
Event                              this.handle = btn.on(                                  click,                          ...
Event                              Y.one(window).on(                                 webviewWillAppear,                   ...
Event                              Y.one(#foreground).once(                                 contentready,                 ...
Gestures   • flick            zodiac.on(flick, handleZodiacFlick);   • gesture movestart, move, moveend            publica...
Wednesday, November 9, 201127.20 (1:40min) What a gesture/synthetic event impl looks like. Ability to add low-level“gatewa...
Y.Event.define(EVENTS.TAP, {   })Wednesday, November 9, 201127.20 (1:40min) What a gesture/synthetic event impl looks like...
Y.Event.define(EVENTS.TAP, {        var EVENTS = TOUCH ? {           START : touchstart           ...        } : {        ...
Y.Event.define(EVENTS.TAP, {        ...        gestureStart : function(...) {           // Right/middle clicks aren’t a ta...
Feeding Back Into YUI          • Loader : Pre-compute dependencies off device          • Get : Parallel Dispatch Support  ...
ScrollView      • Scale             10’s of instances / page      • H/W Acceleration Memory Usage             Limit GPU Co...
Offline Loader                                         5.2s                                         2.9sWednesday, Novembe...
JS ProfilerWednesday, November 9, 201138:27 (1.5min), 3.00 demo: Awesome on-device profiling support (hoping to open source...
JS    • Most JS cost impact is around retrieving and parsing code    • Minification reduces parsing costs - parsing costs ...
CSS   • H/W Acceleration Has Its Price        •     There’s a significant memory cost                 •Flipping from 3D to...
Wednesday, November 9, 201150.47 (4min) Interesting Trace information. Hooks added to WebCore, show trace from JSlayer to ...
elem.focus() causes layout()?   willLayoutImpl:    1 WebCore                   WebCore::InspectorInstrumentation::willLayo...
get scrollLeft cause style recalc?   willRecalculateStyleImpl:    1 WebCore             WebCore::InspectorInstrumentation:...
get offsetWidth causes style recalc?   willRecalculateStyleImpl:    1 WebCore             WebCore::InspectorInstrumentatio...
HTML         •      Templating - Handlebars/Mustache               •      Pre-build Templates : HTML t0 JS               •...
YQL - Data                       • Pre-generated Data                              • Offload Join/Aggregation costs to Moj...
Hybrid                              • Bridging Technique/Costs                                     • XHR/Background URL ac...
Aside from “Wear Sunscreen”  • (Really) Understand the technologies you’re working with  • IO, Data Access costs and DOM a...
Livestand Content Thanks To:                              Andres Garza                              Curtis Harvey         ...
Upcoming SlideShare
Loading in...5
×

Livestand : Learnings. YUI Conf 2011

1,955

Published on

A detailed look into the unique engineering challenges and solutions which went into delivering a key Yahoo! product that needed to provide a rich cross-device application without compromising on the 'native' experience.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,955
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
21
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Transcript of "Livestand : Learnings. YUI Conf 2011"

  1. 1. Livestand LearningsWednesday, November 9, 201152
  2. 2. Livestand Learnings http://blog.jeffreymcmanus.com/157/learnings-is-a-stupid-stupid-word/Wednesday, November 9, 201152
  3. 3. The next hour of your life* • Livestand • WebApp, Native • YUI • JS • CSS • HTML • YQL, Data • HybridWednesday, November 9, 20112.49 (2min)
  4. 4. The next hour of your life* • Livestand • WebApp, Native • YUI • JS • CSS • HTML • YQL, Data • Hybrid * I completely understand if this suddenly makes you rethink your path in life and you’d like to leave to catch the next flight to HawaiiWednesday, November 9, 20112.49 (2min)
  5. 5. Livestand • Rich Content Presentation • Highly Customizable Content • Publishers - Custom Content Experiences • Users - Personalized Experiences • Shared Experience Across Devices • Rich AdsWednesday, November 9, 20115.40 (3min), Demo (2min). Livestand - more than a “digital magazine”. Heavy duty Y!infrastructure driving content personalization. Target devices: Not just iOS, or even iOS +Android. Anything which runs a Web stack.
  6. 6. Decisions, Decisions Native? WebApp?Wednesday, November 9, 20117.24
  7. 7. Native • Runtime(s) which can access device h/w • Runtime(s) which may perform better • Runtime(s) across which we couldn’t reuse code • Runtime(s) we’d need to find developers for • Closed runtime(s)Wednesday, November 9, 201110:30 (3min)
  8. 8. WebApp • A common runtime across devices - shared code • A runtime we have (experienced) developers for • An open runtime • A runtime with limited access to the device h/w • A runtime which may have performance constraintsWednesday, November 9, 201112.41 (2min)
  9. 9. Hybrid • A common runtime across devices - shared code • A runtime we have (experienced) developers for • An open runtime • A runtime with limited access to the device h/w • A runtime which may have performance constraintsWednesday, November 9, 201112.41 (2min)
  10. 10. Livestand • Virtually all of the UI and App Logic is JS, HTML, CSS • Native Services LayerWednesday, November 9, 201114:40 (2min). Most UI/App Logic sits in the WebStack. This is the logic which is most likely tochange on a weekly/monthly basis in reaction to UED/Product requirements. Native Layer isfairly stable/util layer. Doesn’t need to be modified (anywhere near) as frequently.
  11. 11. Livestand • Virtually all of the UI and App Logic is JS, HTML, CSS • Native Services Layer • Multi-User Authentication • YQL Caching • Local URL Routing, Package Management • Memory Management / Thread Control • Multi-WebView • Deployment ManagementWednesday, November 9, 201114:40 (2min). Most UI/App Logic sits in the WebStack. This is the logic which is most likely tochange on a weekly/monthly basis in reaction to UED/Product requirements. Native Layer isfairly stable/util layer. Doesn’t need to be modified (anywhere near) as frequently.
  12. 12. YUI • Modules, Dependencies • JS Utils (oop, each, bind ...) • Node • Event • Gestures - flick, move, tap* • Intl • IOWednesday, November 9, 201115:36 (1). Core areas of YUI used - Modules/Loader Dependency management (to drivecomposition of independently developed/custom modules onto a single page) and theabstraction layers - to not only drive the “Cross Device” product goal, but also so that asmore and more (independently developed) module code is shipped, we don’t need to worryabout whether or not module A has WebKit specific code and won’t port to Opera.
  13. 13. Modules and Dependencies News Device Sports Stocks Weather CloudWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  14. 14. Modules and Dependencies News Device Sports Stocks Weather Mojito MVC Framework YUI YChrome - Hybrid Bridge CloudWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  15. 15. Modules and Dependencies News Device Sports Stocks Weather Mojito MVC Framework YUI YChrome - Hybrid Bridge Package Repository YQL User Preferences CloudWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  16. 16. Modules and Dependencies News Device Sports Stocks Weather Mojito MVC Framework YUI YChrome - Hybrid Bridge Package Repository YQL User Preferences HTML Stocks Stocks Stocks CSS Cloud Feed Data Preferences JS Internal and External Modules Internal and External Publisher Data User Preferences and ProfilesWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  17. 17. Modules and Dependencies News Device Sports Stocks Weather Mojito MVC Framework YUI YChrome - Hybrid Bridge Package Repository YQL User Preferences HTML Stocks Stocks Stocks CSS Cloud Feed Data Preferences JS Internal and External Modules Internal and External Publisher Data User Preferences and ProfilesWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  18. 18. Modules and Dependencies Stocks News YUI.add(“stocks.model”, fn() { Sports Stocks Weather }, ..., {requires:[io, json]}) Mojito MVC Framework YUI YChrome - Hybrid Bridge YUI.add(“stocks.binder”, fn() { }, Package Repository ..., {requires:[ls-vitality-looper]}) YQL User Preferences HTML Stocks Stocks Stocks CSS Feed Data Preferences YUI.add(“stocks.controller”, fn() { JS }, ..., {requires:[mojito-partial-addon]}) Internal and External Modules Internal and External Publisher Data User Preferences and ProfilesWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  19. 19. Modules and Dependencies News Sports Stocks Weather Mojito MVC Framework YUI YChrome - Hybrid Bridge Package Repository YQL User Preferences HTML Stocks Stocks Stocks CSS Feed Data Preferences JS Internal and External Modules Internal and External Publisher Data User Preferences and ProfilesWednesday, November 9, 201120 (4.3min) Stocks, News, etc. are independent modular implementations (Mojits, as they arecalled in the Mojito world). Mojits are defined as YUI modules and have their own set ofdependencies. Mojito uses Loader (either at run-time or build-time - configurable), todetermine the composite set of dependencies which make up the page.
  20. 20. Node, Event, Gestures Going Through 10,000 Lines of Code With A Fine Toothed CombWednesday, November 9, 2011As mentioned before - don’t want to have to weed through 10,000 lines of independentlydeveloped, 3rd party code, in order to figure out which Mojit may be hardcoding WebKitreferences, or Firefox references ... and so may not work in the next environment we need tosupport. That’s why it makes sense to have an abstraction layer to work against (Node, Event,Gestures, IO etc.) even if you think you may not need it today.
  21. 21. Node, Event, Gestures Going Through 10,000 Lines of Code With A Fine Toothed CombWednesday, November 9, 2011As mentioned before - don’t want to have to weed through 10,000 lines of independentlydeveloped, 3rd party code, in order to figure out which Mojit may be hardcoding WebKitreferences, or Firefox references ... and so may not work in the next environment we need tosupport. That’s why it makes sense to have an abstraction layer to work against (Node, Event,Gestures, IO etc.) even if you think you may not need it today.
  22. 22. Node & NodeListWednesday, November 9, 201122:43 (2.4min) Aside from the abstraction, you also get sugar - NodeList iteration,setContent, ancestor, and even Array-like methods - push/pop/shift/unshift etc.
  23. 23. Node & NodeList item = e.target.ancestor(li[data-name]); icon.getComputedStyle(backgroundImage);Wednesday, November 9, 201122:43 (2.4min) Aside from the abstraction, you also get sugar - NodeList iteration,setContent, ancestor, and even Array-like methods - push/pop/shift/unshift etc.
  24. 24. Node & NodeList node.all([data-image],[data-bg-image]).each( function(node){ ... ancestor = ... ? node : node.ancestor([data-index]); node.one(.summary).setContent(art.title); ... } )Wednesday, November 9, 201122:43 (2.4min) Aside from the abstraction, you also get sugar - NodeList iteration,setContent, ancestor, and even Array-like methods - push/pop/shift/unshift etc.
  25. 25. Node & NodeList children = node.get(childNodes); ... while (parent.get(scrollHeight) < h && children.size()){ lastChild = children.shift(); node.appendChild(lastChild); }Wednesday, November 9, 201122:43 (2.4min) Aside from the abstraction, you also get sugar - NodeList iteration,setContent, ancestor, and even Array-like methods - push/pop/shift/unshift etc.
  26. 26. EventWednesday, November 9, 201124:00 (1.5 min) Same for event. Sugar: once, delegate, handle.detach()
  27. 27. Event this.handle = btn.on( click, onClickNextDay ); ... this.handle.detach();Wednesday, November 9, 201124:00 (1.5 min) Same for event. Sugar: once, delegate, handle.detach()
  28. 28. Event Y.one(window).on( webviewWillAppear, onWebviewAppeared );Wednesday, November 9, 201124:00 (1.5 min) Same for event. Sugar: once, delegate, handle.detach()
  29. 29. Event Y.one(#foreground).once( contentready, initView );Wednesday, November 9, 201124:00 (1.5 min) Same for event. Sugar: once, delegate, handle.detach()
  30. 30. Gestures • flick zodiac.on(flick, handleZodiacFlick); • gesture movestart, move, moveend publications.delegate(gesturemovestart, startPubEdit, [data-name]); publication.on(gesturemove, movePub); publication.once(gesturemoveend, endPubEdit); • tap node.delegate(tap, handleTap, [data-index]);Wednesday, November 9, 201125.41 (1.5min) The sugar also works for gestures. Aside from using flick, gesturemove*,Livestand developed their own Tap gesture which needs to be rolled back into YUI, to workaround the ~400ms click delay.
  31. 31. Wednesday, November 9, 201127.20 (1:40min) What a gesture/synthetic event impl looks like. Ability to add low-level“gateway” criteria before notifying listeners - a right click is not a tap, two fingers is not a tapetc.
  32. 32. Y.Event.define(EVENTS.TAP, { })Wednesday, November 9, 201127.20 (1:40min) What a gesture/synthetic event impl looks like. Ability to add low-level“gateway” criteria before notifying listeners - a right click is not a tap, two fingers is not a tapetc.
  33. 33. Y.Event.define(EVENTS.TAP, { var EVENTS = TOUCH ? { START : touchstart ... } : { START : mousedown ... }; on : function (...) { node.on(EVENTS.START, this.gestureStart ...); }, delegate : function (...) { ... }, ... })Wednesday, November 9, 201127.20 (1:40min) What a gesture/synthetic event impl looks like. Ability to add low-level“gateway” criteria before notifying listeners - a right click is not a tap, two fingers is not a tapetc.
  34. 34. Y.Event.define(EVENTS.TAP, { ... gestureStart : function(...) { // Right/middle clicks aren’t a tap gesture if (e.button && e.button !== 1) { return; } ... }, gestureEnd : function (...) { var endXY = TOUCHES ? [e.changedTouches[0].pageX,...] : [e.pageX,...]; ... // If the mouse/finger moved, it’s not a tap gesture if (Math.abs(endXY[0] - startXY[0]) < THRESHOLD && Math.abs(endXY[1] - startXY[1]) < THRESHOLD) { e.type = EVENTS.TAP; e.pageX = endXY[0]; e.pageY = endXY[1]; ... notifier.fire(e); } } })Wednesday, November 9, 201127.20 (1:40min) What a gesture/synthetic event impl looks like. Ability to add low-level“gateway” criteria before notifying listeners - a right click is not a tap, two fingers is not a tapetc.
  35. 35. Feeding Back Into YUI • Loader : Pre-compute dependencies off device • Get : Parallel Dispatch Support • Feature Testing : Cache Across Instances • K-Weight Reduction : Lighter Passthrough • Tap Gesture • ScrollViewWednesday, November 9, 201132.16 (5min) a) Moved Loader costs off-device, to a build-time step. Basically don’t do atrun-time what you could do a build-time. b) Added Get parallel dispatch support to 3.4.0Loader will be upgraded to work with it for 3.5.0 c) Maybe there’s some stuff we could cacheacross Y instances. e.g. Feature Test results. d). node-core - a passthrough abstraction layer,if you really just want to develop for iOS right now, but would like the safety net of being able
  36. 36. ScrollView • Scale 10’s of instances / page • H/W Acceleration Memory Usage Limit GPU Composite layer size, by only maintaining N of M pages of content in the DOM at a timeWednesday, November 9, 201135.06 (3min) Possible Lighter ScrollView, without custom events, for cases where you don’tneed a rich API to work with (ala NodePlugins).
  37. 37. Offline Loader 5.2s 2.9sWednesday, November 9, 201136.56 (2min) Savings by moving Loader off-device
  38. 38. JS ProfilerWednesday, November 9, 201138:27 (1.5min), 3.00 demo: Awesome on-device profiling support (hoping to open source!).Hooks into JavaScript core on the native side to collect function call data, on-device, anddumps trace data which is viewable in a slightly modified version of Android’s TraceView(modified to show stack trace).
  39. 39. JS • Most JS cost impact is around retrieving and parsing code • Minification reduces parsing costs - parsing costs • File I/O is expensive - Combo’ing JS is valuable, even on device • JIT compilation still not available for iOS UIWebViewsWednesday, November 9, 201143.16 (2min)
  40. 40. CSS • H/W Acceleration Has Its Price • There’s a significant memory cost •Flipping from 3D to 2D to try and free up memory introduces flicker •visibility:hidden reduces memory cost, but still has a runtime cost •Removing content from the DOM is better • translateZ introduces stacking context • Experimental/glitchy • Inlined Structural CSS • IO cost savings, and also to avoid CSS application race conditions with JS • Surprising Reflow and Style Recalculation TriggersWednesday, November 9, 201147 (3.5min)
  41. 41. Wednesday, November 9, 201150.47 (4min) Interesting Trace information. Hooks added to WebCore, show trace from JSlayer to WebCore.
  42. 42. elem.focus() causes layout()? willLayoutImpl: 1 WebCore WebCore::InspectorInstrumentation::willLayout(...) 2 WebCore WebCore::FrameView::layout(...) 3 WebCore WebCore::Document::updateLayout() 4 WebCore WebCore::Document::updateLayoutIgnorePendingStylesheets() 5 WebCore WebCore::Element::focus(...) 6 WebCore WebCore::jsElementPrototypeFunctionFocus(...) .. 9 JavaScriptCore JSC::Interpreter::execute(...)Wednesday, November 9, 201150.47 (4min) Interesting Trace information. Hooks added to WebCore, show trace from JSlayer to WebCore.
  43. 43. get scrollLeft cause style recalc? willRecalculateStyleImpl: 1 WebCore WebCore::InspectorInstrumentation::willRecalculateStyle(...) 2 WebCore WebCore::Document::recalcStyle(Node::StyleChange) 3 WebCore WebCore::Document::updateStyleIfNeeded() 4 WebCore WebCore::Document::updateLayout() 5 WebCore WebCore::Document::updateLayoutIgnorePendingStylesheets() 6 WebCore WebCore::Element::scrollLeft() const 7 WebCore WebCore::jsElementScrollLeft(...) 8 JavaScriptCore JSC::PropertySlot::getValue(...) const 9 JavaScriptCore JSC::JSValue::get(...) constWednesday, November 9, 201150.47 (4min) Interesting Trace information. Hooks added to WebCore, show trace from JSlayer to WebCore.
  44. 44. get offsetWidth causes style recalc? willRecalculateStyleImpl: 1 WebCore WebCore::InspectorInstrumentation::willRecalculateStyle(...) 2 WebCore WebCore::Document::recalcStyle(Node::StyleChange) 3 WebCore WebCore::Document::updateStyleIfNeeded() 4 WebCore WebCore::Document::updateLayout() 5 WebCore WebCore::Document::updateLayoutIgnorePendingStylesheets() 6 WebCore WebCore::Element::offsetWidth() 7 WebCore WebCore::jsElementOffsetWidth(...) 8 JavaScriptCore JSC::PropertySlot::getValue() const 9 JavaScriptCore JSC::JSValue::get() constWednesday, November 9, 201150.47 (4min) Interesting Trace information. Hooks added to WebCore, show trace from JSlayer to WebCore.
  45. 45. HTML • Templating - Handlebars/Mustache • Pre-build Templates : HTML t0 JS • Many Templates, Single Use : Mustache may be better • <VIDEO> appears to have a memory leak, when resetting src • <VIDEO>, like <INPUT>, swallows touch events • Time Analysis • 200-300 ms after assigning a URL to a webview, before any ioWednesday, November 9, 20112min
  46. 46. YQL - Data • Pre-generated Data • Offload Join/Aggregation costs to Mojito Server • Offload Schema Normalization to YQL • Local, Native, Offline Cache • Work Around Promptless 5MB Web Storage Limit • Leverage Native Thread Management • Segregate Multi-User Databases • Down The Road • Pre-generated Seed SQL • Support Sparse Records • Native Connection Limit • YQL Connection - 4 connection limit (same as browser)Wednesday, November 9, 20113min. This is Huge! Mojito can run mojits on either the client or the (nodejs) server. So samemojit code can be used to dispatch YQL requests on the server, to offload YQL requestcombination/aggregation costs from device to the cloud. Huge!. Other than that, also makessense to offload data normalization costs from device to YQL. Chose native layer offlinecaching to work around 5MB limit in Web SQL storage. Also allowed us to distribute workload
  47. 47. Hybrid • Bridging Technique/Costs • XHR/Background URL access • Modifying window.location url • Native Object/Class exposed to JS • Caching YQL/Data Natively • Multi Webviews • Threading Concerns • Experiments • Using WebViews as WebWorkers • Native JSON ParsingWednesday, November 9, 2011Livestand used XHR, to have the JS client call the Native layer. Aside from not having to deal with window navigation, also allowed Native layer toavoid memory copy. XHR response pointer could just be moved to the payload created by the Native layer. Multi-WebViews were used to primethe basic stack for the page and user was switched between WebViews when moving from one type of page to the next, reducing time to initialview. However only 1 JS thread across WebViews, so had to be careful about when they were primed.
  48. 48. Aside from “Wear Sunscreen” • (Really) Understand the technologies you’re working with • IO, Data Access costs and DOM are still the key performance pieces • Progressive Enhancement is your friend • Don’t do at run time what you can do at build time • Think twice, tattoo once. If it’s on your face, thrice really wouldn’t hurt.Wednesday, November 9, 20112min JS/Web Developer moving from the one-step up formalization from a few years ago (OOdevelopment, separation of concerns, JS performance analysis) to areas where you really needto understand what the JS engines and browsers are doing (e.g. H/W acceleration). Overall IO/Parsing/DOM/Data Access turned out to be the biggest chunk of cost while rendering thepage (as opposed to pure run-time JS costs). Progressive enhancement is still valid and can
  49. 49. Livestand Content Thanks To: Andres Garza Curtis Harvey Daryl Low Ganesan Sriram Kris Giesing Ric Allinson Rob Simutis Me: Satyen Desai (sdesai@yahoo-inc.com)Wednesday, November 9, 20111min These folks not only provided a lot of the meaty content for this talk, but they alongwith many others contributed to Mojito, Livestand, YUI and YQL to deliver the experience asyou see it today.
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×