There’s a lot of tools and talks about loading performance – but what if every time you click a button in your app, the app lags a bit? Let’s learn how to deal with that.
In this workshop with Ivan Akulov, a Google Developer Expert, full-stack software engineer, and performance consultant, you will learn how to reproduce, diagnose, and resolve runtime React performance issues to give your app a speed boost.
“The format of the workshop is great. We get to actually hear the thought process behind the debugging and profiling, why we chose one technique or the other. We get to reflect on the choices and discuss them live.” – Vyacheslav, May 2022
“I really liked just watching over Ivan’s shoulder while he did the analysis. Ivan kept things really simple – no sophisticated, expensive tooling, just patiently analyzing the profiles we were taking, seeing why components re-rendered, and showing how to fix them. That was absolutely enlightening!” – Elisabeth, Aug 2022
Про що ви дізнаєтесь на цьому воркшопі:
Mid-level or Senior engineers: these folks have a solid production React experience and are very familiar with useMemo, useCallback, and PureComponent/React.memo. Still, they would love to get more familiar with Chrome DevTools, React Profiler, and more tools and approaches for diagnosing and debugging React performance issues.
Загальний воркшоп триватиме 4 дні: 16, 17, 19 та 20 січня. Також є додаткові бонусні дні: 23, 24 січня та 7 лютого для учасників Standard + 1 Bonus Day та Standard + 3 Bonus Days (GMT+2).
Воркшоп пройде виключно англійською мовою.
Zoom + Slack. The workshop will take place in Zoom. We’ll also create a shared Slack channel for long-term link sharing.
Exercises. In the end of each session, we’ll split into groups to do exercises. For exercises, please bring a laptop with Chrome, React DevTools, Git, Node.js, Yarn, and your favorite IDE installed.
16 січня – Unnecessary Renders (понеділок, з 11:00 до 15:00 GMT+2)
On the first day, we’ll dive deep into the most common React performance anti-pattern: unnecessary renders. We’ll use Chrome DevTools and React Profiler to profile a slow app and figure out what’s making it slow. Then, step-by-step, we’ll fix every issue we found.
17 січня – Expensive Renders (вівторок, з 11:00 до 15:00 GMT+2)
We’ll look at another common React performance issue: an expensive render. We’ll see how modern browser APIs (such as isInputPending() and web workers) help to make the page run smoothly even with very costly computations. We’ll also take a look at React 18’s startTransition.
19 січня – Chains of Rerenders and Layout Thrashing (четвер, з 11:00 до 15:00 GMT+2)
On the third day, we’ll learn to recognize, profile, and optimize chains of rerenders, which happen when some code triggers several renders in a row. This one is frequent in large single-page apps! We’ll also explore what happens every time the browser renders a new frame on the screen–learn what to do when browser’s CSS/layout costs get out of control.
20 січня – Hydration (п'ятниця, з 11:00 до 14:00 GMT+2)
Page loading speed is a whole separate topic we’re not covering in this workshop. However, we’ll use everything we learned so far to dive into a very React-specific loading performance issue: hydration time of server-rendered apps. Expect to see
Додаткові бонусні дні для учасників Standard + 1 Bonus Day та Standard + 3 Bonus Days квитка:
23 січня - Bonus Day Redux Optimizations (понеділок, з 11:00 до 13:00 GMT+2)
Not everyone uses Redux. But if you do, chances are Redux is making your app slower. During this bonus day, we’ll explore a few Redux performance antipatterns. We’ll also learn multiple ways to fix them, ranging from writing better selectors to making architectural changes.
24 січня - Bonus Day Bundle Init (вівторок, з 11:00 до 13:00 GMT+2)
Most advice about bundles focuses on making them smaller. However, bundles take time not only to download, but also to execute. And on low-end devices (such as inexpensive Android phones), execution time might be even longer than loading time. So, let’s explore profiling and optimizing bundles in webpack apps.
7 лютого - Bonus Day Follow-Up & Live Debugging (вівторок, з 11:00 до 13:00 GMT+2)
Attended the workshop, tried optimizing your React app, and have some questions now? This is the right place for them. Two weeks after the workshop ends, we’ll meet again to answer any questions you might have after trying the workshop advice in practice. And don’t forget to bring your apps for some live debugging!
Ivan is a Google Developer Expert, web performance consultant, and full-stack software engineer. His web performance experience has helped hot startups and Fortune 500 companies like Google, Framer, and Appsmith. He currently runs the web performance consulting agency [PerfPerfPerf]
Outside of work, enjoys exploring modern art, discovering lesser-known electronic and techno artists, and obsessing over serif typefaces.