View
4
Download
0
Category
Preview:
Citation preview
“a cutting edge HTML5 UI”
Nico Vierhout
VP App development
Our Roots
14 countries
52 mm homes passed
27 mm Customers
56 mm RGUs
over
$18 bn of revenue*
38,000 Employees
founded
25 yrs ago
90% business is in Europe
Liberty Global is the largest international cable company and is a provider of market-leading TV, broadband internet and telephony services
Information overload
300 TV channels
100,000,000,000 videos on youtube
1,000,000 mobile apps
5000 TV catchup propositions
10,000 VOD movies
30,000 press articles per day
Horizon
“Implementing a cutting edge HTML5 UI”
Anne BakkerDirector Web Development
Our Journey
WebGL UI
HTML4 Apps
CSS3 animations
+ Animation physics
HTML5 UI
Why:
Open platform
Multi vendor
Ecosystem
Portability
Why not:
Stability ?
Performance ?
Productivity ?
Security ?
a HTML5 UI
Embedded vs Desktop
Desktop
Embedded< 1500 DMIPS < 1G Memory
Mobile
Underwater obstacles
Stability and memory leaks (long running process)
Animation performance and rendering artifacts
Browser (Qt 4.8) integration layer bugs
EPG grid - Large DOM & updates “infinit scroll”
Challenges EPG
First approach with DOM failed
Data and views caching!
Text wrapping forcing paints
We moved to <canvas> 2D
VOD store full screen animations, paints required
Challenges VOD
translate3d() is not a silver bullet
Getting the right compositing is tricky
Full screen vertical animation
Large blurred backdrop
Images are faster than CSS3
Changed ships4.8 5.4
Webkit 2 GPU acceleration
WebGL 120 Mb
Webkit 1 CPU rendering
Canvas 2D 90 Mb
WebGLInteracting directly with the GPU (openGL)
Performance (potential) HTML5 vs WebGL
Much lower leven than DOM, Canvas 2D API
Text rendering is hard in WebGL (char atlas)
Memory management
VOD store in WebGL with blurred backdrops
Gaming frameworksEven though the frame rate was constant > 40 fps it
still did not feel right…
Productivity of pure WebGL development
Animation physics
Object pooling
PixiJS (WebGL) with spring physics
Learnings
Applying gaming techniques to UI development
Mixing HTML5 and WebGL has great potential for TV UIs
Developer features should be a requirement!
Using large deep DOM slows things down quickly
Applying translate3d on everything
Treating the browser as a black box
The tides…
will shift the waterways and obstacles…
Happy sailing!
Recommended