Netflix Webkit-Based UI for TV Devices Matt McCarthy & Kim Trott Netflix July 29, 2011 Topics 1. 2. 3. 4. 5. What is Webkit TV UI? Why web? A/B testing Engineering for UI variation Performance for TV devices whatвЂ™s the big deal? WEBKIT TV UI 2вЂ™ UI vs. 10вЂ™ UI 2вЂ™ UI 10вЂ™ UI Some Netflix Webkit TV UI devices вЂ¦and many more User Agent IвЂ™m an open web. IвЂ™m a WebKit. we did think this through WHY WEB? Dynamic Updates Common Technology Dynamically Add Locale Support A/B Testing because you donвЂ™t know until you try A/B TESTING 2007 Little Iteration in Native UI 2009 Rapid Iteration in Web UI 2010 2010 2010 2010 Core Metrics вЂў Retention вЂў Streaming hours Which UI led to the most streaming? Special 57.1% 56.3% Navigator Plus 58.5% Secondary Metrics вЂў Application launch count вЂў Hotkey engagement count вЂў Discovery source (e.g. browsing, search, similar) вЂў Which TV/movie category вЂў Etc. What else does Netflix test? вЂў Navigation schemes вЂў Visual designs вЂў Major UI concepts вЂў Minor UI variations вЂў Emphasis on movies vs. TV вЂў Taste preference input (stars, surveyвЂ¦) вЂў Presentation & explanation of recommendations вЂў Movie discovery sources & algorithms (Queue, similar titles, genres, personalized genresвЂ¦) вЂў Recommendation algorithms вЂў Movie list length, selection, & quantity вЂў Website button placement, size & behavior вЂў Website page load time вЂў Box art size вЂў Link/button labels вЂў Streaming encoding quality вЂў Streaming startup time вЂў Sign-up design вЂў Sign-up wizard flow вЂў Almost every new feature вЂ¦And a lot of other stuff over the last 10 years not just вЂњvery carefullyвЂќ HOW WE SUPPORT VAST VARIATION Loose Coupling вЂў Events вЂў Dependency injection Example: Special Solve These 1. Which component handles the next keystroke? 2. How & where do we model navigation between components? 3. вЂ¦And also, these components should be reusable between completely different UIs Solutions WeвЂ™ve Tried & Abandoned вЂў Tight coupling вЂў Mediator pattern вЂў DOM focus & events Current Solution: State Transition System вЂў States as the C in MVC вЂ“Can drive state transitions вЂў States are event handling contexts вЂ“User input вЂ“Programmatic events Search Input State Search Compound State Search Results State building a lean, mean content browsing machine PERFORMANCE AND MEMORY Why do we worry? вЂў Single-page, long-lived application вЂў High volume of data & images вЂў Require high performance вЂў Range of device capabilities Device Ecosystem Video Memory CPU Main Memory Memory bus speed GPU CPU Architecture Graphics driver Network stack Device Ecosystem CPU: 3.2 GHz GPU: 550 MHz Memory: 512 MB CPU: 600 MHz пѓ 3.2 GHz Memory: 88 MB пѓ 512 MB Memory Budget Total Memory - Operating System - Webkit - Netflix SDK - Network/Video Buffer UI Budget Progressive enhancement Baseline Enhanced Animations None enabled All enabled Request throttling 5 concurrent 20 concurrent Cache sizes Small Large Data pre-fetching Delayed, Small batches Frequent, Larger batches Perceived Performance 0.1 second: Feeling of instantaneous response 1.0 second: Keeps flow of thought seamless 10 seconds: Keeps the userвЂ™s attention Nielsen 2010, 1993; Miller 1968; Card et al. 1991 Ways to Improve Responsiveness вЂў Provide immediate feedback on user input вЂў Split up long running process вЂў Mask and reduce perceived wait times вЂў Background work and anticipate common requests Ways to Improve Responsiveness вЂў Wait until the user settles for expensive operations or paints вЂў Avoid DOM changes at the beginning of / during animations вЂў Tune delays to find the sweet spot Provide Visual Cues Performance Evolution: Scrolling Rows NaГЇve implementation вЂў Progressively inserted new DOM nodes вЂў Animated very large DOM parent вЂў Height ever-growing of DOM parent 1 2 3 4 5 6 Bad: Performance degraded as you scrolled Performance Evolution: Scrolling Rows Optimized implementation 1 2 вЂў Recycle DOM nodes вЂў Animate each row individually вЂў Delaying modifying row until comes into viewport or the user settles 3 4 5 1 2 Good: Performance consistent regardless of location Software (CPU) = slower Hardware (GPU) = faster CSS = Software Image = Hardware вЂў Avoid CSS gradients, boxshot shadows вЂ“ Use images instead вЂў Example: Full-screen CSS radial gradient вЂ“ Paints were 13 times faster without it Eliminate paints Accelerated Compositing вЂў Enables GPU acceleration of compositing parts of the page вЂў Greatly benefits CSS animations Accelerated Compositing DOM Tree -> Render Tree -> RenderLayer Tree Software path вЂў Changes to a render layer require repainting all overlapping layers Hardware path вЂў Some render layers paint to their own backing surface (compositing layer) вЂў Changes to a layer only repaint the contents of that layer Several ways to create layers вЂў 3D transforms вЂў Opacity changes вЂў Accidental вЂ“ Overlapping a layer вЂ“ Render engine Leveraging layers вЂў Safe CSS properties вЂ“ Transforms вЂ“ Opacity вЂў Un-safe вЂ“ Any other CSS properties вЂ“ DOM manipulation Tips вЂў Keep layers small вЂ“ DonвЂ™t inadvertently create gigantic layers вЂ“ Memory consumption = width x height x 4 (bit depth) вЂў Animate smaller areas rather than large parts of the screen вЂў Trial and error, testing important Show Compositing Borders Memory вЂў Avoid unbounded growth вЂў Minimize the number of throwaway objects вЂў Use closures sparingly & only where necessary вЂў Dynamically load and unload code i was led to believe there would be flying cars WHATвЂ™S NEXT? Matt McCarthy вЂ“ [email protected] вЂ“ @dnl2ba Kim Trott вЂ“ [email protected] вЂ“ @ktrott00 QUESTIONS?