Forem: Ivan

High-Performance Data Orchestration in Roku OS 15.0

Ivan — Sat, 27 Dec 2025 15:04:39 +0000

If you’ve ever built a Roku channel that handles massive JSON metadata or complex content grids, you know the "Rendezvous" pain. You update a field on a Task node, the Render thread freezes for a few frames to copy that data, and the user sees a stutter.

Roku OS 15.0 introduced significant change is this regard - we can now pass data across threads with near-zero overhead.

1. Moving vs. Copying: The MoveIntoField Revolution

Traditionally, assignment like node.field = myAA performed a deep copy. In OS 15.0, MoveIntoField() and MoveFromField() literally transfer ownership. The data moves into the node, and your local variable becomes empty.

' --- BEFORE (The Blocking Copy) ---
'...do some work
' m.top.content = hugeAA 
' 1. Task thread stops.
' 2. Render thread stops.
' 3. Both wait for a deep copy to finish. 
' 4. Breakpointing here kills the app because 
' the Render thread is "stuck" waiting.

' --- AFTER (The Non-Blocking Move) ---
sub finishTask(hugeAA)
    ' ...do some work
    ' MoveIntoField transfers the memory pointer instantly.
    m.top.MoveIntoField("content", hugeAA)

    ' hugeAA is now empty. The Task can exit or move on without 
    ' holding a redundant copy in memory.
    ? "Task complete. hugeAA is now empty: " ; hugeAA
end sub

2. Render Thread References: SetRef and GetRef

Sometimes you don't want to move/copy data - you just want the Render thread to look at a single instance of an object. This is now possible via Reference APIs, though they are strictly limited to the Render Thread.

SetRef(): Assigns an AA to a field by reference (no copy).
GetRef(): Retrieves that reference for use.
CanGetRef(): A safety check to see if a reference exists.

The Catch: Field observers are not notified when you use SetRef(). This makes it perfect for high-frequency data (like coordinate tracking) where you don't want the overhead of the observer system firing constantly.

' --- BEFORE (Memory Inefficiency) ---
' m.childA.data = m.top.content ' Copy 1
' m.childB.data = m.top.content ' Copy 2 (Memory usage doubled)

' --- AFTER (Robust Reference Sharing) ---
' This must happen on the Render Thread (e.g., in an observer or queue handler)
sub shareTaskData()
    ' Use GetRef to ensure we aren't creating a local copy when reading from m.top
    if m.top.CanGetRef("content")
        ref = m.top.GetRef("content")

        ' Pass the pointer to children. No deep copies are made.
        m.childA.SetRef("sharedContent", ref)
        m.childB.SetRef("sharedContent", ref)
    end if
end sub

3. The roRenderThreadQueue

This API is the architectural solution to the so-called "SceneGraph Hole." It allows Task threads to send data to the UI thread without triggering a Rendezvous (a synchronous lock that freezes the UI).Think of it as a thread-safe mailbox. The Task thread drops a letter in and keeps walking; the Render thread checks the mailbox when it has a free moment between drawing frames.

The Core APIs

roRenderThreadQueue: This is the manager node. You typically initialize it on both the Render thread (to listen) and the Task thread (to send).
AddMessageHandler(message_id, handler_name): Registers a specific function to run when a message with a matching ID arrives.Multiple handlers can be attached to one ID.Handlers are executed in the order they were registered.
PostMessage(message_id, data): This is the high-performance choice. It moves the data.
CopyMessage(message_id, data): Similar to PostMessage, but it performs a deep copy.

' --- BEFORE (Rendezvous Dependency) ---
' m.top.updateData = hugeAA 
' Scene.brs has an observer on task.updateData.
' The moment this assignment happens, the threads are "locked."

' --- AFTER (Decoupled Messaging) ---
' [Inside Task Thread]
sub runTask()
    hugeAA = loadMassiveJson()

    queue = CreateObject("roRenderThreadQueue")
    queue.PostMessage("FEED_UPDATE", hugeAA)
end sub

' [Inside Component/Scene .brs]
sub init()
    m.queue = CreateObject("roRenderThreadQueue")
    m.queue.AddMessageHandler("FEED_UPDATE", "onFeedUpdate")
end sub

sub onFeedUpdate(data as Object, info as Object)
    ' 'data' is the moved AA. No Rendezvous ever occurred.
    m.myGrid.content = data
end sub

Conclusion:

In my humble opinion, this is the single most important architectural shift in Roku development since the introduction of SceneGraph itself. If you’ve been building Roku channels for a while, you must have spent half your life fighting the performance cliff where your app’s speed is dictated by how fast the CPU of the device is. These OS 15.0 APIs finally let you stop copying your data and start just "pointing" to it. Here is why this is a game-changer for your workflow:

Low-End Device Salvation: On a Roku Express with limited RAM, a bunch of data used to be a death sentence because of the memory spike during a copy. Now, you can handle massive JSONs on cheap hardware because your memory footprint remains flat.
The End of "Jank": Those micro-stutters in your RowList when a background task finishes? Gone. Since MoveIntoField and PostMessage are O(1) operations, the Render thread doesn't have to pause to ingest data; with the new API it happens in much less time.

Relevant links:

Take control of loops with Symbol.iterator

Ivan — Tue, 05 Nov 2024 10:39:29 +0000

Have you ever used an Object.entries and wondered how it works? It is much simpler than you think!

Here's a basic implementation:

function objectEntries(obj) {
  const entries = [];

  for (const key in obj) {
    if (Object.hasOwn(obj, key)) {
      entries.push([key, obj[key]]);
    }
  }

  return entries;
}

However, this code is not quite good enough - what if the object was massive? The performance of the array based approach will have to be stored in memory for the whole process of executing this function. And if you use it again? It will have to build and keep a new array in memory just the same. In the real world, this can lead to serious performance issues and at some point we would need to accommodate for performance. However, there is an elegant solution which will solve all of these problems, in which Symbol.iterator comes to the rescue!

Here is an updated snippet:

function objectEntries(obj) {
  return {
    [Symbol.iterator]() {
      const keys = Object.keys(obj);
      let index = 0;

      return {
        next() {
          if (index < keys.length) {
            const key = keys[index++];
            return { value: [key, obj[key]], done: false };
          }
          return { done: true };
        }
      };
    }
  };
}

Why Use Symbol.iterator for Iteration?

In our initial implementation, the objectEntries function builds an array of all entries ([key, value] pairs) in memory, which can be a problem if the object has a large number of properties. Storing all the entries in an array means we have to allocate memory for every single pair in advance. This approach is fairly OK for smaller objects, but it quickly becomes inefficient and simply slow as object size grows.

In the updated code, we define [Symbol.iterator] on an object that holds the iteration logic. Let's break it down step-by-step:

Initialize Keys: Object.keys(obj) fetches an array of keys from the object obj. This list of keys allows us to know exactly what properties we need to access without storing every entry.
Use an Index Pointer: A variable index keeps track of our current position in the keys array. This is the only state we are going to have in the loop.
Define the next Method: The next() function uses index to retrieve the current key and increment it. It returns each [key, obj[key]] pair as a value, and sets done: true when we’ve iterated through all the keys.
By doing this, we enable objectEntries to be compatible with any for...of loop without the memory cost of creating an entire array of entries upfront.

Applying Symbol.iterator to custom loops

Let’s dive deeper into how these methods can provide more control over loop behavior. Each of the examples provided demonstrates a unique way to interact with array data, adding a lot of flexibility to your code. We'll explore the implications of each method and how they can be leveraged in different scenarios.

In these examples I am going to extend the Array prototype (more info on prototypes here) with the example methods to make my code easier to read. Let's jump right in!

For instance, this reverseIterator method can come in useful in something like a chat application where you might want to display the most recent messages first. Chat applications are notorious for having a LOT of data (messages in this case). Using reverseIterator, you can iterate through a list of messages and display them in the desired order without needing to create a new reversed array.

Array.prototype.reverseIterator = function() {
  let index = this.length - 1;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index >= 0) {
          return { value: this[index--], done: false };
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers.reverseIterator()) {
  console.log(num); // 5, 4, 3, 2, 1
}

This unique method enables you to iterate through an array while making sure that only unique values are yielded. This is super useful for eliminating duplicates on the fly, without filtering it in advance and using more memory.

Array.prototype.unique = function() {
  const seen = new Set();
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        for (let i = 0; i < this.length; i++) {
          if (!seen.has(this[i])) {
            seen.add(this[i]);
            return { value: this[i], done: false };
          }
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 2, 3, 4, 4, 5];
for (const num of numbers.unique()) {
  console.log(num); // 1, 2, 3, 4, 5
}

The chunk method below can be useful when dealing with large datasets, you can process them in smaller chunks to reduce memory usage and improve performance. Let's say you are importing data from something like a CSV file,you can read and process it in more scalable segments. Moreover, in web user interfaces, chunking can be used for pagination, allowing you to display a specific number of items per page or help you better manage an infinite loader.

Array.prototype.chunk = function(size) {
  let index = 0;
  return {
    [Symbol.iterator]: () => ({
      next: () => {
        if (index < this.length) {
          const chunk = this.slice(index, index + size);
          index += size;
          return { value: chunk, done: false };
        }
        return { done: true };
      }
    })
  };
};

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
for (const chunk of numbers.chunk(3)) {
  console.log(chunk); // [1, 2, 3], [4, 5, 6], [7, 8, 9]
}

Conclusion

In this article, we explored how Symbol.iterator customizes the logic and improves the efficiency of our loops. By implementing custom iterable methods on the Array.prototype (or any other iterable to that effect), we can manage memory usage effectively and control how our loop is running.

The initial example of objectEntries demonstrated how an array-based approach can lead to performance issues when handling large objects. However, by using the SYmbol.iterator, we created an efficient solution that allows us to iterate over object entries without the overhead of unnecessary memory allocation.

We also looked at several practical examples of how extending the Array.prototype can facilitate various real-world scenarios developers have to deal with on a day-to-day basis.

With these powerful tools at your disposal, you're better equipped to solve complex data handling scenarios in JavaScript with close-to-zero performance implications on your app.

Build a reactive store from scratch using Javascript

Ivan — Sun, 03 Nov 2024 18:10:37 +0000

Reactive programming is a neat approach that allows you to create applications which dynamically reflect data changes. It’s the core tech behind many modern JavaScript frameworks like React and Vue - it updates in response to user actions or other state changes. Understanding what is under the hood of reactivity can feel like too much work, it feels like one of those 'magic' abstractions that the frameworks are for. But what if you could build a small reactive system yourself to see how it really works?

This article will walk through the basics of reactive programming by building a simple reactive store from scratch in JavaScript. We’ll walk through the key concepts, including dependency tracking and automatic updates, in a minimal implementation. By the end, you should be able to understand how to create reactive data structures that automatically track dependencies and trigger updates whenever the state changes. This approach will help you understand reactivity and will give you the tools to experiment with it on your own, and possibly apply it to your projects.

Let's get started by looking at the core components of a reactive system that we are going to use:

Effects: Functions that automatically run in response to changes in reactive data. They are registered using the effect function, which tracks dependencies on any accessed signals.
Signals: Reactive data properties that notify dependent effects whenever their values change.
Dependencies: The relationships between signals and the effects that rely on them. Dependencies are tracked so that changes in signals trigger updates to the relevant effects.

Now that we are past reactive programming definitions, let's also mention the Javascript APIs we are going to use:

Proxy: The Proxy object allows you to create a proxy for another object, enabling you to define custom behavior for fundamental operations (like property access and assignment). In this code, it's used to make the reactive store (the state object) responsive to changes.

Reflect: The Reflect API provides methods for interceptable JavaScript operations. It is used to perform operations like Reflect.get and Reflect.set in the reactive function, which allows the proxy to handle property access and assignment while maintaining the original behavior of the object.

Map: The Map object is a collection that holds key-value pairs, where keys can be any data type. It is used in this implementation to create the dependencyMap, which tracks the dependencies associated with each signal.

Now, let's start defining what our initial state will look like:


// Let's define a Map object to track our dependencies
const dependencyTrackerMap = new Map();
// The activeEffect variable will hold the currently executing 
// effect function. 
// It will be set when an effect is run and will be used
// to track which effects depend on specific reactive properties. 
let activeEffect = null

// This function will make an object reactive
function reactive(target) {
    return new Proxy(target, {
        get(obj, prop) {
            trackDependency(prop); // Track dependency
            return Reflect.get(obj, prop);
        },
        set(obj, prop, value) {
            const result = Reflect.set(obj, prop, value);
            triggerDependency(prop); // Trigger reactions
            return result;
        }
    });
}

// the effect function will register reactive functions
function effect(fn) {
    activeEffect = fn;
    fn(); // Run the function once to register dependencies
    activeEffect = null;
}

// this function will track dependencies
function trackDependency(key) {
    if (activeEffect) {
        if (!dependencyTrackerMap.has(key)) {
            dependencyTrackerMap.set(key, new Set());
        }
        dependencyTrackerMap.get(key).add(activeEffect);
    }
}

// this function will trigger dependencies
function triggerDependency(key) {
    const deps = dependencyTrackerMap.get(key);
    if (deps) {
        deps.forEach(effect => effect());
    }
}

// This will create a reactive object with an initial state
// count and message here are signals
const state = reactive({ count: 0, message: "Hello" });

So, here is what we have done:

We created a reactive function that takes in an object and returns a Proxy which will track what changes will be done to the object in the future
We created an effect function which registers reactive functions that depend on the state. When an effect is defined, it runs immediately to register any dependencies and sets activeEffect accordingly.
We created a dependency tracker which consists of three parts: the trackDependency function checks if there is an active effect when a reactive property is accessed. If yes, it adds that effect to a set of dependencies for the corresponding property in dependencyTrackerMap. In turn, the triggerDependency function retrieves the set of dependent effects associated with a property from dependencyTrackerMap and executes each of them when the property value changes.

Now, let's create an effect with a callback and try to trigger it:

//We are using state from the previous snippet:
effect(() => {
    console.log(Count has changed: ${state.count});
});

effect(() => {
    console.log("Message has changed");
    console.log(The new message is: ${state.message});
});

The console logs will trigger when we try to update the state we have created:

// Modifying state (or updating a signal) triggers the dependent effects:

state.count++; 
// "Count has changed: 1"
state.message = "Hello!!!"; 
// "Message has changed"
// "The new message is: Hello!!!"

Here is a little visualization of what happens when a dependency is triggered:

In this article, we explored how to create a basic reactive system in JavaScript, enabling automatic updates (or side effects) in response to changes in data. This implementation serves as an introduction to reactive programming concepts, which is part of the framework 'magic'. Besides, we've learned what Proxy and Reflect APIs do, and used them, as well as the Map object.

In summary, this reactive system manages dependencies and automatically updates effects when the state changes. By registering functions that rely on specific reactive properties, the system tracks which functions depend on which properties, re-running them when needed. This approach allows to create responsive applications where state changes are automatically reflected in the UI without additional code, improving developer experience and making data handling easier and more efficient.

Shaka Player for media playback - implementation, use cases, pros and cons

Ivan — Sat, 11 Feb 2023 21:35:18 +0000

If you are looking for a library to play DRM-protected content, stream a live broadcast or monetize your content, Shaka Player can do all of that, and more! An open-source library, Shaka Player is the second-most-popular library for media playback. The library uses native browser APIs like MediaSource and Encrypted Media Extensions. This article will assist you with the basic implementation of Shaka Player, describe its capabilities, and draw out its strengths and weaknesses.

A little introduction

Shaka Player's core uses a few native browser APIs under the hood:

Encrypted Media Extensions (EME) API that is used, when the browser receives the video and fires an 'encrypted' listener. This Google article does an amazing job of explaining the 'under-the-hood' workings of it, and how and when to use it.
Media Source Extension API that helps create and put video segments together, insert ads and change video resolution based on device capabilities and performance. Another Google article explains these concepts in more detail in an accessible way.
MediaCapabilities API to determine whether your device supports the media you are trying to play and can tell you if your media configuration's capabilities allow for smooth and power-efficient playback.
IndexedDB API to cache downloaded videos and subsequently allow for offline playback.

Shaka Player is often used in conjunction with Shaka Packager on the back end to add content protection, text streaming, break the media file into segments for streaming and create a manifest file with metadata for DASH or create respective packaging for HLS.

Basic usage

For the purpose of this article, we will use the freely available DASH manifest from here

To download and use Shaka Player in your project, you can do it in two ways:

Download the Shaka repository to your computer and follow this instruction
via npm/yarn:

npm install --save shaka-player

yarn add shaka-player

Note: if you are using Typescript in your project, you will need to declare types in the d.ts file in your project, like so:

declare module 'shaka-player' {
  export = shaka;
}

declare module 'shaka-player/dist/shaka-player.compiled' {
  export = shaka;
}

Shaka will start supporting types in v5, as mentioned here

In order to initiate the player instance, you need a <video> element in your HTML you can attach to:

<!DOCTYPE html>
<html>
  <head>
    <title>Basic Shaka implementation</title>
    <meta charset="UTF-8" />
  </head>

  <body>
    <video id="video" width="640" height="480" controls></video>

    <script src="index.js"></script>
  </body>
</html>

Now, in index.js:

import shaka from "shaka-player";

const exampleManifestUri = 
"https://bitmovin-a.akamaihd.net
/content/MI201109210084_1
/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd";

async function initPlayer() {
  // Install polyfills to patch out browser incompatibilities
  shaka.polyfill.installAll();
  // Check if your browser supports Shaka at all
  if (!shaka.Player.isBrowserSupported()) {
    console.error("Browser not supported!");
    return;
  }

  //Search for available video element and attach the player to it
  const video = document.getElementById("video");
  const player = new shaka.Player(video);
  // listen for errors for further error handling
  player.addEventListener("error", console.error);
  try {
    await player.load(exampleManifestUri);
    console.log("player has loaded the video, you can play it now");
  } catch (error) {
    console.log(error);
  }
}

document.addEventListener("DOMContentLoaded", initPlayer);

Working example

Usage with controls

Shaka Player has its own controls UI you can add before player initiation. For this, we need to update both our HTML and Javascript code.

In our HTML, we have to add styles and a container element:

<!DOCTYPE html>
<html>
  <head>
    <title>Shaka player built-in UI example</title>
    <meta charset="UTF-8" />
    <!-- for the sake of this article we
 use a sandbox path to shaka styles -->
    <link
      rel="stylesheet"
      type="text/css"
      href="node_modules/shaka-player/dist/controls.css"
    />
    <link rel="stylesheet" type="text/css" href="src/styles.css" />
  </head>

  <body>
    <!-- We need a container to build the UI on top of it -->
    <div id="container" style="width: 100%; height: 100%;">
      <video autoplay id="video"></video>
    </div>

    <script src="src/index.js"></script>
  </body>
</html>

In our Javascript code, we change the import source and add some more logic:

/* we need to import the shaka ui module instead of 
the regular module to gain access to the Overlay constructor */
import shaka from "shaka-player/dist/shaka-player.ui.js";

const manifestUri =
  "https://bitmovin-a.akamaihd.net/content
/MI201109210084_1
/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd";

async function init() {
  const video = document.getElementById("video");
  const container = document.getElementById("container");
  const player = new shaka.Player(video);
  // initialize the UI instance onto the HTML element we created
  const ui = new shaka.ui.Overlay(player, container, video);

  const controls = ui.getControls();
  // Listen for error events for possible error handling.
  player.addEventListener("error", console.error);
  controls.addEventListener("error", console.error);
  try {
    await player.load(manifestUri);
  } catch (e) {
    console.error(e);
  }
}

/* Listen to the custom shaka-ui-loaded event, 
to wait until the UI is loaded. */
document.addEventListener("shaka-ui-loaded", init);

Working example

Now player controls should be visible in your player overlay.

Note: you can use custom shaka styles if you want to stand out!

Adding configuration

Shaka Player lets you configure your player instance, as well as its controls. Imagine you added DRM protection to your content, or you want to cache your video, or you want to add more features to your controls. All of this is possible vide the configure method.
Let's start our video from the second 10 and add tooltips to our controls:

async function init() {
  const video = document.getElementById("video");
  const container = document.getElementById("container");
  const player = new shaka.Player(video);

  // initialize the UI instance onto the HTML element we created
  const ui = new shaka.ui.Overlay(player, container, video);

  player.configure({
    playRangeStart: 10
  });

  ui.configure({
    enableTooltips: true
  });

  const controls = ui.getControls();
  // Listen for error events for possible error handling.
  player.addEventListener("error", console.error);
  controls.addEventListener("error", console.error);

  try {
    await player.load(manifestUri);
  } catch (e) {
    console.error(e);
  }
}

You can do more than that with player config and UI config - add custom DRM sources, toggle media auto adaptation, add more UI features, etc.

Offline playback

Shaka allows us to download assets and store them in the browser database (IndexedDB API from above). The code in the snippet below can be a bit more complex, but some of it will already look familiar.

import shaka from "shaka-player/dist/shaka-player.ui.js";

const exampleManifestUri =
  "https://bitmovin-a.akamaihd.net
  /content/MI201109210084_1/mpds
  /f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd";

function initApp() {
  // Install built-in polyfills to patch browser incompatibilities.
  shaka.polyfill.installAll();

  /* Check to see if the browser supports 
the basic APIs Shaka needs.*/
  if (!shaka.Player.isBrowserSupported()) {
    // This browser does not have the minimum set of APIs we need.
    console.error("Browser not supported!");
  }

  addNetworkListeners();
}

// this function initializes the player and adds the event listeners
async function initPlayer() {
  const video = document.getElementById("video");
  const container = document.getElementById("container");
  const player = new shaka.Player(video);

  /* we will need this in other functions 
so we assign it to the window object */
  window.player = player;

  const ui = new shaka.ui.Overlay(player, container, video);
  const controls = ui.getControls();
  controls.addEventListener("error", console.error);

  player.addEventListener("error", console.error);

  initOfflineStorage(player);

  const downloadButton = document.getElementById("download-button");
  downloadButton.addEventListener("click", downloadContent);

  try {
    await player.load(exampleManifestUri);
  } catch (error) {
    console.error(error);
  }
}

/* Update the online status and add listeners so that we can display
  the network state to the user. */
function addNetworkListeners() {
  updateOnlineStatus();
  window.addEventListener("online", updateOnlineStatus);
  window.addEventListener("offline", updateOnlineStatus);
}

/* grabs an HTML element and modifies it 
depending on your network status */
function updateOnlineStatus() {
  const signal = document.getElementById("online-indicator");
  if (navigator.onLine) {
    signal.innerHTML = "You are ONLINE";
    signal.style.background = "green";
  } else {
    signal.innerHTML = "You are OFFLINE";
    signal.style.background = "black";
  }
}

// downloads the content and stores it in the browser
async function downloadContent(event) {
  event.target.disabled = true;

  try {
    const metadata = {
      title: "Test content",
      downloaded: new Date(),
    };

    // use shaka.offline.Storage to download the content
    console.log("Downloading content...");
    await window.storage.store(exampleManifestUri, metadata);
    console.log("Content downloaded!");
  } catch (error) {
    console.error(error);
  }
}

function initOfflineStorage(player) {
  /* assign the storage object to the window so that we can
 access it later */
  window.storage = new shaka.offline.Storage(player);
  window.storage.configure({
    offline: {
      progressCallback: setDownloadProgress,
    },
  });
  refreshDownloads();
}

// updates the progress number in the HTML
function setDownloadProgress(_, progress) {
  const progressElement = document.getElementById("download-progress");
  const progressInPercent = progress.toFixed(2) * 100;
  progressElement.setAttribute("value", progressInPercent);
  progressElement.innerText = `${Math.floor(progressInPercent)}%`;

  if (progress === 1) {
    // refresh the download list when the download is finished
    refreshDownloads();
  }
}

// fetches list of downloaded files in indexedDB
async function refreshDownloads() {
  const downloadList = document.getElementById("downloaded-content");
  const content = await window.storage.list();
  downloadList.innerHTML = "";
  if (content.length === 0) {
    const listItem = document.createElement("li");
    listItem.innerText = "No downloads yet";
    downloadList.appendChild(listItem);
    return;
  }

  /* list content from indexedDB and 
add buttons to play and remove content */

  content.forEach((item) => {
    const listItem = document.createElement("li");

    const playButton = document.createElement("button");
    playButton.className = "play-button";
    playButton.innerText = "Play";
    playButton.addEventListener("click", () => {
      window.player.load(item.offlineUri);
    });

    const removeButton = document.createElement("button");
    removeButton.className = "remove-button";
    removeButton.innerText = "Remove";
    removeButton.addEventListener("click", async () => {
      await window.storage.remove(item.offlineUri);
      refreshDownloads();
    });

    listItem.innerText = item.appMetadata.title;
    listItem.appendChild(playButton);
    listItem.appendChild(removeButton);
    downloadList.appendChild(listItem);

    const downloadButton = document.getElementById("download-button");
    downloadButton.disabled = false;
  });
}

document.addEventListener("DOMContentLoaded", initApp);
document.addEventListener("shaka-ui-loaded", initPlayer);

IndexedDB does not work in CodeSandbox, so I have created a small git repository with the working feature for you to test it locally.

You can turn off your connection in DevTools to fully test this feature, like so:

Integrating ads

If you are reading this, you got through the hardest part - integrating ads into Shaka is a breeze! Let's start from scratch:

index.html:

<!DOCTYPE html>
<html>
  <head>
    <title>Shaka player built-in UI example</title>
    <meta charset="UTF-8" />
    <!-- for the sake of this article 
we use a sandbox path to shaka styles -->
    <link
      rel="stylesheet"
      type="text/css"
      href="node_modules/shaka-player/dist/controls.css"
    />
    <link rel="stylesheet" type="text/css" href="style.css" />
  </head>

  <body>
    <!-- We need a container to build the UI on top of it -->
    <div id="container" style="width: 100%; height: 100%">
      <video autoplay id="video"></video>
    </div>

    <!-- add client-side IMA SDK -->
    <script
      type="text/javascript"
      src="https://imasdk.googleapis.com/js/sdkloader/ima3.js"
    ></script>
    <script type="module" src="src/index.js"></script>
  </body>
</html>

In our JS file, we will initialize the ad manager after the player initialization:

import shaka from "shaka-player/dist/shaka-player.ui.js";

const exampleManifestUri =
  "https://bitmovin-a.akamaihd.net/content/
MI201109210084_1/mpds
/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd";

function initApp() {
  // Install built-in polyfills to patch browser incompatibilities.
  shaka.polyfill.installAll();

  // Check to see if the browser supports the basic APIs Shaka needs.
  if (!shaka.Player.isBrowserSupported()) {
    // This browser does not have the minimum set of APIs we need.
    console.error("Browser not supported!");
    return;
  }
}

/* This function initializes the player 
and adds the event listeners */
async function initPlayer() {
  const video = document.getElementById("video");
  const container = document.getElementById("container");
  const player = new shaka.Player(video);

  /* we will need this in other functions 
  so we assign it to the window object */
  window.player = player;

  const ui = new shaka.ui.Overlay(player, container, video);
  const controls = ui.getControls();
  controls.addEventListener("error", console.error);

  player.addEventListener("error", console.error);

  /* Initiates the client-side ad manager
   and attaches it to the player */
  const adManager = player.getAdManager();
  const adContainer = video.ui
.getControls()
.getClientSideAdContainer();
  adManager.initClientSide(adContainer, video);
  runSampleAd();
  try {
    await player.load(exampleManifestUri);
  } catch (error) {
    console.error(error);
  }
}

function runSampleAd() {
  /* the script we added to index.html 
adds the google object to the window */
  const google = window.google;
  const adUrl =
    "https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923
/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3D
linear&ciu_szs=300x250%2C728x90&gdfp_req=1
&output=vast&unviewed_position_start=1
&env=vp&impl=s&correlator=";
  const adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = adUrl;

  const adManager = player.getAdManager();
  adManager.requestClientSideAds(adsRequest);
}

document.addEventListener("DOMContentLoaded", initApp);
document.addEventListener("shaka-ui-loaded", initPlayer);

This GitHub repo is a working example of this feature, as Codesandbox does not allow third-party scripts to make requests.

Pros and cons

It's hard not to be biased in favor of Shaka Player since it is such a versatile library, but I will do my best to be objective.

Why is Shaka good:

Amazing community support, especially from the maintainers.
You've got most of the video-streaming-related functionality out of the box
Highly configurable
Pretty simple basic implementation

Where can Shaka improve:

Typescript support
Library is not tree-shakable - you get the whole package in your projects regardless of how many parts of it you are using
Lots of devices/engines with questionable support
Chromecast issues

Conclusion

All in all, Shaka Player is a great library that can instantly bring an ecosystem of video playback-related functionalities to your project. With great community support and relatively simple implementation, the Shaka ecosystem can make playing content on the web smoother and more accessible. This article scratched the surface of what Shaka can do and offered a few working code examples. If you have got anything to ad to this content, feel free!

Handling performance issues in Smart TV applications

Ivan — Mon, 06 Feb 2023 09:50:36 +0000

If you have ever developed applications for Smart TVs, you must know what it's like to write code with high performance and backward compatibility in mind. However, there are circumstances in which you might not be able to tackle performance issues with conventional tools - inheriting an old codebase, or dealing with slow libraries or API response times are just an example!

In contrast to 'normal' devices, Smart TVs require a special attitude when developing apps as you are guaranteed to work with a low-end CPU that runs an older version of Chromium. For instance, WebOS 3.0 made in 2016 retains a whopping 38 Chromium version!!!

This post will cover tools and coding techniques that will help boost your Smart TV application performance, regardless of the framework you use. Let's jump right in:

🫧 CSS Transitions and Animations

Good animation performance means reaching the ultimate goal of 60 frames per second. When it comes to Smart TVs, there are reasons basic animations sometimes look like they are glitchy or don't start moving when required. When dealing with such an issue, it is important to understand the browser rendering process.

This small diagram shows the browser rendering sequence:

Layout and Paint are the most expensive operations, not only because they have to trigger the operations that follow to complete the render cycle, but because they can force the browser to re-render other elements. For instance, changing CSS properties like width or margin on a parent element affects the size of child elements. As a result, re-render goes through the waterfall for each child. This is why animating CSS properties that trigger Layout or Paint may be bad for performance — it simply creates a lot of work for the browser which is a strain on the CPU. CSS Triggers is a useful link that shows what rendering step is triggered by every CSS property.

As a result, achieving better animation performance means animating properties that only trigger the last step of the rendering process - Composite Layers. This way, you jump over most of the rendering process and unload the main thread. Two properties do this — transform and opacity. Speaking of the main thread, animating elements via Javascript (e.g. requestAnimationFrame) is rarely a good choice, as it always runs on the main thread.

Another useful CSS property is will-change - by using it you are explicitly asking the browser to save resources in order to use them to animate the element. However, it is advised to use this exclusively on transitions that are expected to be a performance bottleneck.

🎨 Layout thrashing

Layout thrashing is the second most common performance issue on Smart TVs, which is also related to the browser rendering process. Overall, Smart TV applications need to be mindful of when they measure and invalidate layout. When tackling this problem, your thinking should be 'How do I avoid layout recalculation?'. CSS Triggers and this amazing gist will be of great help.

🖖 Code-splitting and lazy-loading Javascript

Component lazy-loading is essential if you care about page loading times. The little trade-off that comes into play is that consequent pages might load a little slower. Nevertheless, you will make sure that your users will never download unnecessary code and your browser will do less parsing work.

Your framework of choice may provide its way of lazy loading components but generally speaking, you can call it an asynchronous import.

Let us say we have a module with a component:



// myComponent.js
const component = () => {
 const div = document.createElement('div');
 div.innerText = 'My component';
 return div;
}

const myComponent = component();

export default myComponent;



// index.js
/* this will asynchronously load the component module with a
pre-defined chunk name */

import(/* webpackChunkName: "myComponent" */ './myComponent')
 .then(module => {
   const component = module.default;
   document.body.appendChild(component);
})

This way you will make sure, loading the component script file is deferred until your component is needed.

📜 Module scripts vs classic scripts.

To unblock the main thread, you can modularize scripts or use async of defer attributes to tell the browser they can be processed later



<script src="index.js" defer /> 
<!--this will load and execute after parsing the document, but 
before all the content has been loaded-->

<script src="index.js" async /> 
<!--this will load and execute as soon as possible regardless
of whether or not the content has been loaded-->

<script type="module" src="index.js" /> 
<!--this will be deferred by default-->

Be careful with <script type="module" /> on Tizen devices, as you cannot serve module scripts from the filesystem - you will get:
Failed to load module script: The server responded with a non-JavaScript MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec.

If you would like to learn more, I recommend this article.

🧺 Static assets: images, fonts, and video

Fonts

Fonts are tricky, as better performance might affect how your app looks. Nevertheless, you can experiment with it:

Implement Font preloading, like so:



<link 
 rel="preload" 
 href="/yourFontDirectory/your-font.woff2" 
 as="font" 
 type="font/woff2" 
 crossorigin
>

Swapping out fonts on load will help smooth out the substitution effect.
Implement a font caching strategy. Keep in mind that browser caching can only be used when the fonts you serve are from your domain or CDN – you cannot cache fonts served from 3rd parties, (e.g. Google Fonts).

Images

Images are even trickier, as in this case you have to move all the image work to the server.

Make sure the image you download will be the one you are going to use - don't resize images in the browser!
Don't decode images in the browser! Smart TVs have notoriously small decoders.
Don't download images if you don't have to! use loading="lazy" or IntersectionObserver (there is a polyfill for it).
Serve images in the best possible format. These days, webp is recommended, as it helps preserve the image quality with 25% less size.

Video

Video is the most complex media element that is rendered on the page, so you have to be extra careful with this one!

Don't use autoplay on video - it will tell the browser to start downloading the video immediately. Play the video once you make sure most of the work related to playback is done on the main thread. Depending on the initial size of your video, it might start the playback with a big stutter if autoplay is on. You can use canplay or canplaythrough to initiate playback.
Do not preload video if you are not going to play it - make sure you don't use CPU resources if you don't expect the user to play the video.
The biggest bottleneck for any video on a Smart TV is video chunk size - playing a big-sized asset will require a lot of work from the CPU. Make sure your chunks are under 200 Kb so that video playback achieves top smoothness on any device.

⛓️ The `<link>` tag

The <link> tag was briefly mentioned in this article before, but this tag can come in handy in a few more use cases. There are 6 tags that handle preloading - preload, preconnect, dns-prefetch, prefetch, prerender and modulepreload. We will focus on three of them, that, in my view, have a significant impact on performance.

Preload

<link rel="preload"> instructs the browser to download and cache a resource as soon as possible according to the potential destination given by the as attribute (and the priority associated with the corresponding destination). It is helpful when you need that resource sometime after the page is loaded. The browser doesn’t do anything with the resource after downloading it. It is just cached to be used later on.

Preconnect

<link rel="preconnect"> instructs the browser to perform a connection to a domain in advance. Preconnecting to needed domains speeds up future loads from the domains you specify by establishing a connection between a server and a site in advance. This is useful when you know you are going to make lots of API requests to domains other than your origin.

Dns-prefetch

<link rel="preconnect"> works more or less the same way as preconnect, though it does less work (only DNS resolution). You would want to use it more than preconnect, as it is more browser-compatible.

Make sure you do not over use preconnect with more than 3-4 domains as establishing and keeping an open connection can end up being too expensive, use dns-prefetch instead.

⏲️ Async/await - don't wait if you don't need to!



function getContent() {
  return fetch('https://example.com/api/content.json')
  .then((response) => response.json())
  .then((data) => console.log(data));
}

function getTermsAndConditions() {
  return fetch('https://example.com/api/tc.json')
  .then((response) => response.json())
  .then((data) => console.log(data));
}

async function getDataForMyWebsite() {
 const content = await getContent()
 const tos = await getTermsAndConditions()

return { content, tos }
}

getDataForMyWebsite() // ❌ don't do it like that!

In the snippet above, you have no reason to wait until getUser completes in order to run getTermsAndConditions, as you don't use data from the previous request in the next one

To make this process much faster, run these two requests simultaneously:



async function getDataForMyWebsite() {

 const [content, tos] = await Promise.all([

  getContent,

  getTermsAndConditions,

 ])

return { content, tos }

}

getDataForMyWebsite() // ✅ this is much faster!

👷 Web Workers

When you find your main thread constantly blocked, Web Worker is your perfect solution. In fact, Tizen encourages you to use them!

Don't confuse Web Workers with Service Workers which in the case of Smart TVs cannot be served from filesystem, the same as module scripts. You might find the same info about Web Workers, but Tizen does allow for it.

Before adding browser API logic to the Web Worker, make sure it is supported or look for 'Available in workers' table row in MDN browser compatibility tables. Some APIs (like DOM API or the window object) are not available by default.
Libraries like ComLink will make your Web Worker experience much more effortless. This article by Surma will introduce you to and showcase Web Workers in action.

Conclusion

Designed with the sole purpose of displaying video and audio content, Smart TVs absolutely are not capable of running complex tasks or software in the same way that a computer or a smartphone can. This post has covered most of the concepts I used trying to improve the performance of Smart TV apps, though I do think these could be applied to any project that has performance issues on low-end devices. If you believe there is anything to add or complement, feel free to share!

Forem: Ivan

High-Performance Data Orchestration in Roku OS 15.0

1. Moving vs. Copying: The MoveIntoField Revolution

2. Render Thread References: SetRef and GetRef

3. The roRenderThreadQueue

Conclusion:

Relevant links:

Take control of loops with Symbol.iterator

Build a reactive store from scratch using Javascript

Shaka Player for media playback - implementation, use cases, pros and cons

A little introduction

Basic usage

Usage with controls

Adding configuration

Offline playback

Integrating ads

Pros and cons

Conclusion

Handling performance issues in Smart TV applications

🫧 CSS Transitions and Animations

🎨 Layout thrashing

🖖 Code-splitting and lazy-loading Javascript

📜 Module scripts vs classic scripts.

🧺 Static assets: images, fonts, and video

Fonts

Images

Video

⛓️ The <link> tag

Preload

Preconnect

Dns-prefetch

⏲️ Async/await - don't wait if you don't need to!

👷 Web Workers

Conclusion

⛓️ The `<link>` tag