How We Took React Native to Roku by Playing in the Clouds

Erik Uggeldahl
Erik Uggeldahl

One of the most common questions I get when discussing You.i Engine One is, “Does it support Roku?” The answer is yes but with a twist. Allow me to explain You.i TV’s approach to deploying an app on Roku while sharing the same codebase with platforms like Apple TV, Samsung Tizen, Xbox One, and others.

Why Roku?

Roku is the most popular streaming device in North America. As of a few months ago, Roku has sold over 41 million devices in the United States alone. Roku’s success is the result of a few factors.

First and foremost, it’s affordable. Flexible options range from low-end hardware like a streaming stick to the Roku Ultra 4K. If you’re a user who just wants to stream YouTube videos in HD, a $30 Roku Express Stick will meet all your needs and then some. Secondly, Roku is a relatively open platform. There are thousands of channels available, many of them free, offering movies, TV shows, kids content, and live sports feeds. Lastly, because of its early entry into the streaming space, Roku has had a headstart in acquiring viewers. Even though there are plenty of streaming devices to choose from today, Roku is familiar and sufficient enough for most users to keep them on the platform.

Deploying a streaming app on Roku is a smart investment but challenges do arise when going cross-platform. The way Roku’s development is set up requires engineering teams to build for it exclusively. If it were a one-off device, this might not be a problem, but going cross-platform means managing multiple iterations of an app on all relevant platforms. Staffing engineers solely for Roku can become costly when looking at the bigger picture.

Understanding Roku’s Development Environment

Roku’s development language is called BrightScript, a scripting language that runs above the Roku kernel. It is the sole way of interfacing with Roku hardware. Roku later introduced the SceneGraph API, an additional node based layer above the Roku API to declaratively build UI components.

BrightScript does not support C++ compilation nor executing JavaScript locally. This created challenges for us early on as our SDK centralizes development on a single-engine architecture built in C++. We’ve also added support for React Native (JavaScript) as the interface framework of choice. Our engine abstracts the nuances of each platform while providing consistent rendering by leveraging the graphics processing unit of the hardware. This approach works for all platforms that support compiling to C++, but Roku’s development environment is one where this is not an option.

You.i Engine One-React Native-Architecture-Roku-BrightScript

You.i Engine One Architecture (left) – Roku Development Environment (right)

With this limitation in mind, and while still wanting to preserve a single codebase, we began exploring a cloud-based approach that would execute application code remotely and send the results to the hardware.

You.i Engine One, Roku, and the Cloud

Our approach to deploying on Roku is best understood by comparing it to the way a web browser works. In this case, You.i Engine One moves from being executed locally to being executed in a cloud server. When the user launches their app, much like a user navigating to a website, the app connects to a gateway that routes it to a virtual machine with an available instance of the app.

You.i Engine One-Cloud-Roku-BrightScript-Browser

Each server can host 100 instances at least, and 200 on average. As the system reaches capacity, new servers are spun up to ensure scale. This application is run headless, meaning it produces no graphics to save on system resources. Instead, when the engine renders the scene it is transformed into SceneGraph components and serialized to the Roku. This is very similar to how a web server produces HTML to send to a browser.

When this information is received, it is decompressed and turned into the app that the developer intended to display. At this point, the components are totally local and the user can interact with them normally. When a user makes a selection, the event is forwarded to the server. This is comparable to clicking a link in a web browser. The input is processed and the new result is sent back to the client. If the change is small enough, the result can be patched into the scene rather than re-writing the description entirely. We call this technique sub-tree updating.

Roku-SceneGraph-BrightScript-Browser-Cloud

The Drawback

One side effect of this technique is that it introduces latency between the user’s click and the resulting update to the screen. On average this latency is roughly comparable to clicking on a link in a web browser.

In exchange, we can fully unify the application development language with React Native and JavaScript. In fact, each Roku app that goes to market using this technology is the same generic implementation of the network protocol. We call this the “thin client”. It pre-integrates ads, analytics, in-app purchasing, and advanced UI behaviour to ensure that you don’t need to write BrightScript for many common use cases.

Add Roku to Your Platform Strategy

It’s been an interesting R&D journey getting here, but we’re happy with the result. As of today, our Roku solution can scale to 1 000 000+ concurrent users and has performed for major events, such as the Super Bowl and March Madness. It is also under continuous improvement, with the latest optimizations squeezing an additional 2 times the number of engine instances per VM while also employing techniques such as serializing and hibernating the app during long periods of video playback.

Working with Redbox has been another milestone. Using our solution, they have become the industry’s first-ever Roku app to run entirely on React Native.

There has never been a better time to start writing an app with React Native for Roku on You.i Engine One. If you’re interested in a trial, click here for more information.

Here’s something similar we think you’ll enjoy.