Воркшоп: React Performance 3.0

Ви дізнаєтеся, як відтворювати, діагностувати та розв'язувати проблеми продуктивності React, щоб прискорити ваш додаток.

Ментор — Іван Акулов, Google Developer Expert, JavaScript-розробник та Senior Performance Engineer у Framer.
Online
Подія відбулась
Воркшоп: React Performance 3.0
Воркшоп: React Performance 3.0
Подія відбулась
Подія відбулась
Подія відбулась

Опис воркшопу:

Існує безліч інструментів та лекцій про швидкість завантаження додатків. Але що робити, коли додаток повільний не в завантаженні, а у взаємодіях?

Під час цього воркшопу ми навчимося аналізувати та вирішувати проблеми React Performance. Ми заглибимося в Chrome DevTools і React Profiler; подивимося, як оптимізувати великі дерева, дорогі компоненти, та гідратацію; і торкнемося таких фіч React 18, як startTransition() і React Server Components.

Воркшоп є практичним — 90% часу ментор та учасники проводять у коді та DevTools.

Ментор — Іван Акулов, Google Developer Expert, JavaScript-розробник та Senior Performance Engineer у Framer (до цього — незалежний консультант з продуктивності).

>

Теми:

📈 Chrome and React DevTools
Як профілювати React-додатки за допомогою панелі Performance в Chrome DevTools, React DevTools Profiler та сторонніх інструментів, таких як why-did-you-render.

🧑🏼‍🎨 Непотрібні рендери
Як переконатися, що ви не рендерите весь додаток кожного разу, коли будь-щось змінюється.

🏃🏼‍♂️ Цикл рендерингу в браузері
Ви натискаєте кнопку, і браузер оновлює сторінку. Що відбувається між цими двома етапами, і що може уповільнити його роботу?

🌴 Великі дерева компонентів
Як зменшити витрати на рендеринг за допомогою запам'ятовування та віртуалізації.

🪙 Дорогі функції
Як оптимізувати дорогі render() або слухачі подій.

🗑️ Layout Thrashing
Чому іноді браузер вирішує перерахувати всю верстку сторінки посеред виконання функції – і як цього уникнути.

⛓️ Ланцюжки рендерів
Один і той самий фрагмент коду іноді може викликати кілька рендерингів поспіль. Давайте навчимося помічати, діагностувати та виправляти такі випадки.

🧊 Розмір пакета та гідратація
Великі пакети та повільна гідратація є одними з найбільших вузьких місць у завантаженні React-додатків. Як ми можемо їх оптимізувати?

🫡 Антипатерни стану
React Context та Redux – два найпоширеніші способи зберігання станів у React-додатках. Як уникнути потрапляння в їхні найпоширеніші пастки для продуктивності?

⚛️ React 18
Як функції React 18, такі як useTransition(), допомагають робити додатки швидшими.

Формат:

Основний воркшоп, 4 дні: 12, 13, 16 та 17 березня.
Бонусні дні: 19, 20, 23 березня для учасників Standard + 1 Bonus Day та Standard + 3 Bonus Days.
Мова проведення: англійська
Платформа: Zoom.
Чат зі спікером: Telegram
Вправи: Наприкінці кожного модулю ми будемо ділитися на групи, щоб виконувати вправи. Для цього вам необхідно підключитися з комп'ютера чи ноутбука зі встановленими Chrome, React DevTools, Git, Node.js, Yarn і вашою улюбленою IDE.

Програма:

12.03, вівторок, 10:00 – Unnecessary Renders (тривалість ~3 години)

В перший день ми заглибимося у найпоширеніший антипаттерн продуктивності React: непотрібні повторні рендери. Ми будемо використовувати Chrome DevTools та React Profiler, щоб проаналізувати повільний додаток та з'ясувати, що його уповільнює. Потім, крок за кроком, ми розв'яжемо всі знайдені проблеми.

13.03, середа, 10:00 – Expensive Renders (тривалість ~3 години)

Ми розглянемо ще одну поширену проблему продуктивності React: дорогий повторний рендер. Ми побачимо, як такі техніки, як віртуалізація, допомагають справлятися з великими дорогими деревами. Ми також спробуємо startTransition у React 18.

16.03, субота, 10:00 – Chains of Rerenders and Layout Thrashing (тривалість ~3 години)

На третій день ми навчимося розпізнавати, аналізувати та оптимізувати випадки, коли деякий код запускає кілька повторних рендерів поспіль. У великих односторінкових додатках це часто трапляється досить часто!
Ми також дослідимо, що відбувається кожного разу, коли браузер рендерить новий кадр на екрані – і дізнаємося, що робити, коли витрати браузера на обчислення CSS та макету виходять з-під контролю.

17.03, неділя, 10:00 – Hydration (Тривалість ~3 години)

Швидкість завантаження сторінки - це окрема тема, яку ми не розглядаємо в цьому майстер-класі. Однак ми використаємо все, що ми дізналися до цього, щоб заглибитися в дуже специфічну для React проблему: довгий hydration. Очікуйте побачити lazy hydration, Suspense та багато іншого. Ми також трохи торкнемося React Server Components.

Додаткові бонусні дні для учасників Standard + 1 Bonus Day та Standard + 3 Bonus Days:

19.03, вівторок, 10:00 - Bonus Day Redux Optimizations (Тривалість ~2 години)

Не всі використовують Redux. Але якщо ви це робите, є шанс, що Redux уповільнює вашу програму. Під час цього бонусного дня ми розглянемо кілька антипаттернів продуктивності Redux. Ми також вивчимо кілька способів їх виправити, починаючи від написання кращих селекторів до використання маловідомих бібліотек та внесення архітектурних змін.

20.03, середа, 10:00 - Bonus Day: Pair Coding (Тривалість ~2 години)

Час попрактикуватися! Ми візьмемо повільний додаток та оптимізуємо його, щоб застосувати все, що ми дізналися до цього, на практиці.

23.03, субота - Bonus Day: Bundle Size (Тривалість ~2 години)

Великі бандли не тільки довго завантажуються, але також довго компілюються та виконуються! Під час цього бонусного дня ми навчимося аналізувати бандли – і справлятися з такими проблемними залежностями, як бібліотеки іконок, json-файли, або серверні модулі.


Кому буде цікаво?

Mid-level or Senior engineers:

  • Спеціалістам, які мають значний досвід роботи з React у продакшені й добре обізнані з useMemo, useCallback та React.memo.
  • Фахівцям, що прагнуть поглибити свої знання щодо Chrome DevTools, React Profiler та інших інструментів і підходів для діагностики та усунення проблем із продуктивністю React-додатків
  • .

Ментор: Іван Акулов

—Google Developer Expert

—Консультант з веб-продуктивності

—Fullstack програміст

—Допоміг з питанням продуктивності багатьом успішним стартапам та компаніям з рейтингу Fortune 500: Google, Framer та Appsmith.

—Очолює власне консалтинг-агентство з питань веб-продуктивності [PerfPerfPerf]

—Крім роботи, досліджує сучасне мистецтво, відкриває для себе маловідомих електронних та техно-виконавців, а також захоплюється типографікою та дизайном.

Twitter

Відгуки:

Курс проводиться повторно, ділимось реальними відгуками з минулого разу (з дозволу учасників)

"The speaker was going very deep into the audiences questions, which I liked"

"Something I knew but forgot (layout trashing), I learned that first of all we should check dev tools perfomance tab, not use only react profiler, also new for me was that css trick to not render offscreen DOM nodes, and I got understanding of batching in react, I didn't know there was any bathing in react 17. And this library why-did-you-render never heard of that before, cool thing"
"For me personally, each part was the best, a lot of useful information that you can use in your work. I would especially like to note the high-quality study of materials and preparation for the workshop by Ivan Akulov. Thank you to Ivan Akulov for the his work, everything was great."

"I love how Ivan highly explained in detail how chains of re-renders work under the hood and the distinctions between different versions of React. The workshop also gave me a fresh look at the DevTools which overcame my dislike of them!"

"All parts was very useful. But exactly for me was best "Expensive Renders"."

Ви ще можете приєднатися до воркшопу онлайн, а минулі сессії передивитися в записі!

Увійти
Або поштою
Увійти
Або поштою
Реєстрація через e-mail
Реєстрація через e-mail
Забули пароль?