/advanced-react-perf

Primary LanguageJavaScript

Advanced Performance Tuning for React Applications

This is the source code for an advanced React Performance workshop. It was designed by Sara Vieira, Sia Karamalegos, and Jason Lengstorf.

Abstract

Getting performance right is hard, even when you have the luxury of starting an app from scratch. It's even harder when you need to improve the performance of existing apps, as is so often the case. In this workshop, Sia Karamalegos, Sara Vieira, and Jason Lengstorf will lead you through the process of:

  • Assessing an existing React app
  • Diagnosing performance problems
  • Prioritizing highest-impact solution
  • Implementing performance fixes

During this full-day workshop, you’ll learn advanced techniques for improving the performance of React apps, including:

  • Lazy loading resources & components with React.lazy and Suspense
  • Leveraging service workers for performance
  • Seamlessly preloading and prefetching assets
  • Automatically optimizing images
  • Dynamically subsetting fonts
  • Mitigating the performance impact of third-party scripts
  • Code splitting and bundle optimization
  • Using psychology to make an app feel faster than it actually is

By the end of the workshop, you’ll be able to diagnose and solve a variety of real-world performance problems. You’ll also learn how to weigh trade-offs to ensure that both your apps and your teams perform well. The tools added to your toolbox will continue to serve you, your team, and your users for years to come.

Prerequisites

Intermediate React knowledge, Node/npm installed, Git installed, basic command line knowledge.

About the trainers

Sara Vieira is a developer @CodeSandbox and an international agent of JS Bullshit 🚀, open sorcerer, maker of useless modules, Blogger, Drummer and horror movie fan girl.

Twitter | Website | Github

Jason Lengstorf is a developer advocate, senior engineer, and occasional designer at Gatsby. He’s an advocate for building highly productive teams through better communication, well designed systems and processes, and healthy work-life balance, and he blogs about that sometimes. He lives in Portland, Oregon.

Twitter | Website | Github | Blog | Facebook

Sia Karamalegos is a developer, international conference speaker, and writer. She is a Google Developer Expert in Web Technologies and a Women Techmakers ambassador. She co-organizes #FrontEndParty, GDG New Orleans, and NOLA Hack Night in the New Orleans area. She is the founder and lead developer for Clio + Calliope Web Development and was recognized in the Silicon Bayou 100, the 100 most influential and active people in tech and entrepreneurship in Louisiana. When she's not coding, speaking, or consulting, Sia likes to design crochet patterns and dabble in charcoal figure drawing. She's also an avid endurance athlete.

Twitter | Website | Github | Blog | StackOverflow | LinkedIn

Slides and Controls

The slides are deployed here. To advance the slides, use n for next and p for previous. The right arrow jumps to the next section (and left for previous section). Up and down to advance through slides within a section.

Resources

Want to learn more about how to measure and improve performance? Here you go:

Other sources: