How to become a Smart TV developer
Tired of developing the same old websites again and again? Or maybe you’re just starting out after uni looking for your calling? With everyone watching movies and series from their Smart TV day in day out, new TV applications are popping up on the daily. So wouldn’t it be cool if you could make one of those apps yourself, and possibly make a career out of this specialty? Let’s learn some steps you can take to get started with becoming a Smart TV developer.
The up and downsides of developing for Smart TV
Before we dive into the nitty-gritty of how to become a Smart TV developer, I thought it good to take a look at what it’s exactly like when you’ve been one for a while. There are definite upsides to Smart TV development, with some downsides too. Luckily I’ve previously written out both the things I hate as well as the things I like about being a Smart TV developer! You can find both the upsides and the downsides in these blogs:
Step 1: Understanding the basics
Let’s get started with some of the basics of Smart TV development. You might be familiar with web development techniques and know a little bit of JavaScript, HTML and CSS. What’s good about developing for most Smart TV platforms is that they are in essence a big website too. However, there are some differences in how you design and subsequently develop the user interface.
First and foremost, the size of the screen of a Smart TV is static (which you might have understood from the ‘what I like about developing for Smart TV’ blog). So you won’t have to develop a website using media queries or really care about different screen sizes at all. There are some more design intricacies that you should account for, which you can read in this blog.
The other big difference between typical web and Smart TV development is the input method. Where a regular website can either be accessed via mouse on a PC, or via touch from a phone or tablet; Smart TVs are primarily accessed with a TV-remote. This means you’ll have to work with a mechanism called ‘focus management’, and account for TV-remote input with just the left/right and up/down (LRUD) keys. It requires a different type of thinking with how design elements are displayed on screen, and what the interaction looks like. For a more thorough introduction to the basics of Smart TV development, this blog explains it all at a deeper level of understanding.
Step 2: Picking your development framework
With the basics of what you need to account for in a Smart TV application clear, let’s move on with some of the actual development! Since we’re primarily dealing with websites, it means we have access to the full range of JavaScript frameworks out there too. It’s important to pay attention to a few key aspects when you’re picking a framework, as it might not be as easy as you think:
- Performance first
Smart TVs aren’t particularly powerful, and that effect becomes even stronger when you’re moving towards older televisions or set-top-boxes. For that reason it’s important to pick a framework that’s focused on performance and speed, and that you can potentially tweak to limit the amount of memory usage. As an example, Svelte is particularly optimised through different compilation steps, making it a prime candidate. On the other hand you can also use LightningJS, a framework specifically developed for Smart TV development. - Focus management
While it might sound easy, movement with just 4 different keys (LRUD), implementing focus management sadly isn’t as straight forward. Especially when you’re considering a proper separation of your user interface into different components, managing focus shifting between those components can become complicated. Because of that, it might be worth picking a framework that already has a (third party) library to handle TV-remote input. Popular frameworks like Vue, React and Lightning all have focus management available in some way.
With those two topics in mind, you should be set up nicely with picking a framework of choice. One final topic that might interest you, is cross-platform development. In this blog we’re mainly considering web-based Smart TV development. However, you might also want to run your application on Apple TV (powered by Objective C/Swift), or also support mobile phones and tablets. For that reason it’s good to understand the different types of Smart TV platforms out there, while also considering the effects of your choice on mobile and tablet:
Step 3: Developing your user interface
Understanding the basics? Check. Framework selected? Check! So you’re all set with getting the development started. As you might have seen from the referenced design blog, TV applications are using certain principles for displaying video content items. So it is only logical that we focus our efforts into creating a set of components and pages that we can use across different pages. I would suggest you put your primary focus on creating these components:
- Row/Swimlane → displays all your video cards in a left-to-right scrollable view.
- Header/Carousel → used at the top of pages to highlight specific items, often moves automatically to highlight different items.
- Video card → portrait or landscape tiles displayed inside your row/swimlane, often with an image and title to inform the user what the item is.
That’s it. Yes, that’s actually it. Of course you can make it as difficult as you want with different sizes of items, different behaviours or maybe a row with just a single item to highlight it in the middle of your page. The options are of course endless. But, in principle, a set of video cards is all you need to get your user to watch video. You might attach it to a detail page that displays additional information about the movie or series, but in principle this is all you need. And then finally, the hard part, the video player.
Step 4: The video player
The final step where, for the end user, it all culminates: the video player. Because what is a TV application without a video player, right? When you’re building your video player you can split it up in two sides of the coin: the interface that the user interacts with, and the ‘engine’ that actually does the video playback.
Building your user interface can be pretty simple too, depending on the use case. If you’re only working with video on demand (meaning a video with a specific start and end time), the user interface doesn’t require too much thinking. Display a progress bar that starts at 0 and ends at the duration of the video, maybe some controls like pause, play, fast forward and rewind, and you’re off to the races. If you want to make it more complicated, especially live video that you can fast forward and rewind in, will require a lot more thinking and tinkering.
The second aspect, the engine, is probably the hardest decision you’ll have to make. As it drives a lot of the aspects of how the video is played, and where it can be played properly, this isn’t something you just ‘do’. I’d really recommend thoroughly reading up on video players:
For the sake of getting started with things and continuing your learning journey, the easiest is of course to pick a free and open source video player. There are plenty of open source players to choose from too, my personal preference has always been Shakaplayer, so that’s one I can recommend. You can also find an overview of other open source video players and pick one that takes your fancy.
Step 5: Debugging and testing
Okay, I lied. The hardest part isn’t the video player, albeit they might be equals: debugging and testing really isn’t as easy as you might think. Taking a reference from web development, you also test a website in different browsers and on different devices, right? That same principle simply applies to Smart TV development too — and as you can imagine it’s a whole lot harder (and much more expensive) to get a set of televisions to debug and test with.
For the educated among us, the obvious solution sounds like using simulators, right? Well… yes and no. It is true that there are some simulators available, and they might give you some insights into how your application works. The sad part is that they don’t have a full overlap with real televisions, and often lack certain functionality or behave differently altogether. And then there is the problem that not all TV operating systems have a simulator available at all.
Which really brings us to the final difficulty of becoming a Smart TV developer. Making yet another comparison, if you develop for web you’ll generally target three or four browsers: Safari, Chrome, Firefox and maybe Edge. And of course, you only support the latest versions of those browsers. Sadly that’s not at all going to be possible for Smart TV. For starters, there are about 15 different operating systems out on the market, all with their different browser implementations and device APIs and capabilities. The other aspect, which you might have come across in some of the linked blogs here too, is the fact that televisions don’t get updated that frequently. Meaning you’ll often have to support televisions with browsers that are 5, 6 or even up to 10 years old. It makes the need for getting access to TVs for testing purposes all that harder, and much more expensive.
The solution to all of this isn’t something you’ll likely achieve by yourself as a starting developer, but it for sure is cool to have. Down below you’ll find a picture of one of our TV testing labs. It contains a lot of televisions from the likes of Samsung, LG, Hisense, Philips, Vizio, and much more. All devices that we support and frequently test, debug and play with. If you’re interested in learning how we use our lab, you can read about it in this blog from my colleagues.
What’s next
Okay, so now you should hopefully have a grasp on what developing for Smart TV entails, and how you can get started. We’ve walked over the basics of what a Smart TV application is, and learned which user interface elements you can start with. The way you do development is entirely up to you, meaning you can even start out with a JavaScript framework you’re already familiar with. While the user interface is simple, there are also some clear parts that require some more thought; for example the video player, and especially your testing and debugging setup.
I would start simple, just pick a framework and start building out your user interface. Maybe you’ll make a Netflix or Disney+ copy, just for the sake of learning. Because that’s where this all starts. Beginning with some small development, and with some trial and error. Worrying about a testing lab and all that stuff can come later. Letting you in on a secret: we do most of our development and testing in regular webbrowsers anyways ;).
Hope this has helped you gain some insights into the wonderful world of Smart TV development, with some handles to get yourself started. If you do have any leftover questions, feel free to hit me up on LinkedIn. Best of luck in your development journey!
PS. We have a LinkedIn community just for Smart & Connected TV developers, come join us!
