“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!