App Development

Best-practice tips when developing for the Roku platform

Shell of Roku TV screen

Developing for Roku

As video streaming platforms become more and more popular, the demand for robust, responsive applications is also growing. Roku is at the front of this trend.

Software development in general requires a fair amount of ramp-up and learning, so developing for an emerging platform like Roku is an even more daunting challenge. If you find yourself faced with the task of creating a Roku application, the good news is that it doesn’t have to be so different from other frameworks (it might just take a little bit more discipline).

We’re working hard at WillowTree to beef up the toolsets and best-practices guidelines for Roku development, and we’ve learned some important lessons along the way. divider 600

Tip 1: Have a solid architecture

For those of us coming from a platform like iOS that guides developers into architectures such as MVC (Model View Controller), Roku makes no inherent decisions on the structure of an app. Sure, they give you Scene Graph components and the concept of a “Scene” but in reality there is not much direction on how data should flow.

Having a sound architecture is invaluable to creating a scalable Roku app that can maintain different navigation windows while also supporting a global state of the app. At WillowTree, we have adopted a redux-like approach to BrightScript that uses unidirectional data flow to facilitate actions and maintain state.

In other platforms it’s easy to take these architectural designs for granted, but in BrightScript this is an incredibly important decision that has maintained our sanity as developers. Learning BrightScript has reinforced the need for scalable architectures like Redux.

It’s extremely helpful to have a common language to speak when you step into a completely foreign environment. In Redux terms, there’s peace of mind that somewhere actions are being produced and the store is consuming them by altering a global state of the app. When you have a familiar framework it becomes easy to start contributing even when you may not be familiar with the syntax of the language. divider 600

Tip 2: Can’t find it? Make it yourself

With the introduction of SceneGraph elements into BrightScript, developers now have many stock UI elements to work with. However, these elements seem rigid coming from iOS where there is a mature UI framework with customizable cells, storyboards, autolayout, etc.

For example, a common element in Roku apps is the RowList (a grid that the user can browse for content to watch), and while the RowList allows varying sized items by row, all elements in a row must be the same size. This is limiting when you have designs that want to highlight different types of content in the same row by differing their size.

While we could have altered our designs, we decided to make a custom row list that can accommodate different sized items. There are always tradeoffs when making decisions like this; you spend time and effort to build in features that come stock with the traditional RowList, such as handling navigation, animation, focus points, but in the end we have a more flexible row list that could be used in the future on similar use cases.

Building on top of the frameworks supplied by Roku has been a common theme throughout our development process at WillowTree. We have built out a custom BrightScript linter, custom build tools, and many other custom UI Components. As, say, an iOS developer, you’ll often find yourself leaning on the tools supplied by Apple, but exploring Roku definitely requires you to go out of your comfort zone to build these components yourself. divider 600

Tip 3: Recognize every platform has its strength

It is no secret that every platform and language has their advantages. If you’re coming from iOS, you’ll be used to Swift and its strong type system, but coming to BrightScript, you’ll realize that this isn’t exactly Roku’s strength. BrightScript has no concept of traditional “classes”, so inheritance and object-oriented design can almost be thrown out.

Which is not to say that Roku doesn’t bring its own unique strengths with it; BrightScript allows developers to observe fields on components and trigger callback functions when these fields change. This makes updating the UI in response to state changes very easy.

Roku devices are designed to display media content, and they certainly make it easy for developers to do this in their apps. On newer firmware there is even a feature to pass a list of videos for the video player to chain-play together. This feature in iOS or Android would require more logic to implement.

BrightScript’s Poster (i.e. image) component also allows developers to just pass in a url and even a fallback image if the request fails and the component handles the rest of the logic, once again, making it easy to get images and videos on to the screen.

While other platforms have more flexible features and use more mature languages, Roku knows their strength is getting content in front of users, and they are taking advantage of it. As a developer it is important to lean into these strengths and tendencies. divider 600

Tip 4: Contribute to the Community

Compared to the developer community of iOS and Android, Roku’s support system is just in its infancy. As a result, gathering momentum to contribute can be harder than on other platforms. At WillowTree we’re excited for the opportunity to be leaders in this space, and have a lot in the works to help build and strengthen the Roku community.

Of course, we can’t do it alone. While you’re building a Roku app, always be looking out for ways that you can contribute to making the platform an easier place for others to develop. It’s only with the help of a wide range of engineers that we can grow and improve the state of Roku development.

Quickstart-Guide-to-Kotlin-Multiplatform

A Quick Start Guide to Kotlin Multiplatform

Kotlin Multiplatform, though still experimental, is a great up-and-coming solution...

Read the article