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 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.
We did it!
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!