Kopytko Roku Ecosystem published!

Paweł Hertman
DAZN Engineering
Published in
6 min readOct 7, 2021

--

Roku and DAZN

I’m happy to announce that the Kopytko Roku Ecosystem, the result of years of developing the DAZN app for Roku platform, a game-changer of Roku apps architecture, has been published!

Roku is a generation of digital media streaming devices. They are very popular in the USA but appear also in Canada, Brazil, and some European markets, gaining more countries every year. Roku apps are written in device-dedicated BrightScript language.

The Kopytko team, from which our Ecosystem takes its name, is part of DAZN — the global live sports streaming service. We develop mainly Roku and Chromecast DAZN apps. At DAZN we use a lot of open-source code so we wanted to give back to the community.

As a BrightScript developer, you might have experienced writing apps for the Roku platform using adapted ActionScript’s RobotLegs framework or SceneGraphDeveloperExtensions. Some like them, some don’t. We think there should be a more developer-friendly, modern, and intuitive alternative. There are also some small frameworks like Roact, RokuFramework but, when starting rewriting our app, we didn’t know if they are stable and trustworthy.

That’s why, after 3 years of development, we decided to share our work with the community and finally publish Kopytko Roku Ecosystem. It consists of 5 modules:

  • Kopytko Packager — a package builder and importer for the Roku platform,
  • Kopytko Framework — a framework created to build simpler and cleaner components in Roku SceneGraph, allowing to write component code declaratively instead of imperatively, leading to a less error-prone codebase and improving its maintainability overall,
  • Kopytko Utils — a collection of modern utility functions for Brightscript applications,
  • Kopytko Unit Testing Framework — extended Roku’s Unit Testing Framework with additional assert functionalities and the mocking mechanism,
  • Kopytko ESLint Plugin — set of Brightscript rules for ESLint.

The Journey

The journey of Kopytko Roku Ecosystem started in 2018 with a decision to create our own framework. As the team consisted of mainly Javascript developers we took inspiration from the more evolved ecosystem that Javascript provides compared to Roku. That’s how the React-inspired Renderer, Angular-inspired Router, and Brightscript implementations of JS mechanisms such as Promise and setTimeout were born. Eventually, after implementing more utils, the code has been split into Kopytko Framework and Kopytko Utils packages.

When I started work with Roku, the only way to pack and deploy apps I knew was via Roku’s Makefile. Our team found it too mysterious and not so comfortable to use and that’s how we decided to use Roku Package Manager, keeping in mind it theoretically gives a possibility to easily install external libraries. However, we weren’t satisfied as the code was difficult to modify so we decided to write our own Kopytko Packager. We lately had a short romance with the ROPM library as support but due to differences between our needs and implemented features, and some issues, we ended with our fully custom solution.
After years of constant improvements and adding new features, the Kopytko Packager allows building environment-specific apps with a dynamic manifest file, deploying and signing them, installing external dependencies (known as Kopytko Modules), importing dependencies via annotations, and using custom plugins to modify packages.

We started writing unit tests using Roku’s official unit testing framework. With every month the frustration of how long does it take to cover new features with unit tests was bigger and bigger. No possibility to mock other entities was problematic. Thanks to our custom way of building apps and annotations support in Kopytko Packager we created automatic and manual mocking mechanisms. Some additional assertions, some handy helpers over original Test Suite object, Kopytko Framework support, and voilà — Kopytko Unit Testing Framework is ready to make developers life easier.

Kopytko Packager

Initialize your NPM package, create a .kopytkorc file with environments config and let the magic happen! Packager offers a few scripts to pack your Roku app and deploy it, rekey the device, and generate a package ready to upload to your Roku channel. By configuring multiple environments you can generate a dynamic manifest file or get rid of specific files like unit tests in your production package via custom plugins.
Using external libraries has never been so easy — just install Kopytko Module NPM packages and the Packager will automatically copy their files.
No more writing dozens of <script/> tags — thanks to @importannotations split your code into as many atomic files as you wish and all your dependencies will be recursively automatically added to your XML files during the build process. It works both with your internal files and files from installed external Kopytko Modules.
Unfortunately for v1.0 we didn’t implement automatic prefixing functions with a package name so keep in mind potential naming collisions (as Roku allows just one function with the same name per component’s scope). It is the highest priority on the roadmap.

If you are a creator of a Brighscript library and want to support our movement, make your library a Kopytko Module in few easy steps and make it easily accessible for other developers! The full list of public Kopytko Modules is available here.

The output of the start script

Kopytko Framework

Writing Roku SceneGraph apps game-changer! Configure routes, create and attach your main Kopytko component to the main scene, call its initKopytko function and let the framework do the rest.

Framework’s Renderer takes care of rendering the whole tree of components. Attaching listeners to children events, passing props from parent to children, and re-rendering components on props or internal state changes out-of-the-box.

Example Kopytko Component’s template

Framework’s Router allows changing routes (operating on URL) with the automatic rendering of a proper view in the RouterOutlet component. It offers also nested routes feature, query params and back journey support, and route middlewares (in Angular known as “Guards”).

Framework’s HTTP module gives an easy way to send HTTP requests. Just create a node extending framework’s Request node with possible additional building request payload and response parsing, and use it with createRequest function. It automatically wraps a request in a Promise object — modern ways of dealing with asynchronous operations came to the Roku world!

Kopytko Framework offers also such modules as Caching mechanism, Event Bus implementation, Modal UI component, Registry facade, Store object, and Theme UI configuration.

Kopytko Utils

It is a Kopytko Module with a collection of modern utility functions for Brightscript applications. Provides a lot of JS stuff adapted into Brightscript. The main features are:

  • lodash library inspired Array, Math, and Object utils
  • JS-based Promise object and related functions
  • JS-based interval and timeout functions
  • JS’s apply-based functionCall function to run any function in a specific context
  • Basic ReactiveX inspired implementation of observables
  • SceneGraph’s Node utils
  • Animator — an easier to use facade over SceneGraph’s animation mechanisms
  • facades of some BrightScript’s Components and their mocks ready to use with Kopytko Unit Testing Framework
  • other utilities, e.g. isFalsy, padStart, uuid functions

Simply install it via NPM and with ease use in your Kopytko Packager-based app.

Kopytko Unit Testing Framework

The unit testing framework works on top of the Roku Unit Testing Framework. Thanks to using Kopytko Packager it is a faster way to write unit tests — it automatically generates test nodes, imports test suite files, provides a mocking mechanism, and offers additional assertions. It also contains a dedicated KopytkoFrameworkTestSuite which is Kopytko Framework aware and automagically cleans Kopytko components between every test case making your tests independent and deterministic. In contrast to Roku’s official testing framework, Kopytko Unit Testing Framework unit test files can (and have to) be placed next to the tested unit, in the `_tests` subdirectory so it makes the files tree cleaner.
It also offers a fakeClock mechanism to synchronously, in a controlled manner, call Utils’ setTimeout/Interval callbacks.

Thanks

I would like to thank DAZN for support and the possibility to prepare, improve and share part of our codebase with the community. Huge thanks to all past and current Kopytko team members — contributors of the Kopytko Roku Ecosystem ❤

Source: https://beszamel.se.pl, Polish meal — Kopytka

--

--