react-tv

使用 React 开发电视(TV)应用(渲染低内存的应用以及打包 WebOS, Tizen, Orsay)

React-TV ???? • circleci status npm version PRs Welcome

React Renderer for low memory applications.

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

You can use it separately. Currently under development.

React-TV Logo

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

React-TV is a ecosystem for React Application for TVs (from the renderer to CLI for pack/build applications) focused now on WebOS and SmartTV.

The mission of React-TV is build & develop 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 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

Examples

Clock TV App Rendering with React-TV

clock-with-react-tv-as-renderer

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'))

Using CLI

Initalizing React-TV Apps:

Generate react-tv projects:

$ react-tv init <app-name>

If you want to specify app path on commnand:

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

Open app folder:

$ cd app-name

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

$ react-tv run-webos

Run only on devices and disable create/call Emulator instance:

$ react-tv run-webos --disable-emulator

Run webos app on browser (developer mode on browser). run-webos-dev is using REACT_TV_PORT environment variable or 8500 as port number.

$ react-tv run-webos-dev

Using Module

Platform

When building a cross-platform tv app, you'll want to re-use as much code as possible. Scenarios may arise where it makes sense for the code to be different, for example you may want to implement separate visual components for LG-WebOS and Samsung-Tizen.

React-TV provides 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}/>

Supported Televisions

LG WebOS

WebOS 3.0

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
OSX

Essentials to beginner

Developing for SmartTV Guidelines

React Basics and Renderer Architecture


See ReactTV's Changelog.

Currently ReactTV is licensed by MIT License

Credits

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

Roadmap

Stage 1

Initial proof-of-concept. [IN PROGRESS]

  • [x] 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
    • [x] Support HOF and HOC
    • [x] Support State and Lifecycle
    • [ ] Change className to class
  • [ ] Optmizate DOMRenderer for TV
    • [ ] Avoid memoize operations and use DOM Hash
  • [x] Check webos Platform
  • [x] Migrate to React-Reconciler

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
react-tv 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论