Tech Choices for Connected TV App Development?

But let’s take it back a few steps – what is Connected TV? It is any large screen device that can be connected to an internet source for streaming video, music or browsing content. This includes Smart TV, but also a plethora of other devices such as games consoles, chromecast and set top boxes.

The Philips and Sony brands use AndroidTV OS, while Samsung runs Tizen OS and LG have their own operating system: WebOS. The question is – should you build your app natively on each device, or use cross-platform technologies? And what compromises do you have to make?

NATIVE OR CROSS-PLATFORM?

TVs (connected or Smart) are primarily video consumption devices. Searching and browsing content, navigation and video playback should all thus be smooth. While all new Smart TVs and connected devices support web technologies, some of the device manufacturers offer benefits for building native applications due to the choice of a broader OS & App Store.

On Connected TVs, like on mobile platforms, one can choose different methods for building frontend UI and UX for users such as Native, Web or hybrid technologies, all of which result in consequences. A simple table lists all options below:

INSTINCTIVELY PICKING NATIVE DEVELOPMENT

Logically, it might seem that you should build frontend applications with native technologies to be qualitatively able to cover specific platforms. The limiting codebase can be a good choice if you only target a specific platform, and if performance is paramount. While many choose such options for the largest mobile operating platforms which now cover Connected TVs, some niche platforms like Roku require you to use their native language.

A native development approach would give you full control in creating new features, UX behaviour, performance optimisations, to make the most of the capabilities of the specific device. Native IDEs give you a bunch of tools for configuring your app, debugging and profiling its performance. It relieves the stress from many external dependencies and automatically keeps up with all the platforms native updates and new features.

Unlike cross platform technologies that introduce “bridge issues” and performance overhead, building apps natively from scratch results in the best performance opportunities. The operational management overhead and resulting costs make this less of a technology choice but a business decision. If you choose to go native, you need to decide whether to use native UI templates or create fully customized UIs.

Samsung, LG and PlayStation have no support for Native apps but only provide web based SDKs. TVOS and Roku only support native SDKs. Both Android TV and Xbox support native and web development.

Native UI Templates

If you are limited with time and resources, you should take advantage of the native template apps offered by the platforms.

While creativity can be restricted, it’s not half bad. Apple TV and Android TV offer premade app boilerplates as well as libraries with ready-made UI widgets which help structure and build apps relatively fast. The complexity arises when one strays away from template options to create unique interactions; the overheads can escalate enormously, which may require rewriting core parts of your application.

While templating may seem out of the box, it is a lot to manage when one design does not fit all. Each platform offers its own foundation template, meaning you can’t follow a single UX across all devices. For example, the Apple TV template offers the Top Menu in most apps to navigate sections of an app, so wanting a Side Menu would mean planning dual designs for different TV platforms. You may however argue that users of one device do not use other devices.

Native Platforms like TVOS, AndroidTV and Xbox support Templates from the device manufacturers that are based on the platforms’ UI/UX concepts. Other platforms like Samsung or LG do not provide templates but there are several free and commercially available options.

Fully Custom UI

If you want to create a highly performant, unique application, and you have the time and money to spare – dive in with this approach. As with any custom creation, this would include creating customised UI widgets for a unique and complex design to stand out in an overcrowded market place. While this is the most time consuming approach, the rewards are high.

As development and design would be made to reach quality goals, efforts are higher. While design freedom allows for creativity to soar, development processes can become tedious to reach smooth and consistent behaviour. Couple your animations and navigation with a good offer of content, and you’re golden!

FREESTYLING ON CROSS-PLATFORM DEVELOPMENT

There are many technologies that allow for writing code once for efficient use across multiple platforms. Compared to a native approach, a cross platform technology choice would give you the ability to focus on creating one application that runs on all the target platforms – one design, one development, one team. Creativity can be controlled to the levels that can be chosen based on business and technology goals.

While a single process would address the needs of many platforms, it also reduces the hassle of creating and managing multiple designs and codebases. There are a multitude of web frameworks that can be chosen and development resources for such products are always available, a dime a dozen. A cross platform design would also give you all the freedom to control navigation and style across multiple platforms.

Cross platform technologies will introduce some performance issues as with any one-size-fits-all approach. This can be managed with efficient tweaks on relevant platforms. There are many business gains to be made with trivial performance discounting.

Connected TV platforms like Samsung Tizen, LG WebOS, PlayStation and even many set top boxes support browser-based apps, and if you want to prioritise a vast reach in the most efficient manner, then this approach makes most sense. Cons include the consideration of overhead for some of the platforms where you would need to implement certain “wrappers” to run a web app on different platforms, called widgets or shells. The design would naturally be pretty much the same foundation with possibilities of efficient tweaks for certain key devices. This should be controlled however, since it doesn’t make sense to have multiple designs for one single development process across different platforms.

React Native

This JavaScript library would allow you to write code once and run it as a Native App on certain key devices. With this, you can win the best of both Native and Cross platform benefits, creating native apps on Apple TV and Android TV, while also applying the same code on the web platforms like Samsung and LG (with the help of React Native Web library on top of it).

The app written in JS would communicate with the native layer in order to build the UI using native widgets, bringing you the same native feel as you would build a native app. For example it brings the native spatial navigation system on both Apple TV and Android TV. On Apple TV you also get the parallax effect when moving the finger on the touchpad of your remote out of the box. These features provide native feel while also don’t require you to have specific design, as they can be experienced only dynamically (e.g. when you navigate through the app) and usually are not specified in the design documentation.

Another powerful tool that this approach gives is the direct access to the native player APIs (e.g. Exoplayer on AndroidTV, or AVPlayer on AppleTV) through either public third party libraries like “react-native-video”, or through custom build native wrappers.

There are however certain limitations with React Native when it comes to very complex animations or some specific custom implementations of the spatial navigation and scrolling, which might require more effort to have acceptable performance, especially on low end devices.

As of now, React Native does not support Roku but covers many other major Connected TV device platforms.

Hybrid Web Apps (with React or similar)

Another popular way of developing cross platform apps is when you write it as a web application using any JavaScript technology, and then port it to all target platforms that support embedded Web Browsers (or Web Views). For example Samsung Tizen platform supports web apps via embedded Chromium browser. Android TV can handle web apps via Web View, and so on.

Most of the modern Web Views support MSE and EME extensions that enable DRM video playback with JS players. This approach provides maximum predictability and portability of the UI (both in terms of elements behavior and the styling of them) and spatial navigation behavior. The downside compared to Native or React Native approach is that the UI rendered in the web browser is generally a bit less snappy and doesn’t provide the full native feel. Although on a good performance device it is quite possible to have UI rendering at 60 FPS. Keep in mind that this approach doesn’t give you the possibility to use native UI widgets.

Roku and Apple TV do not support web engines so the hybrid approach will exclude these devices.

A SANE STRATEGY TO BUILD CONNECTED TV APPS?

When choosing your tech choices to build large screen Connected TV apps for your streaming service, there are many considerations to make that will affect your budget, design creativity and team setup. As such there is not one recommendation that will fit all but we’ve tried to summarize the pros and cons:

As with any technology decision, it’s important that the business and team fully understand the implication of each approach. The result will only be as good as the team that is delivering it as long as all limitations are understood and remembered.

Why should your streaming service be on Smart TV? Check out this blog post.