Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/raphamorim/react-tv

[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications
https://github.com/raphamorim/react-tv

lg-webos orsay palm react react-renderer react-tv rendering samsung smarttv tizen-dev tizen-tv tv tvs webos

Last synced: 3 months ago
JSON representation

[ Unmaintained due to raphamorim/react-ape ] React Renderer for low memory applications

Awesome Lists containing this project

README 

        
# [React-TV](https://github.com/raphamorim/react-tv) · [![license](https://img.shields.io/npm/l/react-tv.svg)]() [![npm version](https://img.shields.io/npm/v/react-tv.svg?style=flat)](https://www.npmjs.com/package/react-tv) [![circleci status](https://circleci.com/gh/raphamorim/react-tv/tree/master.svg?style=shield)](https://circleci.com/gh/raphamorim/react-tv) [![Build status](https://ci.appveyor.com/api/projects/status/a9uh7sdg2njyojjd/branch/master?svg=true)](https://ci.appveyor.com/project/raphamorim/react-tv/branch/master) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md#pull-requests)



> 
react-tv: React Renderer for low memory applications.
react-tv-cli: React Packager for TVs.
Currently under development.



![React-TV Logo](resources/images/reactv-cover-dark.png)



```jsx

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 (

        
Time is {this.state.date.toLocaleTimeString()}


      )

    }



    return 
This App is available only at LG webOS


  }

}



ReactTV.render(, document.getElementById('root'))

```



## Summary



- [About React-TV](#about-react-tv)

  - [Understanding the Problem](#understanding-the-problem)

  - [Articles](#articles)

- [react-tv-cli](#react-tv-cli)

  - [Developing for webOS](#developing-for-webos)

  - [Setup webOS Environment](#setup-webos-environment)

- [react-tv](#react-tv)

  - [`Platform`](#platform)

  - [`renderOnAppLoaded`](#renderonapploaded)

  - [Spatial Navigation](#navigation)

- [Examples](#examples)

    - [Clock App](#clock-app)

    - [Youtube App](#youtube-app)

- [References for Study](#references)

  - [webOS](#webos)

  - [Videos](#videos)

  - [Essentials to beginner](#essentials-to-beginner)

  - [React Basics and Renderer Architecture](#react-basics-and-renderer-architecture)

- [Roadmap](#roadmap)

- [Credits](#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](https://medium.com/netflix-techblog/crafting-a-high-performance-tv-user-interface-using-react-3350e5a6ad3b)



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.



In addition: Unify the build for multiple TV platforms.



### Articles



Friendly list of tutorials and articles: 



- [Developing for TVs with React-TV](https://medium.com/@raphamorim/developing-for-tvs-with-react-tv-b5b5204964ef)



## [react-tv-cli](https://www.npmjs.com/package/react-tv-cli)



To install `react-tv-cli` (CLI Packager):



```bash

$ yarn global add react-tv-cli

```



##### Support for React-TV-CLI



| Target Platform | Status | Available Version |

| --- | --- | --- |

| `LG webOS` | stable | 0.3.1 |

| `Samsung Tizen` | [ongoing](https://github.com/raphamorim/react-tv/pull/104) | x |

| `Samsung Orsay` | not started yet | x |

| `Sony PS4` | not started yet | x |

| `Nintendo Switch` | not started yet | x |



### Developing for webOS






**Short Description:** 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.



--------------------------------------------------------



First of all, setup your webOS Environment:



#### [Setup webOS Enviroment](docs/setup-webos-environment.md)



Then, init your react-tv project:



```bash

$ react-tv-cli init 

```



From the project directory, install the dependencies to enable building:



```bash

$ yarn install

```



You will need to keep the list of files related to your app on the React-TV entry up to date in `package.json`. The init command will already add `index.html`, `bundle.js` and `style.css` to the package.



```json

{

  "name": "my-app-name",

  "react-tv": {

    "files": [

      "index.html",

      "bundle.js",

      "style.css"

    ]

  }

}

```



To build your project:



```bash

$ yarn build

```



Once the project is built, you can run it on a specific device or emulator:



```

$ react-tv-cli run-webos 

```



* When you not specify the device, it runs on VirtualBox webOS Simulator



## [react-tv](https://www.npmjs.com/package/react-tv)



To install `react-tv` (React Renderer):



```bash

$ yarn add react-tv

```



### `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:



```js

import { Platform } from 'react-tv'



console.log(Platform('webos')) // true

console.log(Platform('tizen')) // false

console.log(Platform('orsay')) // false

```



### `renderOnAppLoaded`



Takes a component and returns a higher-order component version of that component, which renders only after application was launched, allows to not write diffent logics for many devices.



```js

import { renderOnAppLoaded } from 'react-tv'



const Component = () => (
)

const App = renderOnAppLoaded(Component)

```



### `findDOMNode`



Similar to [react-dom findDOMNode](https://reactjs.org/docs/react-dom.html#finddomnode)



### Navigation



If you want to start with Navigation for TVs. React-TV provides a package for spatial navigation with declarative support based on [Netflix navigation system](https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8). 



[React-TV Navigation](https://github.com/react-tv/react-tv-navigation) exports `withFocusable` and `withNavigation` which act as helpers for Navigation.



```jsx

import React from 'react'

import ReactTV from 'react-tv'

import { withFocusable, withNavigation } from 'react-tv-navigation'



const Item = ({focused, setFocus, focusPath}) => {

  focused = (focused) ? 'focused' : 'unfocused'

  return (

    
 { setFocus() }} >

      It's {focused} Item

    


  )

}



const Button = ({setFocus}) => {

  return (

    
 { setFocus('item-1') }}>

      Back To First Item!

    


  )

}



const FocusableItem = withFocusable(Item)

const FocusableButton = withFocusable(Button)



function App({currentFocusPath}) {

  return (

    


      
Current FocusPath: '{currentFocusPath}'
,

      

      

       console.log('Pressed enter on Button!')}/>

    


  )

}



const NavigableApp = withNavigation(App)



ReactTV.render(, document.querySelector('#app'))

```



See [examples/navigation](examples/navigation) for more details about usage.



## Examples



### [Clock App](https://github.com/raphamorim/react-tv/tree/master/examples/clock-app)



![Clock App Example](examples/clock-app/screenshot.png)



### [Youtube App](https://github.com/dead/react-key-navigation/tree/master/examples/youtube-react-tv)



![Youtube App Example](https://raw.githubusercontent.com/dead/react-key-navigation/master/examples/youtube-react-tv/example.gif)



## 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/

- http://webostv.developer.lge.com/develop/app-developer-guide/web-app-lifecycle/

- http://webostv.developer.lge.com/develop/js-services/calling-js-service/



#### Videos



##### Windows



- [LG webOS SDK Installing (Setup webOS IDE)](https://www.youtube.com/watch?v=4l-3ZdRkRgc)



##### OSX



- [Build Your First App for webOS TV (Setup OSX)](https://www.youtube.com/watch?v=DXOCbt6oTmk)



### 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. [DONE]



- [x] CLI Build Abstraction of LG webOS (`run-webos`, `run-webos-dev`)

- [x] Create a guide or script to Install all LG webOS environment

- [x] Renderer ReactElements to simple DOM

  - [x] Support HOF and HOC

  - [x] Support State and Lifecycle

  - [x] Keyboard Navigation

- [x] Check `webos` Platform

- [x] Migrate to `React-Reconciler`



#### Stage 2 [IN PROGRESS]



Implement essential functionality needed for daily use by early adopters.



- [ ] Support render to Canvas instead DOM using `React.CanvasComponent`

- [x] `run-webos` support TV device as param

- [ ] Optmizate DOMRenderer for TV

- [ ] Start CLI for Tizen

- [x] Develop helpers for webOS debbug (e.g: Log System).

- [x] Support Cross Platform

  - [x] Check executable bin path for Windows, OSX and Linux

- [ ] Bind all TV key listeners on `React.Element`

- [ ] Improve documentation

- [ ] 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](https://github.com/raphamorim/react-tv/blob/master/CHANGELOG.md).



Currently ReactTV is licensed by [MIT License](https://github.com/raphamorim/react-tv/blob/master/LICENSE.md)



## Credits



Thanks [react-dom](https://github.com/facebook/react/tree/master/packages/react-dom) for be example and a inspiration code :)