Building an HbbTV application with ES7, React and Redux

The first “Tekniksprint” of the year has come to an end. This is a two-week sprint held two times a year, where we at SVTi re-mix our teams, form new ones, and work on small, innovative projects of our liking that have been pitched a month or two earlier. The project I chose to work on was to build an HbbTV prototype app using modern-day tools and frameworks, suitable for usability tests and further prototyping.

HbbTV

HbbTV is short for Hybrid Broadcast Broadband TV and is a technical standard for stringing together traditional broadcast TV and digital services such as web applications and video-on-demand services.

For example, the HbbTV technique can be used to create an interactive web layer on top of the broadcast signal. A layer that the user can interact with, for instance with the TV show that is currently on air.

If you, as a metaphor, see the broadcast signaling we have today as spaghetti that goes to your TV-set, Hbb would be the ketchup that comes along with it.

(”The Ketchup Flow”, Illustration and metaphor by Klara Nilsson, UX-designer in Team Videosamarbeten)

 

One drawback of developing for TV is that, to be able to support as many TV models as possible, we’re forced to use pretty old web standards. For HbbTV 1.5 – the version of the HbbTV standard that is supported by a large amount of the more recent TV models – we have to use CSS 2.1 and EcmaScript 3. Being limited to these standards creates some architectural difficulties for us spoiled millennial modern-day developers.

But what if we, during development, weren’t limited to the old standards? After all, tools and techniques like polyfills, transpiling and monkey patching are widely used in the JavaScript world, so why not try to build an HbbTV app using EcmaScript 7, React.JS and Redux?

And:

*SPOILER ALERT*

 

We did it!

Node.js is there. So is Webpack. And React.js, with React Router, together with Redux to keep track of the application’s state. We’re using Sass for styling, and we’ve managed to get some nice async/await functionality in place as well! We have Node.js there together with Webpack to build and package the app. We have been using Babel to transpile our code down to ES5, and then either monkey patching with ES-shim to have the JavaScript engine support our functionality, or using Google’s Closure Compiler to transpile the code down to ES3. In the end we went down the Closure Compiler path, since we thought we’d have more control that way.

A lot of time was spent on getting the builds to run smoothly, making React create the HbbTV specific HTML elements that we needed, and working on a fairly decent development experience in terms of round-trip times and environment setup.

In some ways, developing on a TV platform takes you back to the good old days of “This looks good in Netscape Navigator but not in IE 4”, where something “works on my computer” but looks different on TV number 1 and doesn’t start on TV number 2 while TV number 3 is lying flat on its back communicating only through smoke signals. In our team, we merely dipped our toes in the vast ocean of TV emulators/running a smart TV in development mode/browser-specific adaptations/various browser plugins. But when we had overcome the first few obstacles we gained speed and managed to build a pretty nice prototype. It is fairly easy to extend and improve, and we already have some good features in place making it suitable for usability testing, further prototyping and trying out quick proof of concept solutions.

We’ve had a lot of fun along the way, and we have something up and running on devices from all the biggest TV manufacturers. And it’s really nice to look at as well, both in terms of usability and clean code!