1 of 16

Our journey into µFrontends

Let’s go :)

Rita Castro | SDC:LX @ VW d[s] | React Summit 2023

2 of 16

Hello World React Summit!

3 of 16

Previously… on React Summit…

4 of 16

Once upon a time…

Bad food vector created by pch.vector - www.freepik.com [Adapted]

5 of 16

Once upon a time…

publish

install

6 of 16

The workflow

git commit & git push the car-tracker
Bump package.json’s version
npm publish
⏳

Bump car-tracker’s version on package.json
git commit & git push
⏳
🧛🏼

7 of 16

But …

Who takes care of bumping the falcon’s version?

Track it on the backlog?

Bad food vector created by pch.vector - www.freepik.com [Adapted]

So many

steps!

Have we published?

Should we bump?

Woof, and we are only two teams…

…

8 of 16

What do we want?

Teamwork people created by pch.vector - www.freepik.com [Adapted]

9 of 16

React Advanced 2021 - A new hope

10 of 16

Enter µFrontends

11 of 16

Where did we stand?

👀

✅ Independent teams (kind of)

✅ Clear [customer] focus

✅ CI/CD

🔜 Seamless deploys

🔜 Independent teams (for real)

Building Micro-Frontends, Luca Mezzalira, 2022

12 of 16

A proof of concept - VistaCorp™️🐜

13 of 16

The real deal - Next Gen™️🖖

14 of 16

Woman expressing strong various feelings emotions created by pch.vector - www.freepik.com [Adapted]

15 of 16

👍🏼 😁 ❤️‍

🤷🏻‍♀️ 🤨 ❤️‍🩹

👎🏼 😞 💔

❎ AWS

❎ When to draw the line for each µFrontend

👀 Shared domain objects

👀 Design system

👀 Mono repo vs one repo per µFrontend

✅ React did it!

✅ Clean up tech debt

✅ Seamless deploys

✅ Independent teams

🦭👍🏼

16 of 16

Thank you!

https://github.com/ritamcastro

https://www.linkedin.com/in/ritamcastro

ritamcastro@gmail.com

rita.castro@vwds.pt