Bet on canvas for a high performant TV application with React Ape
Canvas rendering power and React directives
Preface
The year was 2017 and I was publishing an article about a new React renderer within a package that unified DOM rendering strategy for low-memory apps and a TV app builder in one project called React-TV (you can read more here: https://medium.com/@raphamorim/developing-for-tvs-with-react-tv-b5b5204964ef ).
Okay, before anything let me start with the famous statement "I was wrong" and of course I will explain my frustrations with React TV. By the way, I want to make sure that you understand you might not need React Ape.
When I was working on introduce React in TVs using React-DOM back in time found some issues and mostly was regarding interaction speed and "app-native feeling" (DOM isn't the most performant option for user interactions specially in low memory devices, well if you didn't know that I strongly recommend read this: https://engineering.flipboard.com/2015/02/mobile-web),
Back then the idea of stepping in the render for reduce memory usage sounded as a good idea by looking the initial benchmarks. However we realized later when the app was getting bigger and bigger that more "hacks" in the renderer side were becoming necessary to reduce memory usage and offload the render pipeline making the application feels more smooth.
It wasn't scaling. Basically the renderer becoming a framework and taking full control of the code (yes, inversion of control) to chop down memory/CPU usage.
Frustrated, I went to speak in few conferences that year and talking with other developers I figured out that they were using canvas (in fact they still do) instead of DOM because the application was huge and just as an example: a big list of items (e.g: grid with movies) DOM for interaction isn't the most smooth thing on TVs.
So later I was writing what would be known as React-Ape (which was interrupted few times during development, specially in the pandemic time).
What's exactly React-Ape?
As Netflix said:
“Crafting a high-performance TV user interface using React is a real challenge”
TVs usually have limited graphics acceleration, single core CPUs and high memory usage for a common TV App. These restrictions make super responsive 60fps experiences especially tricky.
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 like TV, PS5, Nintendo Switch, PS Vita and low memory devices.
So you can build Canvas apps using React directives. It does have the same concepts as React, letting you compose a rich UI from declarative components.
A code example:
Example with state rendering:
Status?
React-Ape still is in experimental stage, the renderer isn't stable and a lot of functionalities based on React Native style props are missing, as such: flexbox logic.
We are working a stable release for late of this year. You can follow React Ape progress here: https://github.com/users/raphamorim/projects/1. Below you can see an example of it rendering on a TV:
Recommend stay tuned because we are working on few post of how to get started once we have navigation API ready.
I just created a discord channel in case you would want to join and contribute: https://discord.gg/zRvJjmKGwS (discord link was updated to Rio terminal discord, considering React Ape will use sugarloaf dependency, reach out for more information).
