Download to read offline
Uploaded byIan Renyard
Arm html5 presentation
The document discusses YouView's efforts to support HTML5 development for their platform. It outlines their process for allowing local development on production devices, tests of popular JavaScript frameworks for performance, and best practices for optimizing loading times such as lazy loading, modular code, and build tools. Test results showed underscore.js had the best performance and loading code in modular bundles helped speed up loading times by 2x.
Arm html5 presentation
- 1. YouView Developer Support & Challenges DTG HTML5workshop, London, 03/07/2015
- 2. Who Are We? ContentDevelopment & Innovation Team Ian Renyard Senior Technologist Andrea Fassina Technologist
- 3. YouView Developer Support& Challenges ● Overview ● Development on Production Devices ● Libraries & Frameworks ● Fast Start ● Questions
- 4.
- 5.
- 6. YouView & HTML5 ●2012 - Adobe Air for TV. ● 2014 - HTML5, with BBC iPlayer, Red Button & Arqiva. ● Currently working to migrate more to HTML…
- 7. Production Development Tools Run development HTMLapps on production devices
- 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 contentoperations 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)
- 10.
- 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.
- 12. Libraries and Frameworks Popular JSframeworks/libraries tested.
- 13. Libraries and Frameworks Teststrategy: ● simple text application ● first generation device ● limited number of test iterations ● test for application loading time ● and memory consumption
- 14. Libraries and Frameworks TestedJS frameworks for memory consumption and loading time:
- 15.
- 16.
- 17.
- 18. Results _.js underscore.js which loadedin 7ms consuming about 3mb of memory.
- 19. Fast Start Reducing thetime to playback
- 20. Areas to Optimise AppBootstrapping 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)
- 21. Launch Contexts Players Apps DeepLinking Red Button
- 22. Modules & Bundles SmallParts by Windell Oskay (CC BY)
- 23. Modules & Bundles Framework Routing Playback Controller Playback Model Playback View Framework & Routing Playback MVC ModulesBundles Home MVC Forward Journeys Playback Controls
- 24. Loading Order Framework & Routing Playback MVC VideoAsset Time Playback Starts
- 25. Loading Order Framework & Routing Playback MVC VideoAsset Time Playback Starts Playback Controls Forward Journeys Home MVC
- 26.
- 27.
- 28. Build Tools ● AMDModules Gulp Plugins: ● concat ● UglifyJS ● usemin
- 29. Best Practices For resourceconstrained (T1000 < iPhone 3) devices: ● Lazy loading ● Microservices/libraries ● Sprite sheets ● CSS translation and requestAnimationFrame ● Thinner UI client/server side templating
- 30. Contact Ian Renyard Senior Technologist ian.renyard@youview.com www.renyard.co.uk github.com/renyard @renyard AndreaFassina Technologist andrea.fassina@youview.com www.walkabout.xyz github.com/andrea-f @walkabout_xyz YouView www.youview.co.uk @youview Want to work with us? Speak to us about jobs at YouView or log on to www.youview.com/jobs.
Editor's Notes
- #3 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.
- #4 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.
- #5 YouView is an on demand TV service with over 70 live free-to-air digital TV and radio channels.
- #6 We work with most of the major broadcasters and on demand services in the UK.
- #7 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.
- #8 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.
- #9 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.
- #10 DUID - Device Unique ID. C5D development production certificate
- #13 Most used libraries/frameworks, investigated these specific ones because these are the most widely used across content providers
- #14 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
- #15 add logos instead of names for different frameworks
- #16 point out that the loading time of frameworks with dependencies is the net time, so not including the time required to load jquery
- #20 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.
- #21 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.
- #22 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?
- #23 We found that taking a modular approach to app architecture gave us good results.
- #24 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.
- #25 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.
- #26 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.
- #27 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.
- #28 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.
- #29 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.
- #30 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.
- #31 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.