8. Why
● Greater availability.
● Lower cost to entry.
● Don’t need to support multiple content
environments, test dev on live.
9. Development Process
Contact YouView
content operations
team and complete
the on boarding
process*
Receive access to
developer portal,
Developer signing
credentials and
developer tools
Develop and
deploy to a
production device
*(Ts&Cs may apply)
11. Local Application Environment
- Device DNS
points to Hosting
server IP.
- Developer mode
enabled on the
device.
- Local PC hosts signed
application that can be
launched, replicating YouView
metadata environment locally.
13. Libraries and Frameworks
Test strategy:
● simple text application
● first generation device
● limited number of test iterations
● test for application loading time
● and memory consumption
20. Areas to Optimise
App Bootstrapping
LCD Test Bench by xunil96 (CC BY-SA)
Download Weight
The Computing Scale Co by Kenny Louie (CC BY)
Network Requests
Switchboard by christopher_brown (CC BY)
Worked around performance of HTML apps and with the BBC recently to improve performance of their apps on YouView devices.
Involved with the Sony project to bring YouView to their 2015 Bravia models.
Today, we’re going to talk about how we are lowering the barriers to entry by enabling development on production devices and a couple of areas around the performance of HTML apps on YouView boxes.
YouView is an on demand TV service with over 70 live free-to-air digital TV and radio channels.
We work with most of the major broadcasters and on demand services in the UK.
Where are we with HTML5?
YouView launched in 2012 with apps based on Adobe Air for TV.
Last autumn we launched HTML apps with 2 content providers.
We’re actively working with our other content providers to migrate their apps from Air to HTML.
Historically, development boxes have been used for app development. But these only being available in limited numbers and more content providers coming onboard, this is less practical.
Rather than having to request boxes from YouView, they can be purchased in Currys or John Lewis.
Boxes are available at Currys & John Lewis and cheaper than development boxes.
Do not need to request from YouView.
No need to deploy app packages signed for two different environments.
DUID - Device Unique ID.
C5D development production certificate
Most used libraries/frameworks, investigated these specific ones because these are the most widely used across content providers
Due to the time to perform testing of this kind the results are based on a simple application over a limited number of test iterations
add logos instead of names for different frameworks
point out that the loading time of frameworks with dependencies is the net time, so not including the time required to load jquery
User experience is really important and the user wants to get to content, so we need to keep our launch time as fast as possible.
We’ve investigated approaches to reducing loading times for apps and I’m going to run through some of our findings.
Some time will be taken up in loading WebKit. This is something we’re working on improving, but we’re going to focus on what’s within the control of the app itself to optimise here.
Remote HTTP requests to the network.
Download weight of the code base.
Execution of initialisation code for the app.
These apply to any web apps, but are particularly pronounced on devices which have more constrained resources like a set top box.
Apps on YouView can be launched from several different contexts:
Players - Long form and scheduled catch up content.
Apps - Short form video or other non-scheduled content.
Deep Linking - Usually launching straight into a piece of content, but could be another area of the app.
Red Button - Launched from a linear channel.
If our one app covers all these areas, how do we make sure we can get into the required context as quickly as possible?
We found that taking a modular approach to app architecture gave us good results.
Functionality is organised into modules with small discrete functionality.
Related modules are then concatenated together into bundle files which will be loaded together.
This shows the framework and playback functionality, but there will be several more within the app.
These modules & bundles can be used to optimise the loading order of your app, determining the next step at each stage.
In this diagram, each column is loaded in sequence, with each step determining the requirements for the next.
The framework & routing determines which modules will be required for the required context.
The Playback module loads with it’s dependencies.
The video asset is buffered.
At this point playback can start and we can start to anticipate what the user might want to do next and lazy load further functionality.
In the playback example, this could include any functionality that we’d like to defer until after playback has started.
For example, transport and scrub bar functionality and any forward journeys are unlikely to be needed until after the video has started playing.
Other areas of the app can also be loaded here to speed up navigation into those.
This could include a home screen, category menus and search functionality.
We built a basic app to test these approaches against an app based on an off the shelf framework.
The original app is on the left and our optimised app is on the right.
After loading now screen disappears, the control is with the app itself.
Over multiple tests on our first generation YouView hardware, we saw app load times to be up to twice as fast with these optimisations.
8 seconds -> 3.5 seconds.
On newer, more powerful hardware, the launch time is even faster.
So what tools have we used to achieve this?
None of this uses any YouView specific magic, so these approaches can be used in cross platform apps.
We use Gulp and several plugins to build and manage the module bundles. Once a new module is added to a bundle config, the rest of the process is automated.
All of our apps currently run on every YouView box going back to our first generation devices from 2012.
Apps on our first generation device only end up with about 100Mb usable memory.
Lazy loading speeds up launch times.
Micro libraries, rather than large frameworks can improve launch time and memory use.
In other areas, that we’ve not touched on:
Sprite sheets can reduce network requests.
CSS translations and requestAnimationFrame both produced good results for animation.
Moving templating logic to the server can improve performance on the device.
We’ve got a few minutes for questions now.
We can be found in all the usual places online.
Come and find us later if you have any more questions or if you’re interested in working with YouView.
