App Development

"Rocute:" Beautiful UI Components for Roku Development

Introduction

Coming from the background of a web developer, and a happy customer of Roku, I was used to two things: an exhaustive, ever growing population of open source component libraries in my professional life, and a simple, digestible interface that spanned across all my Roku apps in my recreational life. Both made me a happy camper.

A few months ago, when first diving into Roku development, I was unable to find such libraries for generating UI on the platform. At first, this was troublesome, as utilizing and dissecting such libraries has always been instrumental for me in learning how new languages and platforms work. However, in time and in learning more about BrightScript and SceneGraph, a teammate and I realized this would be the perfect opportunity to author and contribute this type of library to the Roku development community.

The Purpose

The intent was to both improve the experience of users, and make Roku development faster and easier. Our library, Rocute, was created with the following idea. All Roku apps or channels, at their core, are essentially nested lists of text, images, and other content that will feed down to a selection which will trigger video playback. There are other features, such as authentication and analytics that may and will often exist, but from the position of common functionality and UI, this seemed to be the base. So, we set out with the mission of creating a combination of common and simplistic reusable components, alongside more elegant, innovative, reusable components to display said information in apps.

The Process

To create the library, we initialized a new project utilizing ukor, an existing build tool for Roku apps. With a good idea of things we wanted to create and replicate from other platforms, the first action item was project setup. We needed to structure the project to allow for not only our components to have constraints-free usability outside the rocute project, but also for rocute to be an easy to digest demo project, providing a visual example for each component. The visual structure we decided on was a Roku LabelList of each component’s name, which on focus displays an example. On selection of the focused component, the example would become active and where applicable interactive. At a code level, this worked by some basic single page scaffolding, which included a list area and display area on the left and right hand sides of the app, respectively.

Rocute1

This setup would then reference the contents of multiple example folders. In each of the example directories, there is also plentiful documentation on the fields and functions of each component. Any given example folder has the code and content relevant to the demo UI, and then also calls and passes variables to each of their respective components. This will display what each given component does, and how they could be used in any BrightScript project. The component files are standalone sections of code which accept a given range variables, process the given information, and display their UI or provide their functionality in accordance. They sit in folders that can easily be tied into any project with simple project setup, outlined in our broad project documentation.

To summarize, on page load, the user is greeted with a single page application showing a traversable list and toggle-able example. On list highlight, an example component will display and on selection the example will become interactive. At a code level, this example will pass our reproducible component all it’s accessible fields, and will show the functionality of the reproducible component. The components can be used in any project environment. After the channel was structured in this manner, development could be described as creating our initial ideas, and then finding and implementing new ideas and UI.

rocute 2

rocute3

The Outcome

In just under two months of development, the beginning of which was spent still acclimating ourselves to the new platform and stack, we generated over twenty components alongside two custom screensavers. We decided to release our open source project at this point, so others can begin utilizing the work we have as we continue to produce more. We would love for anyone else with ideas to contribute as well, and we are always open to feedback.

Want to learn more about our OTT media delivery experience?

Read More

The Executive’s Guide to Apple’s September 2020 Product Announcements

Today’s Apple Event brought a slew of announcements on Apple Watch Series 6 and...

Read the article