Things I Learned Messing Around with React Canvas

Things I Learned Messing Around with react-canvas Justin Morris @plasticine
#MelbJS March 11, 2015 — @plasticine 1

“You cannot build a 60fps scrolling list view with DOM…”
— Flipboard1 1 http://engineering.ﬂipboard.com/2015/02/mobile-web/ #MelbJS March 11, 2015 — @plasticine 3

Because “Jank” “Jank is any stuttering, juddering or just plain
halting that users see […] Jank is the result of frames taking too long for a browser to make, and it negatively impacts your users and how they experience your site or app.” — jankfree.org #MelbJS March 11, 2015 — @plasticine 4

But Drama! —Don’t use this in production. —Probably? —…or do?
—I dunno. Whatever. Do what you want. Make your Users happy. ✌️ #MelbJS March 11, 2015 — @plasticine 5

But Drama! “To me, that Flipboard went this route is
a scathing condemnation of the DOM/CSS web standards stack.” — John Gruber 2 2 http://daringﬁreball.net/linked/2015/02/10/ﬂipboard-web #MelbJS March 11, 2015 — @plasticine 6

But Drama! “…[calling] what Flipboard unleashed onto the ‘Web’ version
is akin to calling a collection of tires, AA batteries and spare car parts a Tesla.” — Faruk Ateş3 3 http://farukat.es/journal/2015/02/708-how-ﬂipboard-chose-form-over-function-their-web-version #MelbJS March 11, 2015 — @plasticine 7

But Drama! “60FPS being a ‘must have’ […] is to
be scathingly condemned, while ignoring the enormous and extraordinary achievement of the technologies underlying the Web” — John Allsopp 4 4 http://www.webdirections.org/blog/60fps-new-image-replacement-technique/ #MelbJS March 11, 2015 — @plasticine 8

Anyhoo… Drama aside, it is technically pretty interesting, so let’s
forget about all of that junk and pretend for the moment that this is a good idea, we’ll have more fun that way. :) #MelbJS March 11, 2015 — @plasticine 9

TL;DR… What is <canvas>? —Hardware accelerated, immediate mode bitmap rendering
element —It’s content exists outside of the DOM —Draw stuﬀ via scripting (Javascript usually) <canvas></canvas> <!— I’m an image, kinda, sorta. —> #MelbJS March 11, 2015 — @plasticine 10

TL;DR… What is react-canvas? Bindings for React to render image
data into a <canvas> context, instead of the DOM. Brings many of the architectural wins of React (composition, data-ﬂow, etc) to canvas rendering. #MelbJS March 11, 2015 — @plasticine 11

TL;DR… What is react-canvas? Other things doing similar things; —React
ART6 (ART / SVG bindings) —React Native (Native bindings) —React X11 (github.com/sidorares/node-x11) —React WebGL…? 6 https://github.com/reactjs/react-art #MelbJS March 11, 2015 — @plasticine 12

TL;DR… What is react-canvas? import canvas from ‘react-canvas’; class CanvasApp
extends React.Component { render() { let sweetStylez = { width: 100, height: 100, top: 50, left: 50, backgroundColor: '#ccc' }; <canvas.Surface top={0} left={0} width={200} height={200}> <canvas.Layer style={sweetStylez} /> </canvas.Surface> } } React.render(<CanvasApp/>, document.body); #MelbJS March 11, 2015 — @plasticine 13

TL;DR… What is react-canvas? <body> <canvas width=“200” height=“200” style=“width:200px; height:200px;”
data-reactid=“.0”></canvas> <body> #MelbJS March 11, 2015 — @plasticine 14

react-canvas Primitive Components —<Surface> —<Layer> —<Group> —<Text> —<Image> —<ListView> #MelbJS
March 11, 2015 — @plasticine 15

react-canvas Primitive Components <Surface> A root component for rendering in
react-canvas. This is where rendering to the DOM stops, and rendering to a <canvas> element starts. #MelbJS March 11, 2015 — @plasticine 16

react-canvas Primitive Components <Layer> The most basic drawing primitive. Basic
styling happens here. #MelbJS March 11, 2015 — @plasticine 17

react-canvas Primitive Components <Group> A container component, used to wrap
collections of other drawing primitives. #MelbJS March 11, 2015 — @plasticine 18

react-canvas Primitive Components <Text> Render arbitrary text content. Handles multi-line
text and wrapping for you — something <canvas> does not handle for you. #MelbJS March 11, 2015 — @plasticine 19

react-canvas Primitive Components <Image> Render images into the <canvas>, handles
image loading for you. Fancy! #MelbJS March 11, 2015 — @plasticine 20

react-canvas Primitive Components <ListView> Essentially a UITableView for touch scrolling
in <canvas> Handles unloading content outside of the viewport bounds. #MelbJS March 11, 2015 — @plasticine 21

react-canvas API measureText() Helper function to calculate text dimensions from
font metrics. Kind of insane-ish. O_O #MelbJS March 11, 2015 — @plasticine 22

Example Time! #MelbJS March 11, 2015 — @plasticine 23

Issues There are dragons in these here waters. #MelbJS March
11, 2015 — @plasticine 24

Issues Accessibility The <canvas> element is inherently inaccessible. —Screen reading
/ text to speach —Focus highlighting —Content zooming —Content paging / announcing via gestures #MelbJS March 11, 2015 — @plasticine 25

Issues Accessibility <canvas> Fallback content somehow? ¯\_()_/¯ </canvas> #MelbJS March
11, 2015 — @plasticine 26

Issues Performance Image decoding in the main thread kills scrolling
performance (unlike native). No control over when GC happens (unlike native). Touch latency / gesture recognisers not as good. #MelbJS March 11, 2015 — @plasticine 27

Issues Progressive Enhancement Hahah, you’re funny. :) #MelbJS March 11,
2015 — @plasticine 28

Issues Other Gotchas —Limited React EventType support; —onTouchStart —onTouchMove —onTouchEnd
—onTouchCancel —onClick #MelbJS March 11, 2015 — @plasticine 29

Issues Other Gotchas —refs don’t work —Still very much a
WIP —is 0.13.0 only (which is OK as of today!) #MelbJS March 11, 2015 — @plasticine 30

The End Thanks! References; - github.com/plasticine/react-canvas-experiments - github.com/Flipboard/react-canvas - github.com/facebook/css-layout

Things I Learned Messing Around with React Canvas

Things I Learned Messing Around with React Canvas

Justin Morris

More Decks by Justin Morris

Other Decks in Technology

Featured

Transcript

Things I Learned Messing Around with react-canvas Justin Morris @plasticine

#MelbJS March 11, 2015 — @plasticine 2

“You cannot build a 60fps scrolling list view with DOM…”

Because “Jank” “Jank is any stuttering, juddering or just plain

But Drama! —Don’t use this in production. —Probably? —…or do?

But Drama! “To me, that Flipboard went this route is

But Drama! “…[calling] what Flipboard unleashed onto the ‘Web’ version

But Drama! “60FPS being a ‘must have’ […] is to

Anyhoo… Drama aside, it is technically pretty interesting, so let’s

TL;DR… What is <canvas>? —Hardware accelerated, immediate mode bitmap rendering

TL;DR… What is react-canvas? Bindings for React to render image

TL;DR… What is react-canvas? Other things doing similar things; —React

TL;DR… What is react-canvas? import canvas from ‘react-canvas’; class CanvasApp

TL;DR… What is react-canvas? <body> <canvas width=“200” height=“200” style=“width:200px; height:200px;”

react-canvas Primitive Components —<Surface> —<Layer> —<Group> —<Text> —<Image> —<ListView> #MelbJS

react-canvas Primitive Components <Surface> A root component for rendering in

react-canvas Primitive Components <Layer> The most basic drawing primitive. Basic

react-canvas Primitive Components <Group> A container component, used to wrap

react-canvas Primitive Components <Text> Render arbitrary text content. Handles multi-line

react-canvas Primitive Components <Image> Render images into the <canvas>, handles

react-canvas Primitive Components <ListView> Essentially a UITableView for touch scrolling

react-canvas API measureText() Helper function to calculate text dimensions from

Example Time! #MelbJS March 11, 2015 — @plasticine 23

Issues There are dragons in these here waters. #MelbJS March

Issues Accessibility The <canvas> element is inherently inaccessible. —Screen reading

Issues Accessibility <canvas> Fallback content somehow? ¯\_()_/¯ </canvas> #MelbJS March

Issues Performance Image decoding in the main thread kills scrolling

Issues Progressive Enhancement Hahah, you’re funny. :) #MelbJS March 11,

Issues Other Gotchas —Limited React EventType support; —onTouchStart —onTouchMove —onTouchEnd

Issues Other Gotchas —refs don’t work —Still very much a

The End Thanks! References; - github.com/plasticine/react-canvas-experiments - github.com/Flipboard/react-canvas - github.com/facebook/css-layout