SlideShare a Scribd company logo
1 of 46
Download to read offline
Netflix Webkit-Based UIfor TV Devices,[object Object],Matt McCarthy & Kim Trott,[object Object],NetflixJuly 29, 2011,[object Object]
These slides were originally designed for a presentation. They’ll make much more sense if you read the speaker notes.,[object Object],(On Slideshare, as of 8/11, speaker notes appear beneath the slide show.),[object Object],README,[object Object]
What is Webkit TV UI?,[object Object],Why web?,[object Object],Engineering for UI variation,[object Object],Performance for TV devices,[object Object],Topics,[object Object]
Webkit TV UI,[object Object],what’s the big deal?,[object Object]
2’ UI vs. 10’ UI,[object Object],2’ UI,[object Object],10’ UI,[object Object]
Some Netflix Webkit TV UI devices,[object Object],…and many more,[object Object]
User Agent,[object Object],I’m an open web.,[object Object],I’m a WebKit.,[object Object]
Why Web?,[object Object],we did think this through,[object Object]
Dynamic Updates,[object Object]
Common Technology,[object Object]
Dynamically Add Locale Support,[object Object]
A/B Testing,[object Object]
How we support vast variation,[object Object],not just “very carefully”,[object Object]
Example: “Special” UI,[object Object]
Which component handles the next keystroke?,[object Object],How & where do we model navigation between components?,[object Object],…And also, these components should be reusable between completely different UIs,[object Object],Solve These,[object Object]
Tight coupling,[object Object],Mediator pattern,[object Object],DOM focus & events,[object Object],Solutions We’ve Tried & Abandoned,[object Object]
States as the C in MVC,[object Object],Can drive state transitions,[object Object],States are event handling contexts,[object Object],User input,[object Object],Programmatic events,[object Object],Current Solution: State Transition System,[object Object]
Search Input,[object Object],State,[object Object],Search Input,[object Object],State,[object Object],Search Compound,[object Object],State,[object Object],Search Results,[object Object],State,[object Object]
Search Input,[object Object],State,[object Object],Search Compound,[object Object],State,[object Object],Search Results,[object Object],State,[object Object],Search Results,[object Object],State,[object Object]
Events,[object Object],Dependency injection,[object Object],Loose Coupling,[object Object]
PERFORMANCE AND MEMORY,[object Object],building a lean, mean content browsing machine,[object Object]
Single-page, long-lived application,[object Object],High volume of data & images,[object Object],Require high performance,[object Object],Range of device capabilities,[object Object],Why do we worry?,[object Object]
Device Ecosystem,[object Object],Video Memory,[object Object],CPU,[object Object],GPU,[object Object],Main Memory,[object Object],CPU Architecture,[object Object],Graphics driver,[object Object],Network stack,[object Object],Memory bus speed,[object Object]
Device Ecosystem,[object Object],CPU: 3.2 GHz,[object Object],GPU: 550 MHz,[object Object],Memory: 512 MB,[object Object],CPU: 600 MHz  3.2 GHz,[object Object],Memory: 88 MB  512 MB,[object Object]
Memory Budget,[object Object],Total Memory,[object Object],[object Object]
Webkit
Netflix SDK
Network/Video BufferUI Budget,[object Object]
Progressive enhancement,[object Object],Baseline,[object Object],Enhanced,[object Object],Animations,[object Object],Request throttling,[object Object],Cache sizes,[object Object],Data pre-fetching,[object Object],None enabled,[object Object],5 concurrent,[object Object],Small,[object Object],Delayed,,[object Object],Small batches,[object Object],All enabled,[object Object],20 concurrent,[object Object],Large,[object Object],Frequent,,[object Object],Larger batches,[object Object]
0.1 second: Feeling of instantaneous response,[object Object],1.0 second: Keeps flow of thought seamless,[object Object],10 seconds:Keeps the user’s attention,[object Object],Perceived Performance,[object Object],Nielsen 2010, 1993; Miller 1968; Card et al. 1991,[object Object]
Provide immediate feedback on user input,[object Object],Split up long running process,[object Object],Mask and reduce perceived wait times,[object Object],Background work and anticipate common requests,[object Object],Ways to Improve Responsiveness,[object Object]
Wait until the user settles for expensive operations or paints,[object Object],Avoid DOM changes at the beginning of / during animations,[object Object],Tune delays to find the sweet spot,[object Object],Ways to Improve Responsiveness,[object Object]
Provide Visual Cues,[object Object]
Naïve implementation,[object Object],Progressively inserted new DOM nodes,[object Object],Animated very large DOM parent,[object Object],Height ever-growing of DOM parent,[object Object],Bad: Performance degraded as you scrolled,[object Object],1,[object Object],2,[object Object],3,[object Object],4,[object Object],5,[object Object],6,[object Object],7,[object Object],Performance Evolution: Scrolling Rows,[object Object]
Naïve implementation,[object Object],Progressively inserted new DOM nodes,[object Object],Animated very large DOM parent,[object Object],Height ever-growing of DOM parent,[object Object],Bad: Performance degraded as you scrolled,[object Object],1,[object Object],2,[object Object],3,[object Object],4,[object Object],5,[object Object],6,[object Object],7,[object Object],Performance Evolution: Scrolling Rows,[object Object]
Optimized implementation,[object Object],Recycle DOM nodes,[object Object],Animate each row individually,[object Object],Delaying modifying row until comes into viewport or the user settles,[object Object],Good: Performance consistent regardless of location,[object Object],1,[object Object],2,[object Object],3,[object Object],4,[object Object],2,[object Object],1,[object Object],5,[object Object],Performance Evolution: Scrolling Rows,[object Object]
Optimized implementation,[object Object],Recycle DOM nodes,[object Object],Animate each row individually,[object Object],Delaying modifying row until comes into viewport or the user settles,[object Object],Good: Performance consistent regardless of location,[object Object],3,[object Object],4,[object Object],5,[object Object],1,[object Object],2,[object Object],Performance Evolution: Scrolling Rows,[object Object]
Software (CPU) = slowerHardware (GPU) = faster,[object Object]
Avoid CSS gradients, boxshot shadows,[object Object],Use images instead,[object Object],Example: Full-screen CSS radial gradient,[object Object],Paints were 13 times faster without it,[object Object],CSS = SoftwareImage = Hardware,[object Object]
Eliminate paints,[object Object]
Enables GPU acceleration of compositing parts of the page,[object Object],Greatly benefits CSS animations,[object Object],Accelerated Compositing,[object Object]
DOM Tree -> Render Tree -> RenderLayer Tree,[object Object],Software path,[object Object],Changes to a render layer require repainting all overlapping layers,[object Object],Hardware path,[object Object],Some render layers paint to their own backing surface (compositing layer),[object Object],Changes to a layer only repaint the contents of that layer,[object Object],Accelerated Compositing,[object Object]
3D transforms,[object Object],Opacity changes,[object Object],Accidental,[object Object],Overlapping a layer,[object Object],Render engine,[object Object],Several ways to create layers,[object Object]
Safe CSS properties,[object Object],Transforms,[object Object],Opacity,[object Object],Un-safe,[object Object],Any other CSS properties,[object Object],DOM manipulation,[object Object],Leveraging layers,[object Object]
Keep layers small,[object Object],Don’t inadvertently create gigantic layers,[object Object],Memory consumption = width x height x 4 (bit depth),[object Object],Animate smaller areas rather than large parts of the screen,[object Object],Trial and error, testing important,[object Object],Tips,[object Object]
Show Compositing Borders,[object Object]

More Related Content

What's hot

Integration of OVS in OpenWrt wireless network and investigation of SDWMN
Integration of OVS in OpenWrt wireless network and investigation of SDWMNIntegration of OVS in OpenWrt wireless network and investigation of SDWMN
Integration of OVS in OpenWrt wireless network and investigation of SDWMNNazmul Hossain Rakib
 
WebKit and GStreamer
WebKit and GStreamerWebKit and GStreamer
WebKit and GStreamercalvaris
 
What are latest new features that DPDK brings into 2018?
What are latest new features that DPDK brings into 2018?What are latest new features that DPDK brings into 2018?
What are latest new features that DPDK brings into 2018?Michelle Holley
 
InterPlanetary File System (IPFS)
InterPlanetary File System (IPFS)InterPlanetary File System (IPFS)
InterPlanetary File System (IPFS)Gene Leybzon
 
DPDK IPSec Security Gateway Application
DPDK IPSec Security Gateway ApplicationDPDK IPSec Security Gateway Application
DPDK IPSec Security Gateway ApplicationMichelle Holley
 
OpenFlow tutorial
OpenFlow tutorialOpenFlow tutorial
OpenFlow tutorialopenflow
 
Light combact aircraft tejas
Light combact aircraft tejasLight combact aircraft tejas
Light combact aircraft tejasTeja Tms
 
Intel(r) Quick Assist Technology Overview
Intel(r) Quick Assist Technology OverviewIntel(r) Quick Assist Technology Overview
Intel(r) Quick Assist Technology OverviewMichelle Holley
 
MIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability Testing
MIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability TestingMIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability Testing
MIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability TestingMIPI Alliance
 

What's hot (13)

Integration of OVS in OpenWrt wireless network and investigation of SDWMN
Integration of OVS in OpenWrt wireless network and investigation of SDWMNIntegration of OVS in OpenWrt wireless network and investigation of SDWMN
Integration of OVS in OpenWrt wireless network and investigation of SDWMN
 
WebKit and GStreamer
WebKit and GStreamerWebKit and GStreamer
WebKit and GStreamer
 
What are latest new features that DPDK brings into 2018?
What are latest new features that DPDK brings into 2018?What are latest new features that DPDK brings into 2018?
What are latest new features that DPDK brings into 2018?
 
InterPlanetary File System (IPFS)
InterPlanetary File System (IPFS)InterPlanetary File System (IPFS)
InterPlanetary File System (IPFS)
 
What is Bootloader???
What is Bootloader???What is Bootloader???
What is Bootloader???
 
Java Class Loader
Java Class LoaderJava Class Loader
Java Class Loader
 
DPDK IPSec Security Gateway Application
DPDK IPSec Security Gateway ApplicationDPDK IPSec Security Gateway Application
DPDK IPSec Security Gateway Application
 
OpenFlow tutorial
OpenFlow tutorialOpenFlow tutorial
OpenFlow tutorial
 
Light combact aircraft tejas
Light combact aircraft tejasLight combact aircraft tejas
Light combact aircraft tejas
 
Intel(r) Quick Assist Technology Overview
Intel(r) Quick Assist Technology OverviewIntel(r) Quick Assist Technology Overview
Intel(r) Quick Assist Technology Overview
 
MIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability Testing
MIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability TestingMIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability Testing
MIPI DevCon 2016: Accelerating UFS and MIPI UniPro Interoperability Testing
 
CCCNP ROUTE v6_ch06
CCCNP ROUTE v6_ch06CCCNP ROUTE v6_ch06
CCCNP ROUTE v6_ch06
 
EL MANUAL ANONYMOUS
 EL  MANUAL ANONYMOUS EL  MANUAL ANONYMOUS
EL MANUAL ANONYMOUS
 

Viewers also liked

Developing HTML5 apps for TV
Developing HTML5 apps for TVDeveloping HTML5 apps for TV
Developing HTML5 apps for TVgerbille
 
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
Yow Conference Dec 2013 Netflix Workshop Slides with NotesYow Conference Dec 2013 Netflix Workshop Slides with Notes
Yow Conference Dec 2013 Netflix Workshop Slides with NotesAdrian Cockcroft
 
Netflix
NetflixNetflix
NetflixAloko
 
2012 NagraID display cards - alternatywa dla tokenów
2012 NagraID display cards - alternatywa dla tokenów2012 NagraID display cards - alternatywa dla tokenów
2012 NagraID display cards - alternatywa dla tokenówSzymon Dowgwillowicz-Nowicki
 
Svccg nosql 2011_v4
Svccg nosql 2011_v4Svccg nosql 2011_v4
Svccg nosql 2011_v4Sid Anand
 
Data Science Consulting at ThoughtWorks -- NYC Open Data Meetup
Data Science Consulting at ThoughtWorks -- NYC Open Data MeetupData Science Consulting at ThoughtWorks -- NYC Open Data Meetup
Data Science Consulting at ThoughtWorks -- NYC Open Data MeetupDavid Johnston
 
Electronic Program Guides using SVG
Electronic Program Guides using SVGElectronic Program Guides using SVG
Electronic Program Guides using SVGCyril Concolato
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011Andreas Bovens
 
Seo for-bloggers-2014
Seo for-bloggers-2014Seo for-bloggers-2014
Seo for-bloggers-2014Rand Fishkin
 
Resilience and Compliance at Speed and Scale
Resilience and Compliance at Speed and ScaleResilience and Compliance at Speed and Scale
Resilience and Compliance at Speed and ScaleJason Chan
 
From Gates to Guardrails: Alternate Approaches to Product Security
From Gates to Guardrails: Alternate Approaches to Product SecurityFrom Gates to Guardrails: Alternate Approaches to Product Security
From Gates to Guardrails: Alternate Approaches to Product SecurityJason Chan
 
Cloud Application Security: Lessons Learned
Cloud Application Security: Lessons LearnedCloud Application Security: Lessons Learned
Cloud Application Security: Lessons LearnedJason Chan
 
Cloud Application Security: Lessons Learned
Cloud Application Security: Lessons LearnedCloud Application Security: Lessons Learned
Cloud Application Security: Lessons LearnedJason Chan
 
Ibm cloud nativenetflixossfinal
Ibm cloud nativenetflixossfinalIbm cloud nativenetflixossfinal
Ibm cloud nativenetflixossfinalaspyker
 
Re:invent 2016 Container Scheduling, Execution and AWS Integration
Re:invent 2016 Container Scheduling, Execution and AWS IntegrationRe:invent 2016 Container Scheduling, Execution and AWS Integration
Re:invent 2016 Container Scheduling, Execution and AWS Integrationaspyker
 
Converging CAS and DRM, David Bouteruche from Nagra
Converging CAS and DRM, David Bouteruche from NagraConverging CAS and DRM, David Bouteruche from Nagra
Converging CAS and DRM, David Bouteruche from NagraJustindwah
 
Netflix Global Applications - NoSQL Search Roadshow
Netflix Global Applications - NoSQL Search RoadshowNetflix Global Applications - NoSQL Search Roadshow
Netflix Global Applications - NoSQL Search RoadshowAdrian Cockcroft
 

Viewers also liked (20)

Developing HTML5 apps for TV
Developing HTML5 apps for TVDeveloping HTML5 apps for TV
Developing HTML5 apps for TV
 
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
Yow Conference Dec 2013 Netflix Workshop Slides with NotesYow Conference Dec 2013 Netflix Workshop Slides with Notes
Yow Conference Dec 2013 Netflix Workshop Slides with Notes
 
Nagra OpenTV 5 solution
Nagra OpenTV 5 solutionNagra OpenTV 5 solution
Nagra OpenTV 5 solution
 
Culture
CultureCulture
Culture
 
Netflix
NetflixNetflix
Netflix
 
2012 NagraID display cards - alternatywa dla tokenów
2012 NagraID display cards - alternatywa dla tokenów2012 NagraID display cards - alternatywa dla tokenów
2012 NagraID display cards - alternatywa dla tokenów
 
Svccg nosql 2011_v4
Svccg nosql 2011_v4Svccg nosql 2011_v4
Svccg nosql 2011_v4
 
Data Science Consulting at ThoughtWorks -- NYC Open Data Meetup
Data Science Consulting at ThoughtWorks -- NYC Open Data MeetupData Science Consulting at ThoughtWorks -- NYC Open Data Meetup
Data Science Consulting at ThoughtWorks -- NYC Open Data Meetup
 
Electronic Program Guides using SVG
Electronic Program Guides using SVGElectronic Program Guides using SVG
Electronic Program Guides using SVG
 
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
SVG in Opera’s desktop, mobile & TV browsers  — edition 2011SVG in Opera’s desktop, mobile & TV browsers  — edition 2011
SVG in Opera’s desktop, mobile & TV browsers — edition 2011
 
Seo for-bloggers-2014
Seo for-bloggers-2014Seo for-bloggers-2014
Seo for-bloggers-2014
 
Resilience and Compliance at Speed and Scale
Resilience and Compliance at Speed and ScaleResilience and Compliance at Speed and Scale
Resilience and Compliance at Speed and Scale
 
From Gates to Guardrails: Alternate Approaches to Product Security
From Gates to Guardrails: Alternate Approaches to Product SecurityFrom Gates to Guardrails: Alternate Approaches to Product Security
From Gates to Guardrails: Alternate Approaches to Product Security
 
Analyze System and Code Interactions
Analyze System and Code InteractionsAnalyze System and Code Interactions
Analyze System and Code Interactions
 
Cloud Application Security: Lessons Learned
Cloud Application Security: Lessons LearnedCloud Application Security: Lessons Learned
Cloud Application Security: Lessons Learned
 
Cloud Application Security: Lessons Learned
Cloud Application Security: Lessons LearnedCloud Application Security: Lessons Learned
Cloud Application Security: Lessons Learned
 
Ibm cloud nativenetflixossfinal
Ibm cloud nativenetflixossfinalIbm cloud nativenetflixossfinal
Ibm cloud nativenetflixossfinal
 
Re:invent 2016 Container Scheduling, Execution and AWS Integration
Re:invent 2016 Container Scheduling, Execution and AWS IntegrationRe:invent 2016 Container Scheduling, Execution and AWS Integration
Re:invent 2016 Container Scheduling, Execution and AWS Integration
 
Converging CAS and DRM, David Bouteruche from Nagra
Converging CAS and DRM, David Bouteruche from NagraConverging CAS and DRM, David Bouteruche from Nagra
Converging CAS and DRM, David Bouteruche from Nagra
 
Netflix Global Applications - NoSQL Search Roadshow
Netflix Global Applications - NoSQL Search RoadshowNetflix Global Applications - NoSQL Search Roadshow
Netflix Global Applications - NoSQL Search Roadshow
 

Similar to Netflix Webkit-Based UI for TV Devices

Catan world and Churchill
Catan world and ChurchillCatan world and Churchill
Catan world and ChurchillGrant Goodale
 
Architecting Cloudy Applications
Architecting Cloudy ApplicationsArchitecting Cloudy Applications
Architecting Cloudy ApplicationsDavid Chou
 
Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performantApoorv Saxena
 
Advantages And Disadvantages Of Hadoop Distributed File...
Advantages And Disadvantages Of Hadoop Distributed File...Advantages And Disadvantages Of Hadoop Distributed File...
Advantages And Disadvantages Of Hadoop Distributed File...Brooke Lord
 
DOs and DONTs on the way to 10M users
DOs and DONTs on the way to 10M usersDOs and DONTs on the way to 10M users
DOs and DONTs on the way to 10M usersYoav Avrahami
 
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working togetherTuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working togetherTuenti
 
Well Behaved Mobile Apps on AIR - Performance Related
Well Behaved Mobile Apps on AIR - Performance RelatedWell Behaved Mobile Apps on AIR - Performance Related
Well Behaved Mobile Apps on AIR - Performance RelatedRenaun Erickson
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Webaleemb
 
Real-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classesReal-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classesa2tt
 
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Johan Andersson
 
Running a Megasite on Microsoft Technologies
Running a Megasite on Microsoft TechnologiesRunning a Megasite on Microsoft Technologies
Running a Megasite on Microsoft Technologiesgoodfriday
 
DevDays 2011- Let’s get ready for the cloud: Building your applications so th...
DevDays 2011- Let’s get ready for the cloud: Building your applications so th...DevDays 2011- Let’s get ready for the cloud: Building your applications so th...
DevDays 2011- Let’s get ready for the cloud: Building your applications so th...Robert MacLean
 
XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...
XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...
XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...The Linux Foundation
 
Virtual STB / Cloud UI Streaming revisited
Virtual STB / Cloud UI Streaming revisitedVirtual STB / Cloud UI Streaming revisited
Virtual STB / Cloud UI Streaming revisitedDr. Randolph Nikutta
 
Azure Functions - Get rid of your servers, use functions!
Azure Functions - Get rid of your servers, use functions!Azure Functions - Get rid of your servers, use functions!
Azure Functions - Get rid of your servers, use functions!QAware GmbH
 
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...Nati Shalom
 
DDD Framework for Java: JdonFramework
DDD Framework for Java: JdonFrameworkDDD Framework for Java: JdonFramework
DDD Framework for Java: JdonFrameworkbanq jdon
 

Similar to Netflix Webkit-Based UI for TV Devices (20)

Lotus Domino 8.5
Lotus Domino 8.5Lotus Domino 8.5
Lotus Domino 8.5
 
Catan world and Churchill
Catan world and ChurchillCatan world and Churchill
Catan world and Churchill
 
Architecting Cloudy Applications
Architecting Cloudy ApplicationsArchitecting Cloudy Applications
Architecting Cloudy Applications
 
Hacking to be performant
Hacking to be performantHacking to be performant
Hacking to be performant
 
Advantages And Disadvantages Of Hadoop Distributed File...
Advantages And Disadvantages Of Hadoop Distributed File...Advantages And Disadvantages Of Hadoop Distributed File...
Advantages And Disadvantages Of Hadoop Distributed File...
 
DOs and DONTs on the way to 10M users
DOs and DONTs on the way to 10M usersDOs and DONTs on the way to 10M users
DOs and DONTs on the way to 10M users
 
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working togetherTuenti Tech Teams. Frontend, Backend, Systems and more, working together
Tuenti Tech Teams. Frontend, Backend, Systems and more, working together
 
Html5/CSS3
Html5/CSS3Html5/CSS3
Html5/CSS3
 
Well Behaved Mobile Apps on AIR - Performance Related
Well Behaved Mobile Apps on AIR - Performance RelatedWell Behaved Mobile Apps on AIR - Performance Related
Well Behaved Mobile Apps on AIR - Performance Related
 
Developing For The Web
Developing For The WebDeveloping For The Web
Developing For The Web
 
Real-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classesReal-time Code Sharing Service for one-to-many coding classes
Real-time Code Sharing Service for one-to-many coding classes
 
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
Frostbite Rendering Architecture and Real-time Procedural Shading & Texturing...
 
Running a Megasite on Microsoft Technologies
Running a Megasite on Microsoft TechnologiesRunning a Megasite on Microsoft Technologies
Running a Megasite on Microsoft Technologies
 
DevDays 2011- Let’s get ready for the cloud: Building your applications so th...
DevDays 2011- Let’s get ready for the cloud: Building your applications so th...DevDays 2011- Let’s get ready for the cloud: Building your applications so th...
DevDays 2011- Let’s get ready for the cloud: Building your applications so th...
 
XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...
XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...
XPDDS18: Design and Implementation of Automotive: Virtualization Based on Xen...
 
Virtual STB / Cloud UI Streaming revisited
Virtual STB / Cloud UI Streaming revisitedVirtual STB / Cloud UI Streaming revisited
Virtual STB / Cloud UI Streaming revisited
 
Azure Functions - Get rid of your servers, use functions!
Azure Functions - Get rid of your servers, use functions!Azure Functions - Get rid of your servers, use functions!
Azure Functions - Get rid of your servers, use functions!
 
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
Designing a Scalable Twitter - Patterns for Designing Scalable Real-Time Web ...
 
DDD Framework for Java: JdonFramework
DDD Framework for Java: JdonFrameworkDDD Framework for Java: JdonFramework
DDD Framework for Java: JdonFramework
 
Front-end performances
Front-end performancesFront-end performances
Front-end performances
 

Recently uploaded

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfinfogdgmi
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxUdaiappa Ramachandran
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Will Schroeder
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopBachir Benyammi
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7DianaGray10
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfAijun Zhang
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024D Cloud Solutions
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDELiveplex
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 

Recently uploaded (20)

Videogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdfVideogame localization & technology_ how to enhance the power of translation.pdf
Videogame localization & technology_ how to enhance the power of translation.pdf
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Building AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptxBuilding AI-Driven Apps Using Semantic Kernel.pptx
Building AI-Driven Apps Using Semantic Kernel.pptx
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
Apres-Cyber - The Data Dilemma: Bridging Offensive Operations and Machine Lea...
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
NIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 WorkshopNIST Cybersecurity Framework (CSF) 2.0 Workshop
NIST Cybersecurity Framework (CSF) 2.0 Workshop
 
201610817 - edge part1
201610817 - edge part1201610817 - edge part1
201610817 - edge part1
 
UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7UiPath Studio Web workshop series - Day 7
UiPath Studio Web workshop series - Day 7
 
Machine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdfMachine Learning Model Validation (Aijun Zhang 2024).pdf
Machine Learning Model Validation (Aijun Zhang 2024).pdf
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024Artificial Intelligence & SEO Trends for 2024
Artificial Intelligence & SEO Trends for 2024
 
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDEADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
ADOPTING WEB 3 FOR YOUR BUSINESS: A STEP-BY-STEP GUIDE
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
20230104 - machine vision
20230104 - machine vision20230104 - machine vision
20230104 - machine vision
 

Netflix Webkit-Based UI for TV Devices

  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.

Editor's Notes

  1. These are speaker notes!
  2. Introduction: What isWebkit TV UI?
  3. Core differences for UI design between 2’ UI (desktop) and 10’ UI (TV): - Mouse & keyboard vs. diverse remote controls, game controllers, etc. - Solitary vs. group - A device designed for activity (“lean-forward”) vs. a device designed for consumption (“lean-back”)
  4. Our Webkit-based TV UI runs on a number of game consoles, set-top boxes, Internet-connected TVs, and Blu-ray players.PS3 image from store.sony.comSony Internet TV image from sonystyle.comWii image from nintendo.comLogitech Revue image from logitech.comBoxee image from laughingsquid.com
  5. We’ve standardized on Webkit, so there’s no cross-browser development. Our SDK that we provide to device manufacturers includes our own copy of Webkit.This means we can use cutting-edge features like querySelector API, CSS transforms, CSS transitions & animations, localStorage, CORS, getters and setters, etc.Internet Explorer logo © MicrosoftFirefox logo © Mozilla - Attribution-ShareAlike 3.0 Unported (CC BY-SA 3.0) http://creativecommons.org/licenses/by-sa/3.0/Opera logo © Opera Software ASASafari logo © Apple Inc.Webkit logo © Apple Inc. & Trolltechhttp://www.webkit.org/images/icon-gold.png
  6. Why do we use web technologies instead of native applications?Most TV applications are written specifically for that device, in C/C++.
  7. Why web technologies: Dynamic updatesWith web technologies, we can update frequently without the customer even knowing. We typically push updates every two weeks, but we can push emergency updates at any time. That means we can easily add new features and fix bugs on existing hardware, just like any other website.If our UI changes don’t require a firmware update, that means we require less coordination with partners. Device development cycles are very long, and firmware updates can be rare (certainly rarer than once every two weeks).
  8. Why web technologies: Common technologyWe don’t have to reimplement the application for every platform. Device manufacturers implement a DPI (device porting interface) to support our SDK, and our application should Just Work™ (though it may require special attention to performance). We have a certification team that verifies that the app works on a partner device as expected.Even if the UI differs between devices, other client-side code can be shared (authentication, string bundles & i18n, metadata cache design, common UI components…)Old TV photo by Susan E Adamshttp://www.flickr.com/photos/susanad813/4167385353/Attribution-NonCommercial-ShareAlike 2.0 Generic (CC BY-NC-SA 2.0)http://creativecommons.org/licenses/by-nc-sa/2.0/HTML5 logo by W3Chttp://www.w3.org/html/logo/Attribution 3.0 Unported (CC BY 3.0)http://creativecommons.org/licenses/by/3.0/
  9. Why web technologies: Dynamically Add Locale SupportSince our UI text labels are just bundled in our JavaScript, we can add support for many new locales by uploading a new string bundle and a new UI version that’s aware of the bundle’s availability.(Some locales may be more complicated, e.g. if they require large new fonts that we don’t want to download at runtime.)
  10. Why web technologies: A/B testingWe rely on A/B testing to help us figure out which experiences are most effective for helping our customers find movies & TV shows they’ll love.With web technologies, we can easily redirect different customers to different web pages, so those customers get different experiences.
  11. Supporting variationWe build and maintain a number of different user interfaces. We constantly add new features, create new UIs to support new devices, etc.To support this vast variation, we have to architect our applications and components for maximum flexibility.
  12. Supporting variation: Problem description (1/2)Consider one of our device UIs, codenamed “Special.” It may have dozens of UI components (menus, box art gallery, details page, episode selection, audio tracks, subtitles, star ratings, buffering screen, playback, fast forward mode…).
  13. Supporting variation: Problem description (2/2)How would we solve these requirements for Special?The first two would be easy if not for the third.
  14. Supporting variation: Solutions we’ve tried & abandonedIn our products and prototypes, we’ve tried a number of different ways of solving those problems.Inadequate solution #1: Tight couplingIn this model, components are aware of one another, and manipulate each other directly, e.g.:navigation.handleRight = function() { gallery.focus(); };Tight coupling is very easy to understand, since there’s no abstraction.However, it makes change & reuse difficult: - What if the gallery is on the left of the navigation? - What if we want to show a settings panel instead of a gallery?Inadequate solution #2: Mediator patternIn the mediator pattern, components are completely ignorant of one another, and are therefore totally independent and reusable in other UIs.They broadcast events that the “mediator” class handles. The mediator models the relationship between components.Unfortunately, since your variant UIs may need to reuse some or most of those relationships, you end up needing to reuse just part of your mediator.The components are reusable, but the monolithic mediator is not.Inadequate solution #3: DOM focus & eventsThis model is what most developers use on the open web, and it works well to support mouse interaction: if it’s on the DOM and visible, you can click on it, and a handler/listener can be associated with that DOM element.The approach can be used with LRUD input (left/right/up/down), too: programmatically assign focus to DOM elements, and key input events will be dispatched on those elements.Unfortunately, this ties the controller & view: - It requires a DOM view, which precludes use of alternative rendering technologies (e.g. Canvas). (…Unless you decouple your controller DOM elements from your view DOM elements, but now we’re just making things complicated...) - It also falls apart when something is interactive but isn’t rendered (yet), like if metadata about some movies is still loading, or if we’re re-rendering a set of buttons to reflect available options for the selected title. Dynamic documents make a mess out of DOM focus. - It makes it harder to take input from non-DOM sources, e.g.: touch/gesture input that doesn’t correspond to DOM events, automated testing, voice control,parts of the system that govern other parts programmatically, etc.
  15. Supporting variation: Current solutionOur state transition system models the application as a set of discrete application states. The states are also controllers (as in model-view-controller), so they handle user input and programmatic events and decide when it’s time to transition to a different state.There can be only one active state at a time. Only the active state can receive state events like user input (e.g. an up key event) or programmatic events (e.g. video buffering complete). This helps disambiguate the application state, and tells us which UI component (state) should handle the next key press.References:http://en.wikipedia.org/wiki/State_transition_system
  16. Supporting variation: State system example: SearchSearchInputState and SearchResultsState are two states/controllers. Only one is active at any time.The SearchCompoundState models the relationship between the two (i.e. it owns the state transition criteria), and knows when to change the active state (i.e. it triggers the state transition).When focus starts on SearchInputState and the customer presses the “right” key, SearchInputState handles the input state event and decides what to do: - If there’s another column of keys to the right of the focused key, increment the focused column by one and return true. Returning true halts event propagation. - Otherwise, return false. The event will bubble to the SearchCompoundState, which interprets a “right” key event as a state transition criterion, and sets the active state to SearchResultsState.Note that the SearchResultsState still updates even when the SearchInputState is the active state, since the input state can manipulate a SearchModel that SearchResultsState listens to using the Observable pattern (i.e. events, but not state events).
  17. Supporting variation: State system example: SearchSearchInputState and SearchResultsState are two states/controllers. Only one is active at any time.The SearchCompoundState models the relationship between the two (i.e. it owns the state transition criteria), and knows when to change the active state (i.e. it triggers the state transition).When focus starts on SearchInputState and the customer presses the “right” key, SearchInputState handles the input state event and decides what to do: - If there’s another column of keys to the right of the focused key, increment the focused column by one and return true. Returning true halts event propagation. - Otherwise, return false. The event will bubble to the SearchCompoundState, which interprets a “right” key event as a state transition criterion, and sets the active state to SearchResultsState.Note that the SearchResultsState still updates even when the SearchInputState is the active state, since the input state can manipulate a SearchModel that SearchResultsState listens to using the Observable pattern (i.e. events, but not state events).
  18. Supporting variation: Loose couplingIn addition to our state transition system, we also use some other abstraction techniques to provide flexibility.Event patterns help decouple event sources from consumers.State actionsOnly the active state can receive state actionsObservable patternConsumer knows sourceSource ignorant of consumerMessage BusSource & consumer ignorant of one anotherImplemented as a global Observable (with keys for event names, e.g. “TITLE_FOCUSED”)Dependency injection allows us to bind components at runtime based on configuration.It’s similar to a factory, but instead of referencing multiple components like a factory, our configuration names a specific component associated with that UI. Some examples of how we use dependency injection:States/controllersWhich video playback screen does this UI use? In that screen, for this device, which keys map to which behaviors?Navigation modelHow do we get from search input to results? Are results off the right edge of the input, or the bottom, or what? Does the customer have to press a button?Magnitude configurationHow many search results shall we fetch?
  19. Why we worry about performance and memoryStrategies for improving performance and efficiently using memory
  20. Unbounded memory growth can occur, memory fragmentationImpact performance: slowdown or cause crashesWant the app to feel snappy, smooth, consistent
  21. All of the things above can vary across devices and impact the performance and memory footprintCredits:Circuit Board by John Morrishttp://www.flickr.com/photos/jm999uk/182396962/Attribution-NonCommercial-ShareAlike 2.0 Generic (CC BY-NC-SA 2.0) http://creativecommons.org/licenses/by-nc-sa/2.0/
  22. Just looking at CPU and memory alone, you can see that there's a wide range between the low and the high endGraphics driver and GPU can really impact performance on these devices
  23. Looks like we have a lot of memory available but we don’t get to use all of itLots of things competing for memoryWebkit is no small potatoOur port which uses Qt is ~20MB of codeReducesthe overallmemory available to the UIOthers:Background processesGraphics subsystem
  24. Group devices into classes and target configuration based on the device class: range of attributesCurrently, we have 3 tiersDevices all start out in the middle tier and then based on performance are adjusted up or down
  25. Optimize for perceived performance: focus on improvements that reduce delays in responsiveness to user actionsStudies have found this as well as our own qualitative research0.1: Within 100 milliseconds provide feedback on user action. Longer and the perception of cause and effect is broken1.0: Try to complete actions within a second. After 1 sec, provide feedback that the action is taking place: progress indicatorsAfter a second without feedback: users start to lose attention, feel that the app is brokenA lot of what we deal with in perceived performance is within the sub 1 second rangeReferences:“Usability Engineering” by Jakob Nielsenhttp://www.useit.com/alertbox/response-times.htmlhttp://www.useit.com/papers/responsetime.html“Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules” by Jeff Johnsonhttp://www.sapdesignguild.org/editions/highlight_articles_02/responsiveness.asphttp://www.sapdesignguild.org/editions/highlight_articles_02/perc_perf.asphttp://developer.gnome.org/hig-book/3.0/feedback-response-times.html.en
  26. Immediate feedback:Don’t = key input ignored / failed. Repeat it. Result = navigate further then intendedSacrifice immediate content updates in favor of immediate feedbackSplit up processes:Execution Deferrer: do this when you have time. Examples: processing AJAX responses, eventsMask and reduce perceived wait times:Spinner while we’re loading the movie metadata on our movie details pageDuring application start-up, we progress through text to give the user a sense that the application is proceedingDuring playback startup, have a progress bar that progresses through metadata loading, license acquisition, buffering, etc.Background work:Pre-fetch metadataMetadata = movie metadata and imagesSome applications or UIs might be able to take advantage of Web WorkersReferences:“Usability Engineering” by Jakob Nielsenhttp://www.useit.com/alertbox/response-times.htmlhttp://www.useit.com/papers/responsetime.html“Designing with the Mind in Mind: Simple Guide to Understanding User Interface Design Rules” by Jeff Johnsonhttp://www.sapdesignguild.org/editions/highlight_articles_02/responsiveness.asphttp://www.sapdesignguild.org/editions/highlight_articles_02/perc_perf.asphttp://developer.gnome.org/hig-book/3.0/feedback-response-times.html.en
  27. Settles:User settles = stops navigating for long enough (200-300 ms) that we believe they intend to consume the content they’re focused on.Opportunity for update content/metadata on the screen, prefetch metadata, perform delayed tasksHow: setTimeout that is cleared when another key input event occursAnimations:Wait until “webkitTransitionEnd” event, then slightly longer (timeout) to allow key inputAnimations are timed based. Doing anything during eat up time having Webkit paint parts of screen, drop framesConsistent and smooth has better perceived performance than inconsistent and jerky even if its faster.
  28. Because memory constraints don’t prefetch and load all data (imagine endless rows vertically and horizontally)Grey placeholders: user scrolled to area not loaded metadata or delaying updates in favor immediate feedbackLike during rapid scroll, don’t load movie boxart until user settlesDo update list titles to give context within the gridBob = back of DVD box: lower the opacity to show focus no longer matchesSave expensive paints since large portion of screenSettle: update focused row and Bob first and stagger out rest of rowsGive time for key input in between. Avoid UI freezing up from large/expensive paintsOther visual cues:Counter: provides context to where you are horizontally when the row of moviesBoots and hats (rows peeking through on the top and bottom) give user context that there is more to navigate to
  29. The blue boxes are rows of box art and the dotted line is the viewportCreate and insert new DOM nodes into the parent node
  30. The blue boxes are rows of box art and the dotted line is the viewportCreate and insert new DOM nodes into the parent node
  31. DOM recycling: reusing DOM nodes for other movie rows.Don’t change their location in the DOM (don’t do any insertions)Just change their visual position with -webkit-transform
  32. DOM recycling: reusing DOM nodes for other movie rows.Don’t change their location in the DOM (don’t do any insertions)Just change their visual position with -webkit-transform
  33. Take advantage of what the hardware is optimized for / good atGPU designed for drawing and compositing operations that involve large numbers of pixelsAvoid computationally expense work in software
  34. Cool new CSS3 features can come at a cost on low-end devicesCSS can be very powerful but often you are doing work in software that can be pre-baked in imagesHardware can just paint images. CSS requires software to calculate, render and paintFull-screen radial gradient was a background image and the UI was the foreground
  35. Often can accidentally cause paints without realizing itRendering engine doesn’t optimize for no-ops, e.g. changing textContent to the same textMinimize DOM manipulationLocalize changes: update attributes, e.g. imgsrc, css, textContentReferences:http://code.google.com/chrome/devtools/docs/overview.html
  36. Without accelerated compositing, animations would be slowEvery device we’ve seen has benefited from accelerated compositing, even high-end platforms like the PS3Accelerated compositing trading memory for performance, but often devices have plenty of video memory
  37. Render Tree:Each node in the DOM tree that produces visual output has a corresponding RenderObjectRenderLayer Tree:Each RenderObject directly or indirectly has a RenderLayerRenderLayers exist so that the elements of the page are composited in the correct order to properly display overlapping content, semi-transparent elements, etc.Hardware path:Compositing layer = bitmap in video memory (unless it’s a container)References:http://www.chromium.org/developers/design-documents/gpu-accelerated-compositing-in-chrome
  38. Easy to accidentally create themOverlapping an element on top of a layer will create an implicit layer of that elementRender engine may choose to render an element as a layer
  39. Safe CSS properties to change on a layer that will not cause it to re-render the layerUnsafeAny other properties are not safe to modifyDOM insertions, manipulation (attributes, textContent)
  40. Gigantic layers: text-indent -8000pxSome devices paint larger areas slowerYou could actually make it slower if you just turned everything into a layerNot always intuitive what improves the performance: trial and error is importantUse the tools to verify the performance on actual devices
  41. Mention available in Safari and ChromeDescribe visual hintsDiscuss optimizations: vertical up/down and horizontal left/right navigationVisual hints:Red – a layerYellow – containerNumber in the top left corner of the layer indicates how many times it has been repainted.Cyan – Helps with debugging “overflow”. Not expensive for memoryGreen – Tiled layer. Created when the layer width/height is > 1024Optimizations:Each row has 2 layers: one for the title, one for the boxartAllows fast updates to the title during rapid scrolling as it’s a smaller area to repaint then 1 big layer for the rowFor each row animating 2 layersLeft to right, breakdown the boxart layer into individual layers for each boxartOptimizes for left/right animation and recycling the boxart nodesCounter updates for each key input but didn’t for the movie details layer since only does when user settlesEnabling in Browsers:SafariOn terminal run following command:defaults write com.apple.SafariIncludeInternalDebugMenu 1Go to "Debug" Menu and select "show compositing borders”Chromeabout:flagsEnable “Composited render layer borders”
  42. Unbounded:Eliminate references to free up for garbage collectionUse pools to fix sizes and re-use objects, e.g. DOM elementsObjects:Lots of objects will cause more frequent and slower garbage collectionsUnpack options objectMemory fragmentationVideo buffer needs a large contiguous block of free space. Too many small blocks = can’t allocate large blocksClosuresAvoid persistent closures that increase the scope chain and memory footprintLoading:Infrequently visited areas of the app
  43. What’s nextDevices - New game consoles with novel capabilitiesMore UI and feature testingInput types - Pointer: We’ve already developed some UIs for TV devices with pointer input. - Touch - Motion/gesture - VoicePerformance tuning - Greater capabilities on inexpensive devices - Greater capabilities on high-end devices