raphamorim / react-ape

🦍• React Renderer to build UI interfaces using canvas/WebGL (TV and Hardware-Accelerated GPU development based)

React Ape

React Renderer to build UI interfaces using Canvas/WebGL

Check the Docs (raphamorim.io/react-ape)

Join our Discord

DISCLAIMER: In experimental stage

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 mainly a renderer focused on creating things for TV, PS5, PS4, Nintendo Switch, PS Vita, PS3 and low memory devices.

React Ape lets you build Canvas apps using React. React Ape uses the same design as React, letting you compose a rich UI from declarative components.

Understanding the Problem

tl;dr: Crafting a high-performance TV user interface using React (and also good to read: 60 FPS on the mobile web)

Crafting a high-performance TV user interface based on DOM 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 based on a hardware-accelerated canvas.

Examples

App Name	Github	App URL
Photo Gallery	raphamorim/react-ape-photo-gallery	Check it out
Movie List	raphamorim/react-ape-movie-list-demo	Check it out
Add yours here	---------	---------

API Usage

Install it using NPM or Yarn

# NPM
npm install react-ape

# Yarn
yarn add react-ape

React Ape's API usage example

import React, { Component } from 'react';
import { Text, View } from 'react-ape';

class ReactApeComponent extends Component {
  render() {
    return (
      <View>
        <Text>
          Render this text on Canvas
        </Text>
        <Text>
          You just use React Ape components like 'View' and 'Text',
          just like React Native.
        </Text>
      </View>
    );
  }
}

Demo on PS Vita

Demo on TV

Testing it

React-Ape's CI uses macos-latest and since canvas renders a different output based on the operating system (node-canvas have rasterize fonts in different ways based on OS). It requires run the tests on the same OS. Please be aware that if you want to contribute using a different OS, make sure that you have Docker installed.

Roadmap

You can follow React-Ape development status here: Roadmap

Credits

A special thanks to Raphael Eckhardt for making the logo <3

react-ape's Issues

margin and padding for Text

Similar to #118

border-radius as prop for View

Implement border radius for View e.g: <View style={{ borderRadius: 10 }} />

renderToWebGL : Allow switch render to WebGL

draft API:

import { Text, renderToWebGL } from 'react-ape'

const Component = <Text>ABC</Text>
renderToWebGL(Component, document.querySelector("canvas"))

Docs: Getting started and Learning the Basics

"Getting started" and "Learning the Basics" are outdated and contain wrong information. We don't have any boilerplate yet. Would be good to update those sections with valid information. Open to ideas :)

Support multiple ApeContexts

Work in progress in #14

[Spectrum Request] - It would be a good idea to have a community

I've check your project and it seems really cool and ambitious to me, the idea of canvas as a "rendering engine" can have many advantages and use cases (personally i'll love to dig into PS4 UI dev), i'm pretty sure there's a lot of more people who would be interested in contributing.

However it would be great if these people could find a way to communicate, that's why i'm suggesting a spectrum community

Cheers, and never stop doing it! 🔥

Views rendering Views as children

I'm seeing an oddity when rendering something like this

const s = StyleSheet.create({
  container: {
    backgroundColor: 'aliceblue',
    height: 300,
    width: 200,
  },
  child: {
    height: 100,
    width: 100,
  }
})
<View style={s.container}>
  {["bisque", "cadetblue", "darkseagreen"].map((c, i) => (
    <View style={{...s.child, backgroundColor: c}}>
      <Text content={`Child ${i+1}`} />
    </View>
  ))}
</View>

I'd expect to see this, more or less:

instead, it's positioning the parent <View/> after the children. Like this

You can also see similar drawing setting the container to something like, {position: 'absolute', left: 100, top: 100}

I think the issue is around here, https://github.com/raphamorim/react-ape/blob/master/packages/react-ape/renderer/elements/View.js#L52-L56

Also, it seems as though the views are rendered in order of child to parent. With that in mind, I'm not sure how you can render such a list without recomputing the child positions when you finally know the position of the parent. Although, I could be wrong. That happens often.

enable CircleCI for PRs

It seems CircleCI is not enabled for PRs.

How to install NPM modules

What's the preferred method of adding 3rd party modules? NPM etc.

marging and padding for Image

Similar to #118

Navigation based on focus

Following similar patterns of https://medium.com/netflix-techblog/pass-the-remote-user-input-on-tv-devices-923f6920c9a8 and https://github.com/react-tv/react-tv-navigation

draft api:

import { Text, withFocusable, withNavigation } from 'react-ape'

const Item = ({focused, setFocus, focusPath}) => {
  focused = (focused) ? 'focused' : 'unfocused'
  return (
    <Text onClick={() => { setFocus() }} >
      It's {focused} Item
    </Text>
  )
}

Fix React Devtools

After the reconciler update, React DevTools isn't working properly anymore. Need to investigate.

Thoughts on where I can help

I work on UI for the PS4 daily, so I have some investment in this type of work, and over the past year, I have implemented a lot of the ideas here. So if it is welcome, I am going to use this issue to jot down some ideas (some i'm sure you have planned), and see if I can help in any way.

You are probably busy in the weeds for the reconciler.

Things I have implemented that I could maybe bring over:

• ListView
• ScrollableView
• FocusSystem (gamepad for example)
• Positioning based on parent.
• Improvements to the Image component, for example pre-loaded state, post-loaded, error, and caching.
• Accessibility
• Animation

Another huge win would be to implement flexbox https://github.com/facebook/yoga

Above all of this, I have a ps4 devkit that I can help test on.

Let me know if you need/want help, and if it is too early, I can check back later.

Components: <TextInput/>

Reference: https://facebook.github.io/react-native/docs/textinput

Description: Implement an initial version of Button component on React Ape renderer using Canvas.

AC: Consider using it on devices like TV and portable games.

fix publish GH workflow: publish and tests should not run tests twice

Currently the Publish workflow runs together with test, executing the same yarn ci (running tests again) it shouldn't be happening. Should wait for the test workflow check and the follow up with publish.

There's few approaches that could fix it:

• check if the tests have passed
• move the publish workflow to tests as a step but only runs if commit message have [publish]

Render?build in ARM architecture

It's possible to build and run for ARM architecure, i would like to build some things to run in raspberry with this.

Docs: Add "API" Section

Add "APIs" Section

• List of View props (https://facebook.github.io/react-native/docs/view-style-props)
• List of Image props (https://facebook.github.io/react-native/docs/image-style-props)

Docs: Create a boilerplate for start with React Ape

Create a boilerplate project to start with React Ape. It should be quite simple, just one component and "live reload" working. I'm open to ideas to start the project, but I really don't to add a CLI for it. It can be a script on gh (ex: sh https://github.com/raphamorim/react-ape/raw/scripts/start.sh) that can clone and install the dependencies.

Unable to accept Discord invite

Link: https://discord.com/invite/njHHfRzJ42

React Ape 0.1.0 🔥🐒

Related #16 #19

Docs

• Start sections on documentation (ref #18)
  • react-ape-boilerplate
  • "APIs" Section (ref #18)
    • List of View props (https://facebook.github.io/react-native/docs/view-style-props)
    • List of Image props (https://facebook.github.io/react-native/docs/image-style-props)
  • "Components" Section (ref #18)
  • "Contributing" Section (ref #22)
  • Work on a way to render react-ape in Docusaurus
• Add React Ape logo 95d5b1d
• Publish site (WIP)

Components

• <SectionList/> https://facebook.github.io/react-native/docs/sectionlist (#33)
• <Button/> https://facebook.github.io/react-native/docs/button
• <TextInput/> https://facebook.github.io/react-native/docs/textinput
• <Picker/> https://facebook.github.io/react-native/docs/picker
• <Slider/> https://facebook.github.io/react-native/docs/slider
• <Modal/> https://facebook.github.io/react-native/docs/modal

APIs

• dimensions #28

Core

• Virtual Canvas algorithm #21 ⚡️⚡️⚡️
• Allows to inspect using React DevTools 💯(dependent of #21)

Support for life-cycle events on Renderer elements

Please add support for life-cycle events to basic Renderer elements such as:

• componentDidMount
• componentWillUnmount
• componentDidUpdate

I currently work with a fps-based rendering engine operating on canvas, and I wanted to try implementing those elements based on the existing Components on this engine.

ListView

• Create ListView Component
• ListView Scroll Horizontal
• ListView Scroll Vertical
• Automatically distribute items coordinates based on width/height of each child

Could We create an app for adding elements on Canvas using drag-and-drop?

I have a project to create a canvas by inserting many elements using drag-and-drop, and I'll likely use this project to manipulate canvas elements.

Another question: The React-Ape has animation effects or filters for elements?

Integrate docusaurus with CircleCI

Automating Deployments Using Continuous Integration

Ref: https://github.com/facebook/Docusaurus/blob/master/docs/getting-started-publishing.md#automating-deployments-using-continuous-integration

onClick on View

Currently we don't have support to onClick on any element, we could start with view maybe reusing spatial information in the view object.

dimensions API

Methods

• get
• addEventListener

Reference: https://facebook.github.io/react-native/docs/dimensions

Fix some style heritage issue

Currently, if isn't setting parent styles into the children it just uses the default styles, for example:

<View style={{ color: 'orange' }}><Text/></View>

ˆ Text should use color orange instead of black (which is the default).

[Discussion] Support custom Components to have CanvasContext access

first draft:

import React, { Component } from 'react'
import { render, createComponent } from 'react-ape'

const MyComponent = createComponent(function(props, children, ctx) {
  ctx.rect(20,20,150,100);
  ctx.stroke();
})

//class MyComponent extend React.Component {
//  render
//}

render(MyComponent, document.querySelector('canvas'));

Components: <Button/>

Reference: https://facebook.github.io/react-native/docs/button

Description: Implement an initial version of Button component on React Ape renderer using Canvas.

AC: Consider using it on devices like TV and portable games.

It's time to start the documentation

I was thinking about using https://docusaurus.io/ in docs/ folder. Following the structure of react-native (e.g: The Basics, Guides, Components, APIs).

I'm very open to other ideas too.

react ape roadmap and future

Hi, @raphamorim

This project looks really cool and I want to help it also to develop and learn.

• are you thinking about in a roadmap? like review the already done things and update?
• is the react functional components features inside of the roadmap?
• bonus: fix the roadmap hyperlink on docs
  

React Ape examples

Added few sections about why/examples and I will start to work on few example Apps to stress the renderer to make it close to something stable. If you're interested in create an example app would be great (for now I am targeting TV devices to test), add a comment here or a PR adding your example in the README.md

margin and padding for View

Implementation of margin and padding for existent elements

Dropping frames ~ Render perfomance in TV devices

Currently React Ape drop frames when rendering a lot of components in the same time. This issue was reported by @raphaelpor originally. The reason of problem is known: It renders using stack logic so basically waits for the JavaScript to process the forEach then render each item per order which isn't the best solution. I will be working in a rewrite of the core render logic and also porting logic to Web components (as a performance test, e.g: https://engineering.icf.com/reusable-canvas-based-web-components/) if it's available in the window context.

Add Flexbox support

Add flexbox support over View, Text and Image components. Should follow similar API to React Native.

Fix update type render issue

Currently, if you change the render based on state, for example: View to Text it just doesn't clean the View on unmount.