Hitting 60 FPS: How to Discover and Fix Performance Issues in React Applications

Aug 2018

13 Mon

14 Tue

15 Wed

16 Thu

17 Fri

18 Sat 08:35 AM – 04:55 PM IST

19 Sun

Make a submission

India International Centre, New Delhi

##About the event

After successful editions in Bangalore, Pune, Hyderabad and Mumbai, ReactFoo travels to Delhi. The Delhi edition will focus on the following topics:

Performance and React.
Performance, in general.
Architecture with React.
Alternatives to React – such as Angular, Vue and other frameworks – why these worked / did not work for your use-case.
Mobile engineering with ReactNative or alternatives.

ReactFoo Delhi is an event for JavaScript, React and front-end engineers. All speakers must have direct experience working with performance, React, React Native or alternatives to these.

Format

We invite developers and architects from large and small organizations to share their stories and insights with the community. You can either propose:

Full length talks of 40 mins duration.
Short talks of 20 mins duration.
Birds Of Feather (BOF) sessions.
Hands-on workshops for 3-6 hour duration.

Workshops on 19th August will be announced shortly. 30-40 participants will be admitted to each workshop. Workshop tickets have to be purchased separately.

Who should attend

Front-end engineers
JS engineers from enterprises.
JS engineers from startups.
Architects.
Cross-platform mobile developers.

Why you should attend?

To learn from and network with peers from the industry.
To gain insights from case studies of practical implementation, and evaluate ReactJS and React Native for your work.
To program better with React and React Native.

Talk selection process

Speakers from previous editions will review proposals and vote on them. In order to make it to the shortlist, your submission must contain the following information:

Key insights you will present, or takeaways for the audience.
Overall flow of the content.

You must submit links to videos of talks you have delivered in the past, or record and upload a two-min self-recorded video explaining what your talk is about, and why is it relevant for this event.

Also consider submitting links to the following along with your proposal:

A detailed outline, or
Mindmap, explaining the structure of the talk, or
Draft slides.

Honorarium for selected speakers; travel grants

Selected speakers and workshop instructors will receive an honorarium of Rs. 3,000 each, at the end of their talk. Confirmed speakers and instructors also get a pass to the conference. We do not provide free passes for speakers’ colleagues and spouses.

Owing to a tight budget, we will not be able to offer travel grants or accommodation for this event.

Venue

India International Centre (IIC), Seminar Hall 1, 2 & 3, 1st Floor, Kamaladevi Block, 40 Max Mueller Marg, Lodhi Gardens, Lodhi Estate, New Delhi, Delhi 110003.

Important dates

ReactFoo Delhi conference – 18 August 2018.
ReactFoo Delhi hands-on workshops – 19 August 2018
Last date for submissions - 30 June 2018.

##Contact details:
For more information about speaking, ReactFoo, sponsorships, tickets, or any other information contact support@hasgeek.com or call 7676332020.

Event website: https://reactfoo.in/2018-delhi/

Hosted by

ReactFoo

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

All submissions

Previous Next

Hitting 60 FPS: How to Discover and Fix Performance Issues in React Applications

Submitted Jun 29, 2018

Section: Full talk Technical level: Intermediate

In this hands-on session, I will dive deep into the Chrome Developer Tools and walk you through discovering and fixing common performance issues that affect React applications.

I will begin by using the Chrome Developer Tools to profile an existing application that is known to have terrible performance. Then, I’ll interpret the profiling data, pinpoint the performance issues, fix them, and profile the application again to verify that the changes I made actually had an effect. At the end of the session, I’ll be left with an application that loads fast and runs fast.

In the course of the session, you will learn how to understand and interpret the immense amount of data produced by the Chrome profiler.

Outline

If you don’t consider the performance cost of new features before adding them to your React applications, you will find that your apps get slower over time and begin to drive away users. An app that is blazing fast today might bring even a high-end computer to its knees tomorrow, infuriating users and causing revenues to slip.

In this hands-on session, I will walk you through discovering and fixing common performance issues that affect React applications. All the issues I will talk about are based on real-world situations I’ve seen on my clients’ websites (including Quintype, Insider, and Pratham Books).

I will begin by using the Chrome Developer Tools to profile an application that is known to have terrible performance.
I’ll interpret the profiling data, make educated guesses about the causes of slowness or jank, and test out my theories by making changes to the application.
Once I’m sure of the root cause of a particular issue, I’ll proceed to fix it. I’ll then profile the application again to verify that I’ve actually fixed the problem.
At the end of the session I’ll be left with an application that loads fast and runs fast.

This will not be a tutorial on using the profiling tools built into Chrome, but an exercise in interpreting the results produced by them in order to arrive at actionable changes we can make to our codebase so we can improve performance.

We will combine Chrome’s profiling data with our knowlege about our own code, browser behaviors, and best practices to guess at the causes of jank, and use the scientific method of experimentation and measurement to arrive at fixes.

Speaker bio

Ankur Sethi leads the Web Engineering team at Uncommon in Bangalore. He builds applications with JavaScript, TypeScript, and (sometimes) Rust. He has terrible taste in music, which he inflicts on unsuspecting strangers if handed the AUX cord at parties.

Comments