React-TV ·

React Renderer for low memory applications.

React Packager for TVs (WebOS, Tizen, Orsay).

You can use it separately. Currently under development.

import React from 'react'
import ReactTV, { Platform } from 'react-tv'

class Clock extends React.Component {
  state = { date: new Date() }

  componentDidMount() {
    setInterval(() => this.setState({date: new Date()}), 1000)
  }

  render() {
    if (Platform('webos')) {
      return (
        <h1>Time is {this.state.date.toLocaleTimeString()}</h1>
      )
    }

    return <h2>This App is available only at LG WebOS</h2>
  }
}

ReactTV.render(<Clock/>, document.getElementById('root'))

Summary

• About React-TV
  • Understanding the Problem
• Getting Started
  • Installing
  • Using CLI
    • React-TV CLI for WebOS
      • Setup WebOS Environment
  • Using Module
• Examples
  • Clock
  • Youtube
• Supported Televisions
  • LG WebOS
• References for Study
  • WebOS
  • Videos
  • Essentials to beginner
  • React Basics and Renderer Architecture
• Roadmap
• Credits

About React-TV

React-TV is an ecosystem for TV based React applications (from the renderer to CLI for pack/build applications).
At the moment we're focusing on WebOS and SmartTV.
React-TV's aims to be a better tool for building and developing fast for TVs.

Understanding the Problem

tl;dr: Crafting a high-performance TV user interface using React

Crafting a high-performance TV user interface using React is a real challenge, because of some reasons:

• Limited graphics acceleration
• Single core CPUs
• High Memory Usage for a common TV App

These restrictions make super responsive 60fps experiences especially tricky. The strategy is step in the renderer: Applying reactive concepts to unblock the processing on the renderer layer, plug the TV's keyListener, avoid React.createElement (which cost a lot)[...]

In addition: Unify the build for multiple TV platforms.

Getting Started

Installing

To install react-tv as a CLI Packager:

$ npm install -g react-tv
# or
$ yarn global add react-tv

To install react-tv as a React Renderer:

$ npm install react-tv --save
# or
$ yarn add react-tv

Using CLI

React-TV CLI for WebOS

1: Install globally React-TV

$ yarn add --global react-tv

2: Setup WebOS Environment

Setup WebOS Enviroment

3: Setting Up

3.1: If you doesn't have a project yet and you want to start from scratch, jump to topic 3 (Running It!).

$ react-tv init <my-app-name>

3.2: If you already have some source code. Just run react-tv init on the project root.

3.3: Add the files related to your app on the React-TV entry on package.json:

{
  "name": "my-app-name",
  "react-tv": {
    "files": [
      "index.html",
      "bundle.js",
      "style.css"
    ]
  }
}

4: Running It!

Run the emulator and devices (should pack, build and run it on the emulator):

$ react-tv run-webos

Using Module

Platform

When building a cross-platform TV app, you'll want to re-use as much code as possible. You'll probably have different scenarios where different code might be necessary.
For instance, you may want to implement separated visual components for LG-WebOS and Samsung-Tizen.

React-TV provides the Platform module to easily organize your code and separate it by platform:

import { Platform } from 'react-tv'

console.log(Platform('webos')) // true
console.log(Platform('tizen')) // false
console.log(Platform('orsay')) // false

• Keys (in-draft)

import { Keys } from 'react-tv'

<Keys onChange={myCustomHandler}/>

Examples

Clock App

Youtube App

Supported Televisions

LG WebOS

Target Version: 3.0

For 2.0, 1.0 versions: use polyfills.

WebOS, also known as Open WebOS or LG WebOS, (previously known as HP WebOS and Palm WebOS, stylized as webOS) is a Linux kernel-based multitasking operating system for smart devices such as Smart TVs and it has been used as a mobile operating system.

Samsung Tizen

[Work in Progress]

Samsung Orsay

[Work in Progress]

References:

WebOS

• http://webostv.developer.lge.com/sdk/download/download-sdk/
• http://webostv.developer.lge.com/sdk/install-instructions/installing-sdk/
• http://webostv.developer.lge.com/sdk/emulator/introduction-emulator/
• http://webostv.developer.lge.com/develop/building-your-first-web-app-webos-tv/
• http://webostv.developer.lge.com/develop/app-test/
• http://webostv.developer.lge.com/api/web-api/supported-standard-web-api/

Videos

Windows

• LG WebOS SDK Installing (Setup Webos IDE)

OSX

• Build Your First App for webOS TV (Setup OSX)

Essentials to beginner

• http://developer.samsung.com/tv/develop/getting-started/setup-sdk/installing-tv-sdk/
• http://developer.samsung.com/tv/develop/getting-started/using-sdk/tv-simulator
• http://developer.samsung.com/tv/develop/getting-started/essentials-for-beginner

Developing for SmartTV Guidelines

• https://github.com/ruiposse/smart-tv-app-dev-guidelines
• https://github.com/immosmart/smartbox
• https://github.com/linuxenko/awesome-smarttv

React Basics and Renderer Architecture

• https://github.com/reactjs/react-basic
• https://github.com/iamdustan/tiny-react-renderer
• https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html

Roadmap

Stage 1

Initial proof-of-concept. [IN PROGRESS]

• CLI Build Abstraction of LG Webos (run-webos, run-webos-dev)
• Create a guide or script to Install all LG WebOS environment
• Renderer ReactElements to simple DOM
  • Support HOF and HOC
  • Support State and Lifecycle
  • Keyboard Navigation
• Optmizate DOMRenderer for TV
• Check webos Platform
• Migrate to React-Reconciler
• Improve documentation

Stage 2

Implement essential functionality needed for daily use by early adopters.

• Support render to Canvas instead DOM using React.CanvasComponent
• run-webos support TV device as param
• Start CLI for Tizen
• Develop helpers for WebOS debbug (e.g: Log System).
• Support Cross Platform
  • Check executable bin path for Windows, OSX and Linux
• Bind TV key listeners on React.Element
• Benchmark it

Stage 3

Add additional features users expect from a Renderer. Then fix bugs and stabilize through continuous daily use. At this point we can start to experiment with innovative ideas and paradigms.

• Start CLI for Orsay
• Update Benchmarks
• Handle common errors
• Reactive Renderer
• Testing and stability

---

See ReactTV's Changelog.

Currently ReactTV is licensed by MIT License

Credits

Thanks react-dom for be example and a inspiration code :)