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

Last update: Jul 24, 2022

React-TV · license npm version circleci status Build status PRs Welcome

react-tv: React Renderer for low memory applications.

react-tv-cli: React Packager for TVs.

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 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.

In addition: Unify the build for multiple TV platforms.

Articles

Friendly list of tutorials and articles:

react-tv-cli

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

$ 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 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, follow the instructions to install the SDK and Setup your WebOS Environment.

Then, init your react-tv project:

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

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

$ 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.

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

To build your project:

$ yarn build

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

$ react-tv-cli run-webos <device>
  • If you do not specify a device, it runs on VirtualBox WebOS Simulator.

react-tv

To install react-tv (React Renderer):

$ 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:

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.

import { renderOnAppLoaded } from 'react-tv'

const Component = () => (<div></div>)
const App = renderOnAppLoaded(Component)

findDOMNode

Similar to react-dom 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.

React-TV Navigation exports withFocusable and withNavigation which act as helpers for Navigation.

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 (
    <div onClick={() => { setFocus() }} >
      It's {focused} Item
    </div>
  )
}

const Button = ({setFocus}) => {
  return (
    <div onClick={() => { setFocus('item-1') }}>
      Back To First Item!
    </div>
  )
}

const FocusableItem = withFocusable(Item)
const FocusableButton = withFocusable(Button)

function App({currentFocusPath}) {
  return (
    <div>
      <h1>Current FocusPath: '{currentFocusPath}'</h1>,
      <FocusableItem focusPath='item-1'/>
      <FocusableItem focusPath='item-2'/>
      <FocusableButton
        focusPath='button'
        onEnterPress={() => console.log('Pressed enter on Button!')}/>
    </div>
  )
}

const NavigableApp = withNavigation(App)

ReactTV.render(<NavigableApp/>, document.querySelector('#app'))

See examples/navigation for more details about usage.

Examples

Clock App

Clock App Example

Youtube App

Youtube App Example

References:

WebOS

Videos

Windows
OSX

Essentials to beginner

Developing for SmartTV Guidelines

React Basics and Renderer Architecture

Roadmap

Stage 1

Initial proof-of-concept. [DONE]

  • 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
  • Check webos Platform
  • 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
  • run-webos support TV device as param
  • Optmizate DOMRenderer for TV
  • 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 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.

Currently ReactTV is licensed by MIT License

Credits

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

GitHub

https://github.com/raphamorim/react-tv
Comments
  • 1. Failed to up virtualbox emulator

    Hi @raphamorim,

    I'm trying to start the LG WebOS Emulator 3.0.0 on Ubuntu 16.04 but I'm getting this error:

    screenshot from 2017-12-04 21-44-39

    I've already followed the instructions in the react-tv docs to configure the WebOS Environment and the Emulator works fine when I run through the desktop icon.

    Do you have any idea how to fix this error?

    Thanks!

    Reviewed by thiagommedeiros at 2017-12-04 23:54
  • 2. Any plans on focus system?

    Hello, nice to see some open source projects in this area. Working right now with React and smart tv:s and built to multiple smart tv platforms and consoles (playstation). If I have time over I can see if I can contribute. One thing that I always thinks of is the focus system. Web is really good at mouse interaction but keyboard navigation is lacking. Is that something you are planning to look into?

    Best regards

    Reviewed by EloB at 2017-11-07 11:09
  • 3. Run WebOS Examples

    Installed react-tv globally. Create proj with init command but when i try to run as it said in documentation. Doesn't run as expected, all dependencies are installed.

    image

    Reviewed by Lucasktrindade at 2017-11-22 03:28
  • 4. Add support to Tizen

    How to use:

    • Install Tizen Studio (latest version)
    • Install the Native CLI, Web CLI, TV and Certficate Manager packages. (Using the "Package Manager")
    • Set TIZEN_CLI environment variable to the Tizen CLI folder. (Usually <TIZEN_STUDIO>/tools/ide/bin)
    • Setup a certificate using the "Certficate Manager"
    • Execute react-tv run-tizen inside a react-tv application 😄

    Benchmark

    emulator-x86_64_2017-11-17_23-25-26

    Reviewed by dead at 2017-11-18 01:26
  • 5. Uncaught Error: Argument appears to not be a ReactComponent

    What do you expect to happen?

    Run example app without errors.

    What actually happens?

    Errors encountered during react lifecycle.

    Which browsers are affected?

    Currently running on latest version of Chrome Canary (71.0.3567.0), but I've noticed similar behavior when executing the app inside the webOS emulator.

    Additional info

    It appears that [email protected]^0.4.2 is causing errors during lifecycle:

    Error: Argument appears to not be a ReactComponent. Keys: tag,key,type,stateNode,return,child,sibling,index,ref,pendingProps,memoizedProps,updateQueue,memoizedState,mode,effectTag,nextEffect,firstEffect,lastEffect,expirationTime,alternate,_debugID,_debugSource,_debugOwner,_debugIsCurrentlyTiming
        at invariant (bundle.js:22457)
        at Object.findHostInstance (bundle.js:32480)
        at Object.findDOMNode (bundle.js:32844)
        at t.componentWillUnmount (bundle.js:33055)
        at callComponentWillUnmountWithTimer (bundle.js:29436)
        at HTMLUnknownElement.callCallback (bundle.js:25057)
        at Object.invokeGuardedCallbackDev (bundle.js:25095)
        at invokeGuardedCallback (bundle.js:25144)
        at safelyCallComponentWillUnmount (bundle.js:29443)
        at commitUnmount (bundle.js:29689)
    

    Downgrading to [email protected]^0.3.4 is currently my only workaround for this issue.

    See this project for reproducing this issue (see branch custom/issue-134-reproducible): https://github.com/robolivable/TTV4TV/tree/custom/issue-134-reproducible

    Side note: I can't seem to find the source files for version 0.4.2 of react-tv. The latest here seems to be 0.4.1 ... Is this an intended deployment?

    Screenshots

    screen shot 2018-10-01 at 6 55 03 pm
    Reviewed by robolivable at 2018-10-02 00:01
  • 6. draft: navigation interface

    Working in Progress in #58 #40

    const MyListComponent = (
       <div class="container">
       <div class="list"> 
             <div class="item" focusable onBlur={() => console.log('blur') } >
                    Vertical Item with Blur Handler
              </div>
              <div class="horizontal-list">
                   <div class="item" focusable onPress={() => console.log('pressed') } >
                         Horizontal Item 1 with Press Handler
                   </div>
                   <div class="item" focusable focused>
                         Horizontal Item 2 which started focused
                    </div>
              </div>
              <div class="item" focusable onFocus={() => console.log('focused') } >
                   Vertical Item with Focus Handler
              </div>
              <div class="item">
                   Item which can't be focused or selected
               </div>
           </div>
           <div class='button' focusable>
               Enter
           </div>
       </div>
    )
    

    References:

    • https://github.com/dead/react-key-navigation
    • https://github.com/luke-chang/js-spatial-navigation
    • https://github.com/bbc/tal
    Reviewed by raphamorim at 2017-11-19 23:07
  • 7. How to do event binding on component?

    When I do like onPlay={() => {}} or something along those lines, its causing react-tv renderer to throw errors in browser like Unexpected token (.

    On react-dom it works fine. What is a way I can do this without it throwing this error? I REALLY want to use this renderer but this is keeping me from rendering videos for some reason.

    UPDATE: It seems to be doing it with my more dynamic components like ones that use: createElement

    Any tips? Anybody done this?

    Reviewed by jfrux at 2018-05-15 12:12
  • 8. Add fs.readdir to avoid crash when SDK path contains empty spaces

    As response to this issue #154

    I added fs.readdir to avoid empty space cause a wrong path reader. I have limited test environment once I'm on OSx and not on Ubuntu as reported.

    It must solve issue, but before merge, I recommend to test in a ubuntu test environment.

    Reviewed by matheusmonte at 2021-03-08 17:33
  • 9. React DevTools

    It looks like the react devtools aren't working for me. I'm always getting the message about React being in production mode even though I load the react-tv.development.js. Tried it on the example project built by React-TV and got the same problem.

    Any idea how to fix this?

    Reviewed by lambertkevin at 2018-11-02 09:26
  • 10. (index):1 Uncaught SyntaxError: Unexpected token ( 08:10:52.316 (index):1 Uncaught SyntaxError: Unexpected token ( 08:10:52.353 (index):1 Uncaught SyntaxError: Unexpected token (

    So I'm getting these hard to track down errors when working with video. Wondering if there is a way you guys have found to find the issue or track it down? Can't find a place to put a breakpoint really so not sure how to approach it.

    Uncaught SyntaxError: Unexpected token ( (index):1

    image

    When switching to react-dom it seems to work okay. Guessing its something specific to the limitations of the renderer but I'm not quite sure where to debug it.

    Reviewed by jfrux at 2018-04-30 12:14
  • 11. Considering declarative focus

    Have you considered doing declarative focus handling like Netflix devs explained here

    https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8

    I like the approach that you define a focusKey for every focusable element and use a focusPath to define what should be focused. Rendering and focusing are decoupled and you can request focus after mounting and apply the focusPath to you elements. They use HOCs to set states like entered/focused based on the focusPath and the focusKey of the element and removed using element.focus().

    Reviewed by drudolf at 2017-12-07 12:24
  • 12. package with navigation, renders all components

    downloaded the navigation package, connected it to the main app file, when I work with focus, it re-renders all components, Is this the way it should be?

    Reviewed by kind-eh at 2021-03-25 15:34
  • 13. Update react reconciler

    Right now because reconciler is relying in an old version. This is a problem for anyone that wants to use "new" (>14) features of React, such as .memo, .fragment and etcetera

    Reviewed by raphamorim at 2021-03-22 21:04
  • 14. Navigation jumps to a far element

    Hello, after application loads and setting the focus on a component, when I press any navigation button, focus jumps to a far element. But when I do this again later on, it does navigate correctly also from the same element. Any idea why this is happening?

    Thanks!

    Reviewed by MarcoFiusco at 2020-09-23 08:04
  • 15. Error importing withFocusable and withNavigation from react-tv-navigation

    Hello, I''m trying to reproduce the navigation example but I'm stuck trying to import withFocusable and withNavigation from 'react-tv-navigation'.

    I'm doing:

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

    But an error is thrown: Unhandled Rejection (ReferenceError): Element is not defined

    • Which browsers are affected? All
    Reviewed by matiasbenedetto at 2019-02-04 21:44
  • 16. React-tv app not rendering in actual LG device with focusable hoc. but it's working fine in lg TV emulator

    Please find components created by using focusable element

    `const ButtonContainer = (props) => { var children = props.children; return ( <button {...props}> {children} ) }

    const DivContainer= (props) => { var children = props.children; return ( <div {...props}> {children}

    ) }

    export const ButtonFocus = withFocusable(ButtonContainer) export const DivFocus = withFocusable(DivContainer) `

    Reviewed by sujithklr93 at 2019-01-15 05:28
React JSX Renderer is a React Component for rendering JSX to React nodes.

React JSX Renderer A React Component for Rendering JSX. Description React JSX Renderer is a React Component for rendering JSX to React nodes.

Jan 9, 2022
🇨🇭 A React renderer for Three.js (web and react-native)
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

Aug 6, 2022
🇨🇭 A React renderer for Three.js (web and react-native)
🇨🇭 A React renderer for Three.js (web and react-native)

react-three-fiber react-three-fiber is a React renderer for threejs on the web and react-native. npm install three react-three-fiber These demos are r

Jul 31, 2022
⚛️ A React renderer for Figma
⚛️ A React renderer for Figma

React Figma A React renderer for Figma. Use React components as a source for your designs. ?? Compatible with react-native, react-sketchapp, react-pri

Aug 4, 2022
⃝ A react null renderer

Nothing to see here ... Quite so. This package allows you to bring Reacts high-level component abstraction to Node, or wherever you need it. Why not m

Jul 16, 2022
A React renderer for Hardware.

React Hardware React Hardware enables you to build firmata-based hardware applications using a consistent developer experience based on JavaScript and

Jul 27, 2022
A react renderer for browser's dev console
A react renderer for browser's dev console

Konsul is an abstraction of the browser's console that comes with a React renderer. It offers text styling, images, style inheritance, buttons with cl

Jun 25, 2022
React custom renderer for Appcelerator® Titanium™ SDK
React custom renderer for Appcelerator® Titanium™ SDK

⚠️ Maintainer wanted! Create an issue if you want to maintain it! react-titanium A React custom renderer for Appcelerator® Titanium™ SDK. This rendere

Mar 6, 2022
React renderer for NativeScript
React renderer for NativeScript

React NativeScript is A React renderer for NativeScript, allowing you to write a NativeScript app using the familiar React style. I'm always hanging o

Jul 12, 2022
A react renderer for blessed.

react-blessed A React custom renderer for the blessed library. This renderer should currently be considered as experimental, is subject to change and

Aug 2, 2022
a react renderer for the command line

This repository is now archived This project was originally created as an alternative to the Ink library, as a separate renderer for a real React comp

Jul 15, 2022
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL
🦍• [Work in Progress] React Renderer to build UI interfaces using canvas/WebGL

React Ape React Ape is a react renderer to build UI interfaces using canvas/WebGL. React Ape was built to be an optional React-TV renderer. It's mainl

Aug 3, 2022
📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.
📟 A React Renderer for SSD1306 OLED chip on Raspberry Pi.

React SSD1306 A React Renderer for SSD1306 OLED chip on Raspberry Pi For those who doesn't have the device, a canvas-based web emulator is also includ

Jul 28, 2022
React renderer with X11 as a target
React renderer with X11 as a target

react-x11 React custom rendering where side effects are communication with X11 server. The goal is to create a simple library where you would apply yo

Jun 18, 2022
React renderer for building user interfaces in Unity UI

React Unity React Unity is a way to build interactive UI in Unity3D using React. It can be used together with packages like Typescript, redux, i18next

Jul 29, 2022
A custom Slack renderer for React! 3

react-slack-renderer Render Slack messages in a cool (React) way. const message = SlackRenderer.render( <SlackMessage> <SlackText> Heyo

Jun 22, 2021
🦴 A barebones react renderer for ogl.

react-ogl Declaratively create scenes with re-usable OGL components that have their own state and effects and can tap into React's infinite ecosystem.

Jul 29, 2022
React Fiber Reconciler Renderer for Regl WebGL

react-regl This library enables Regl shader WebGL draw commands to be rendered directly as React components. Demos View demos in the Storybook There i

Jun 30, 2022
Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer
Connect, discover, be free to choose between WebGL / Canvas (PIXI) / DOM or any other UI renderer

React Liberty Be free to choose between WebGL / Canvas / DOM / Native or any other UI renderer This is a React library designed to abstract renderer b

May 24, 2022