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
Examples
- Clock TV App rendering with React-TV
Supported Televisions
- LG WebOS
References for Study
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 TV App Rendering with React-TV

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

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

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

  render() {
    let currentPlatform = 'Browser'
    if (Platform('webos'))
      currentPlatform = 'LG WebOS'

    return (
      <div class='container'>
        <img src='https://i.imgur.com/9yhDR0Q.png'/>
        <h1>It's {this.state.date.toLocaleTimeString()}</h1>
        <p>You're in {currentPlatform}</p>
      </div>
    )
  }
}

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

Supported Televisions

LG WebOS

Target Version: 3.0

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

Videos

Windows

LG WebOS SDK Installing (Setup Webos IDE)

OSX

Build Your First App for webOS TV (Setup OSX)

Essentials to beginner

Developing for SmartTV Guidelines

React Basics and Renderer Architecture

Roadmap

Stage 1

Initial proof-of-concept. [IN PROGRESS]

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.

See ReactTV's Changelog.

Currently ReactTV is licensed by MIT License

Credits

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

jaydson / react-tv Goto Github PK

react-tv's Introduction