"Scalable microfrontends & how to optimize hydration", Oleksandr Lavrenchuk

In this talk, we will explore the micro frontend architecture based on the real example of the big product, uncovering how dozens of teams coexist, work, and deploy features independently every day. Moreover, I will talk about the bottlenecks of React hydration, how it affects users, and how to apply the progressive hydration pattern to improve web performance.

1. What if I told you…

2. What if I told you… dozens of teams can independently work on the same application

3. What if I told you… dozens of teams can independently work on the same application developers can release changes to prod multiple times per day

4. What if I told you… dozens of teams can independently work on the same application developers can release changes to prod multiple times per day you can optimize the performance by delaying the React hydration

5. What if I told you… dozens of teams can independently work on the same application developers can release changes to prod multiple times per day you can optimize the performance by delaying the React hydration microfrontend is not just a buzzword

6. And it’s all real 🤯

7. Front-end Developer & Front-end Guild Lead at Fiverr . Oleksandr Lavrenchuk

8. 160+ Countries ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential. 3.9 M Active Buyers 33 Dev Teams

9. Independent work for dozens of teams Prod releases every day without a friction Consistency The needs & motivation:

10. Microfrontends to the rescue

11. How to cook microfrontends?

12. How to cook microfrontends? Do you even need them?

13. How to cook microfrontends? Do you even need them? Clear boundaries

14. How to cook microfrontends? Do you even need them? Clear boundaries (SSR) framework

15. How to cook microfrontends? Do you even need them? Clear boundaries (SSR) framework UI composer 💫

16. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential. Typical page example:

17. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

18. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

19. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential. Compose it!

20. Hydration?

21. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

22. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential. Source: web.dev

23. So what?

24. Source: patterns.dev

25. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

26. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential.

27. What if…

28. What if… We won’t hydrate everything at once?

29. From: Source: patterns.dev

30. To: patterns.dev Source: patterns.dev

31. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential. -30% INP Logged out homepage m obile -30% INP Vertical page mobile -7% INP Logged in homepage mobile

32. ©2022 Fiverr Int. Ltd. All Rights Reserved. Proprietary & Confidential. + 1% Buyer Conversion

33. What about CSR & simple lazy loading? With progressive hydration we leverage the server that we have. Hydration is faster than pure CSR - our html is already rendered, we just need to add the event handlers.