Hosanna Fundamentals

Hosanna UI is a framework for building TV applications using TypeScript and plain JavaScript classes. Understanding its fundamentals will help you create robust, maintainable, and interactive TV apps for Roku, Android TV, Apple TV, and the web.

Core Concepts

Hosanna UI apps are built around these core ideas:

• Classes as UI Elements
• getView() Rendering
• Properties (Props)
• State

If you’re new to Hosanna UI, this section will get you started with the basics.

Your First UI Class

In Hosanna UI, you define UI elements as classes. Each class should implement a getView() method, which returns a description of what should be rendered on the screen.

class HelloWorld {
  getView() {
    return {
      type: 'Label',
      text: 'Hello, I am your TV app!'
    };
  }
}

You can then use this class as part of your app’s view hierarchy.

Properties (Props)

You can pass data to your UI classes using constructor arguments or properties. This lets you reuse classes with different data:

class Greeting {
  name = 'Nazarii';

  getView() {
    return [
        Label({text: `Hello, ${this.name}!`}),
    ];
  }
}

State

info

State in hosanna re-renders the view when it changes. State is managed as class properties. When state changes, the view automatically re-renders to reflect the new state.

class Counter {
  @state count = 0;

  increment() {
    this.count++;
  }

  getView() {
    return [
      Label({ text: `Count: ${this.count}` }),
      Button({
        text: 'Increment',
      })
        .onClick(this.increment)
    ]
  }
}

Summary

• UI is built with TypeScript/JavaScript classes.
• Each class implements getView() to describe its UI.
• Data is passed via properties (props) or constructor arguments.
• State is managed as class properties and can trigger re-renders.
• You compose UIs by nesting classes and their views.

For more details, see the next sections on handling text input, working with core components, and managing state in Hosanna UI.