Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Things I Learned Messing Around with React Canvas

Things I Learned Messing Around with React Canvas

Presented at MelbJS, March 11th, 2015

Example code over yonder: https://github.com/plasticine/react-canvas-experiments

Justin Morris

March 11, 2015
Tweet

More Decks by Justin Morris

Other Decks in Technology

Transcript

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

    — Flipboard1 1 http://engineering.flipboard.com/2015/02/mobile-web/ #MelbJS March 11, 2015 — @plasticine 3
  2. 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
  3. 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
  4. 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://daringfireball.net/linked/2015/02/10/flipboard-web #MelbJS March 11, 2015 — @plasticine 6
  5. 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-flipboard-chose-form-over-function-their-web-version #MelbJS March 11, 2015 — @plasticine 7
  6. 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
  7. 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
  8. TL;DR… What is <canvas>? —Hardware accelerated, immediate mode bitmap rendering

    element —It’s content exists outside of the DOM —Draw stuff via scripting (Javascript usually) <canvas></canvas> <!— I’m an image, kinda, sorta. —> #MelbJS March 11, 2015 — @plasticine 10
  9. 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-flow, etc) to canvas rendering. #MelbJS March 11, 2015 — @plasticine 11
  10. 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
  11. 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
  12. 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
  13. 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
  14. react-canvas Primitive Components <Layer> The most basic drawing primitive. Basic

    styling happens here. #MelbJS March 11, 2015 — @plasticine 17
  15. react-canvas Primitive Components <Group> A container component, used to wrap

    collections of other drawing primitives. #MelbJS March 11, 2015 — @plasticine 18
  16. 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
  17. react-canvas Primitive Components <Image> Render images into the <canvas>, handles

    image loading for you. Fancy! #MelbJS March 11, 2015 — @plasticine 20
  18. 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
  19. 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
  20. 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
  21. 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
  22. Issues Other Gotchas —Limited React EventType support; —onTouchStart —onTouchMove —onTouchEnd

    —onTouchCancel —onClick #MelbJS March 11, 2015 — @plasticine 29
  23. 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