[WIP] React-TV enhancements

CHANGELOG.md

@@ -1,3 +1,13 @@
+# 0.3.0-alpha.1
+
+- migrate to react-reconciler 0.6.0
+- check if is need to format code on CI
+- add benchmark example
+- fix update render tor nodeText
+- update postinstall to prebublishOnly (newest npm)
+- remove: react-tv run-webos-dev
+- react-tv cli {init} breaking changes
+
 # 0.2.3
 
 - use ReactReconciler from `react-reconciler` instead from `react-dom`

README.md

@@ -33,12 +33,15 @@ ReactTV.render(<Clock/>, document.getElementById('root'))
 
 - [About React-TV](#about-react-tv)
   - [Understanding the Problem](#understanding-the-problem)
+  - [Benchmark](#benchmark)
 - [Getting Started](#getting-started)
   - [Installing](#installing)
-  - [Examples](#examples)
-    - [Clock TV App rendering with React-TV](#clock-tv-app-rendering-with-react-tv)
   - [Using CLI](#using-cli)
+    - [React-tv CLI for WebOS](#react-tv-cli-for-webos)
+      - [Setup WebOS Enviroment](#setup-webos-environment)
   - [Using Module](#using-module)
+- [Examples](#examples)
+    - [Clock TV App rendering with React-TV](#clock-tv-app-rendering-with-react-tv)
 - [Supported Televisions](#supported-televisions)
   - [LG WebOS](#lg-webos)
 - [References for Study](#references)
@@ -47,6 +50,7 @@ ReactTV.render(<Clock/>, document.getElementById('root'))
   - [Essentials to beginner](#essentials-to-beginner)
   - [React Basics and Renderer Architecture](#react-basics-and-renderer-architecture)
 - [Roadmap](#roadmap)
+- [Credits](#credits)
 
 ## About React-TV
 
@@ -68,6 +72,22 @@ These restrictions make super responsive 60fps experiences especially tricky. Th
 
 In addition: Unify the build for multiple TV platforms.
 
+### Benchmark
+
+| Operation  | React-TV | React-DOM | Runned off |
+| ------------- | ------------- |  ------------- | ------------- |
+| Time of first render | ~76ms  | ~199ms | Firefox 57 (Quantum) |
+| Time of first render  | ~364ms*  | ~234ms | WebOS 3.0 Emulator |
+| Memory Footprint  | **  | ** | ** |
+
+* This result will change a lot with `[email protected]`.
+
+** Homework.
+
+Disclamer: Speed performance will compensate the memory loss. Having a sufficient amount of memory for all of your machines is important to achieving good performance. React-TV renderer focus on Memory usage, but if you want to Perfomance you can still use `react-dom` for renderer and `react-tv-cli` for builds.
+
+The good sides of React-TV, in a next release, is that will be using native TVs APIs, support for React.CanvasComponents, keys mapping[...]
+
 ## Getting Started
 
 ### Installing
@@ -88,82 +108,51 @@ $ npm install react-tv --save
 $ yarn add react-tv
 ```
 
-## Examples
-
-### [Clock TV App Rendering with React-TV](https://github.com/raphamorim/react-tv/tree/master/examples/clock-app-with-react-tv)
-
-![clock-with-react-tv-as-renderer](examples/clock-app-with-react-tv/screenshot.png)
-
-```jsx
-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:
+### React-TV CLI for WebOS
 
-Generate react-tv projects:
+#### 1: Install globally React-TV
 
 ```bash
-$ react-tv init <app-name>
+$ yarn add --global react-tv
 ```
 
-If you want to specify app path on commnand:
+#### 2: Setup WebOS Environment
 
-```bash
-$ react-tv init <app-name> <app-path>
-```
+[Setup WebOS Enviroment](docs/setup-webos-environment.md)
+
+#### 3: Setting Up
 
-Open app folder:
+3.1: If you doesn't have a project and want to start from nothing. If is your situation: jump to topic 3 (Running It!).
 
 ```bash
-$ cd app-name
+$ react-tv init <my-app-name>
 ```
 
-Run emulator and devices (should pack, build and run on emulator):
+3.2: If you already have some source code. Just run `react-tv init` on project root.
 
-```
-$ react-tv run-webos
-```
+3.3: Add the files related to app on a React-TV entry on `package.json`:
 
-Run only on devices and disable create/call Emulator instance:
-
-```
-$ react-tv run-webos --disable-emulator
+```json
+{
+  "name": "my-app-name",
+  "react-tv": {
+    "files": [
+      "index.html",
+      "bundle.js",
+      "style.css"
+    ]
+  }
+}
 ```
 
-Run webos app on browser (developer mode on browser). `run-webos-dev` is using `REACT_TV_PORT` environment variable or `8500` as port number.
+#### 4: Running It!
+
+Run emulator and devices (should pack, build and run on emulator):
 
 ```
-$ react-tv run-webos-dev
+$ react-tv run-webos
 ```
 
 ## Using Module
@@ -190,6 +179,48 @@ import { Keys } from 'react-tv'
 <Keys onChange={myCustomHandler}/>
 ```
 
+## Examples
+
+### [Clock TV App Rendering with React-TV](https://github.com/raphamorim/react-tv/tree/master/examples/clock-app-with-react-tv)
+
+![clock-with-react-tv-as-renderer](examples/clock-app-with-react-tv/screenshot.png)
+
+```jsx
+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'))
+```
+
+### [Benchmark: React-TV X React-DOM](https://github.com/raphamorim/react-tv/tree/master/examples/benchmark)
+
+![example](examples/benchmark/screenshot.png)
+
 ## Supported Televisions
 
 ### LG WebOS
@@ -246,16 +277,6 @@ WebOS, also known as Open WebOS or LG WebOS, (previously known as HP WebOS and P
 - https://github.com/iamdustan/tiny-react-renderer
 - https://facebook.github.io/react/blog/2015/12/18/react-components-elements-and-instances.html
 
----------------------------------------------------- 
-
-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 :)
-
 ## Roadmap
 
 #### Stage 1
@@ -267,7 +288,7 @@ Initial proof-of-concept. [IN PROGRESS]
 - [ ] Renderer ReactElements to simple DOM
   - [x] Support HOF and HOC
   - [x] Support State and Lifecycle
-  - [ ] Change `className` to `class`
+  - [ ] Keyboard Navigation
 - [ ] Optmizate DOMRenderer for TV
   - [ ] Avoid memoize operations and use DOM Hash
 - [x] Check `webos` Platform
@@ -295,3 +316,13 @@ Add additional features users expect from a Renderer. Then fix bugs and stabiliz
 - [ ] 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 :)

TODO.md

@@ -0,0 +1,19 @@
+# React-TV TODOLIST
+
+- Verify if I can map props before pass to ReactReconciler.
+- Reduce appendChilds (DOM Iteration) on appendInitialChild for textNodes (?)
+  - maybe not necessary: `appendChildToContainer` it's the only one to real append it. But still need to check benchmark results.
+  - ReactTV.CreateElement, solves it.
+- Create a benchmark about ReactDOM against ReactTV.
+  - simplest render case, based on only appendChildToContainer.
+  - with a lot of updateProperties (maybe focused on animations).
+  - memory usage of both.
+- Stop propagation of onClick (?)
+- Think about `AppIsReady` for TVS. It's about done/loaded events which WebOS and Tizen dispatch, start mapping it in a HOC?
+- Propagate handler for keyboard on React.Elements.
+- `ReactTV.CreateCanvasElement`
+- Simulator Component (`TVSimulator`).
+  - render children as app.
+  - `({children}) => <TVSimulator>{children}<Keyboard/></TVsimulator>`
+  - share keyboard state with rendered container.
+- Write a guide for create your first application for WebOS using ReactTV.

cli/generators/app/webos/appinfo.json → cli/generators/app/react-tv/webos/appinfo.json

@@ -1,11 +1,11 @@
 {
   "id": "react.tv.app",
-  "title": "react-tv-app",
+  "title": "{{REACTTVAPP}}",
   "vendor": "my awesome react-tv app",
   "version": "0.0.1",
   "type": "web",
   "main": "index.html",
-  "icon": "assets/icon.png",
+  "icon": "icon.png",
   "uiRevision": 2,
-  "largeIcon": "assets/largeIcon.png"
+  "largeIcon": "icon-large.png"
 }