ReactFoo Mumbai

ReactFoo Mumbai

On React, alternatives to React, ReactNative and front-end engineering

Arwa Lokhandwala

@arwa_lokhandwala

Why we should use React Canvas

Submitted Apr 6, 2018

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.

Outline

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.
  8. 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.

Speaker bio

I am passionate programmer and huge javascript lover who wants to create the best possible thing and deliver the best experience which a user can ever have. I am currently working at BookMyShow as a Full Stack Developer responsible for delivering the best possible experience on Mobile-Web/Desktop. Previous to this I was working for Jio as a Backend developer, responsible for handling Jio Cinemas and Jio XpressNews application. I always try to find a better way of doing the existing thing and I would love to share some insights on what I have learned so far.

Comments

{{ gettext('Login to leave a comment') }}

{{ gettext('Post a comment…') }}
{{ gettext('New comment') }}
{{ formTitle }}

{{ errorMsg }}

{{ gettext('No comments posted yet') }}

Hosted by

A community - for and of - front-end engineers to share experiences with ReactJS, performant apps with React, crafting better User Interfaces (UI) with React and GraphQL ecosystem. ReactFoo also discusses design patterns and user experience. more