Erik Uggeldahl & Andrew Emmons

UI TV builds streaming apps for mobile, consoles, smart TVs, and set-top boxes using a C++ rendering engine. Customers struggled to find developers for C++ apps, so the team explored JavaScript and chose React Native’s APIs and ecosystem. They aimed to make their engine another React Native platform.

The team found useful foundations in React Native’s C++ bridge, Yoga layout, and Folly Dynamic for handling JavaScript data. C++ JavaScript interpreters also gave them choices for platform compatibility and app size. By late 2016, they had a prototype rendering React Native components through their engine.

Uggeldahl describes C++ as a systems language that offers control over memory and performance, while requiring developers to manage complexity. UI TV drew on game engine practices, where teams target different hardware and aim to render at 60 frames per second, or about 16 milliseconds per frame. Its engine organizes rendering around scene trees and views, with platform bridges for shared services.

UI TV launched its React Native interface with engine version 5.0 on August 28, 2018, and continued monthly releases. It also built an optional After Effects plugin for designers, using Protocol Buffers to serialize and compress designs. The team recommends measuring bottlenecks: profiling revealed a background image that used 20 MB on the GPU, which they reduced to 100 KB.

Because Roku requires BrightScript and does not offer the usual C++ route, UI TV ran the React Native app in the cloud and sent a higher-level scene graph to a Roku thin client. The client rendered interface elements locally, avoiding streamed pixels and reducing interaction latency. Custom JSX tags also let developers connect React Native business logic to After Effects layouts and animations.