JSFoo: round the year submissions

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.

Links

• My website and blog: https://ankursethi.in
• My previous talk at JSFoo 2016: https://www.youtube.com/watch?v=X8uMg-VwJS8
• My Medium profile (where I only post occasionally): https://medium.com/@ankurs3thi
• My Twitter profile (mostly me complaining about things): https://twitter.com/ankurs3thi