The Final Big Thing in Frontend: Micro Frontends

by Öner Zafer

Öner Zafer

Software Engineer MSc, Senior Frontend Developer based in Berlin.​ A Hard Sci-Fi addict.

We've been developing monolithic apps!

✂️  Components...

by Öner Zafer @onrzfr

👽  npm packages...

😱  git submodules... 

Because...

we have

• mostly one app 
• mostly one repo (if not on purpose)
• definitely one deployment pipeline
• frequently one Frontend Team!

by Öner Zafer @onrzfr

While a startup growing, it has to overcome lots of problems.

Scaling business means scaling the codebase, developer teams and the problem is: it's not easy!

For backend developers the solution is micro services.

by Öner Zafer @onrzfr

by Öner Zafer @onrzfr

The solution for frontend is Micro Frontends. So...

by Öner Zafer @onrzfr

microfe

A super duper and simple representation of a micro frontend architecture

😎

by Öner Zafer @onrzfr

Of course, it's not that simple!

How to achieve?

CSR, SSR, APP to APP communication, Angular and React working together, to work with legacy code

by Öner Zafer @onrzfr

💡💡 Client Side 💡💡

by Öner Zafer @onrzfr

⚡️⚡️ Server Side ⚡️⚡️

by Öner Zafer @onrzfr

📎📎Stitching Layer📎📎

by Öner Zafer @onrzfr

⚙️⚙️Micro-App Server⚙️⚙️

by Öner Zafer @onrzfr

• Independent deployments
• Nearly non-conflicting commits
• Smaller teams
• Cross functional teams
• Less complex code bases
• Scalable frontend teams
• Freedom of choice on the tech stack

by Öner Zafer @onrzfr

by Öner Zafer @onrzfr

👀

More detail?

"Understanding Micro Frontends" on HACKERNOON

🤝

Contribute?

"microfe", "microfe-client", "mfhtml" on github

by Öner Zafer @onrzfr

Thanks!

by Öner Zafer @onrzfr