Why you should use react canvas

Editor's Notes

• #5: We all know CSS animations and transitions are the fastest path to smooth animations on the web but we are frustrated with the fact that it feels slow when compared to the native apps. It is linked to how smoothly your page renders So the lag which the users experience while he touches the screen and when the page responds is called a Jank
• #6: Jank is simply the result of the web page not being able to keep up with the refresh rate of the display
• #7: Calculate - Determines which CSS rules apply to which elements Layout - Determines dimensions and positions for each element Paint - Fills in the pixels for each element onto layers, but doesn’t yet draw these layers screen Composite - Draws the painted layers to screen Each of these steps triggers those steps that comes after it and not vice versa So in order to improve the rendering performance of our page, we have to make sure that the browser performs minimum of the above steps
• #8: Avoid expensive styling - some styles are expensive because they require repainting example - top, left properties causes the browser to again perform the layout, paint and then the composite step which is pretty expensive, so we should avoid using such styles and replace it with styles that triggers only the final composite step like transform: translateY(-100px). Similar thing goes for box-shadow Whenever you try n use offsetTop property, it immediately gives the browser alot of work because it now has to go and layout your page to give the correct answer, this is what is called reflowing and then if you try to change the property of another element then browser has to do the repainting again, this repaint reflow cycle should be avoided…..Use requestAnimationFrames instead. -------Before moving to the next slide say this -------------------- We all know most of the modern browsers today have hardware accelerated canvas. React Canvas basically leverages this fact
• #9: React Canvas brings some of the APIs web developers are familiar with and blends them with a high performance drawing engine.
• #10: React canvas provides a set of Standard React Components that abstracts the underlying rendering implementation
• #13: Primitive elements like line, Image, rectangle Because reacts wants all the child components to rendered with in a single element Hence it optimizes the scrolling performance
• #15: Bridge or Surface components can be thought of as a drawing canvas on which you place your other components Its a top level component which encompasses your entire application