Why you should use React Canvas

My main focus is to show how react canvas can be used to optimize scrolling performance and avoid the jank which we experience while showing complex animations on mobile web. I would go through the problems we face while currently doing complex animations, and how we can use react canvas together with our other components to optimize rendering performance and get a seamless native like experience on moile web.

I would address on the following things:
1) The jank problem on the web while doing animations.
2) How we can optimize the scrolling performance.
3) How React Canvas does it.
4) Benefits of React Canvas.
5) When to use it?
6) Limitations
7) Alternative libraries which lets you play with the canvas.
7) Demo - The scenario at Bookmyshow where we would be using react canvas to solve our problem of user experiencing a jank when he/she tries to scroll through very big seat layout for boooking.

Transcript

1. Why you should use React Canvas
2. Arwa Lokhandwala Senior Full Stack Developer @BookMyShow @arwa1893
3. Agenda • The Jank problem • Why the Jank happens • Understanding the Rendering process • How to optimize scrolling performance • Knowing the React-canvas • How react canvas actually works • Limitations of React-canvas • Alternative libraries • Demo
4. The Jank problem “Jank” is any stuttering or choppiness that a user experiences when there is motion on the screen—like during scrolling, transitions, or animations.
5. Jank
6. Why the Jank happens ??? • Most of the devices refresh their screens 60 times a second • The browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes. • Each frame has a budget of 1000/60 = 16.66 ms
7. Understanding the Rendering Process 1. Calculate 2. Layout 3. Paint 4. Composite
8. Optimizing scrolling performance • Avoid Expensive Styles • Keep Reflows and Repaints to minimum ( Ex : offsetTop property) • Debounce your scroll events
9. React Canvas Adds the ability to react components to render to canvas rather than the DOM
10. Bridge or Surface Component Group Component Primitive Component Primitive Component How react canvas actually works
11. Primitive Component & Layer component • Basic building blocks of your custom renderer • Represents tools for drawing like rectangle, line of text, image or just a line • Common properties & styles like top, width, zIndex, height, backgroundColor are expressed using Layer Component
13. Group Components • It allows to group several primitive components together • It’s a container component • It allows rendering to cache expensive drawing operations
15. Bridge Or Surface Component • Entry point into your application • React component that renders the canvas
17. Limitations of React Canvas • Doesn’t support responsive web design • If not designed properly, can cause huge memory leaks
18. Alternative libraries • React Konva ◦ https://github.com/lavrton/react-konva • Pabla ◦ https://github.com/goshakkk/pabla
19. Thank You