My “reaction” to react-canvas
I was wasting time on twitter when everybody started tweeting about Flipboards new github repo: react-canvas. Then I saw:
Didn't had the chance to read the entire tweet so I opened the Flipboard website on my laptop. Hmmm… Right-click > Inspect element… They are using React… Nice, but not spectacular… Closed the tab… After reading the entire tweet to see what was the fuss about, I've took my Jolla phone and done the same thing.
Now you have to understand that I'm not usually delighted when I surf the web on my phone using the default browser… But boy, Flipboards “Explore” page was something that I've never experienced before. I was scrolling back and forth and I couldn't believe it.
Everything was working so smooth… so, I thought to myself “The thing that makes this tick is too much for my brain to comprehend”, but I later realised that it’s not the case.
So what is react-canvas?
React Canvas is something that Flipboard came out after struggling with the scrolling experience(a.k.a jank) on most of mobile devices. Not just that, but rendering fonts just got a lot better. Canvas solves some of the font rendering inconsistencies.
In case you don’t know what React is, you should think of it as the next thing when it comes to UI and apps on browsers and mobiles. React renders components using the virtual DOM. It has amazing node differing capabilities so that it will update only the nodes that need to change.
React Canvas uses the same principle, but instead of transforming the virtual DOM in real nodes, it draws the app on canvas. Using canvas you can obtain speed of a native mobile apps inside your browser.
How does React helps react-canvas?
If you have worked with canvas you know how painful is to create something with it, you have to write a lot of boilerplate code. React Canvas uses the power of React to easily compose components drawing them on canvas. It uses React to determine which components to draw.
What have they accomplished?
Developers from Flipboard are using React in production in the desktop version of the website, and for 60fps mobile version, they are using React Canvas, combined with React.
React Canvas provides a handful of canvas abstraction components like: Image, ListView, Text. So that is a lot of open source code you don't have write, right on your doorstep.
We now know that React is not only about the DOM. It can be many things… React Native beeing good example.
When to use React Canvas?
I didn't had time to look into react-canvas, truth be told, when I jumped into making something that I wanted to call a cutting edge React single page app. I wanted to experiment with some things that were new and play well with React. My recipe for a bookmark application was:
flummox
immutable-js
react-canvas
I hit a dead end when I tried to add a box-shadow to a circle, and a gradient on top of an image. I forked react-canvas, made some adjustments to the code so I can obtain the results I wanted.
While in this process I've learned a few tricks on how react-canvas is used with React. React Canvas it’s not using the differing capabilities of React since it invalidates all the nodes up to the top surface.
Then… I hit another dead end. I wanted to let the user drag a bookmark off the screen into another container in order to create a collection. This is something React Canvas was not designed for. So I ended up reading the Introductory blog post which made a some things s a whole lot clearer.
React Canvas is not meant to completely replace the DOM. We utilize it in performance-critical rendering paths in our mobile web app, primarily the scrolling timeline view.
Where rendering performance is not a concern, DOM may be a better approach. In fact, it’s the only approach for certain elements such as input fields and audio/video.
In a sense, Flipboard for mobile web is a hybrid application. Rather than blending native and web technologies, it’s all web content. It mixes DOM-based UI with canvas rendering where appropriate.
This is a quote from the blog post. I also read about the accessibility disadvantages of using canvas. The solution would be to have a rendered DOM mirror of what it’s on the canvas ready for users to interact with.
Lesson learned: research more before jumping ahead into creating something.
Taking it further
React Canvas is something experimental right now, but I see a great future ahead of it. Along with React they are doing some of the things that browsers should do natively (like better performance on scroll or rendering only the dirty nodes).
React Canvas can be used for creating 2D HTML5 games, replace some graphs and even replace maps. Since now React is not only about the DOM, my prediction is that we will soon see a three.js or another 3D library implementation to React quite soon.
Thank you for reading. Recommends, comments and tweets are always welcome.
