Hi my name is Darshan Satya - I work as a web developer for - well - No surprises over there - for the web Team.  We have built pretty cool websites - Crave - Noovo - CTV are from our backyard.

Half a decade ago - In a different organization - I was holding a position of tech lead. 

We decided to convert our monolith application into Microservices. Ask why? Cause TBH - we did not have anything else do.



We used the most famed Netflix architecture with Hysterix - Zuul - Spring Boot and every other tech out there and converted our backend into micro services.



We took the then awesome framework Angular 2 and slapped it on to the Front end.

The project was huge hit - I actually got promoted too.

All this while - the backend technical community had become mature and was moving towards scaling up.  While the Frontend community was busy building new frameworks - Angular 2 -4 -5 -6 / React 14 - 15 - 16 / Vue. You name it.



Many came - a few stayed.

Whatever your choice was - the projects you created with these frameworks were still a big monolith.

In 2014 - Thoughtworks first pitched in a white paper on an idea of micro services for Frontend - That my friends is Microfrontends.



Thanks to them - The Dev community picked it up and over the course of time transformed Microfrontends to the superhero it has become now.

In short Breaking down your front end application - into tiny separate applications which work as one is what Microfrontends is all about.

Before We move to the how - lets tackle the why - Why would you do it?



• Do you remember JQuery - well that memory feels like a loooong time ago - 10 years ago - it was a rage - now its not be seen anywhere.

• Similarly Angular 1.x - Google rewrote the whole architecture and stopped supporting it just like that - leaving so many projects in limbo.

With Microfrontends you can constantly replace you codebases with newer frameworks as and when you deem fit without affecting the whole website.

• It results in small and maintainable codebases.



• Each team has independence to choose what is best for them.



• Lastly demographics - The eastern part of the world is gaga over Vue - The mid is head over heels in love with Angular - The west can’t see anything beyond React. So if you have a global team - it gives the flexibility to create the best quality sites in the framework they excel in.

The question now is - How do we split the frontend?

The best way is using DDD - Domain driven Design.

We choose each domain for our website and make it a micro frontend.  For example - consider we are building a video on demand website - like Crave.ca. 

• The subscribe page can be a domain which is managed by a team with their own tech stack.

• Login can be another domain.

• The player page can be another domain.  Just the thought of it makes it that much more exciting.

Well with the how out of the way - let’s see what technologies we have at our disposal to make this possible. 

• Using Web components and the magic of shadow Dom - this can be achieved. Angular has Angular elements which enables us to do this but with limited scope. Or you can do it with plain vanilla JS. 

• Single-SPA - its a micro front end framework - My favourite - it gives a beautiful architecture to make microfrontends really rise and shine. 

• The new kid on the block by Webpack5 is Module Federation - It is More of a configuration than a framework.  They say if you don’t see it - it doesn’t exist - so - Lets put all these words into action and see how it pans out. 

Demo using Single SPA

This is a cool starwards project we will be building using the Single SPA framework.It has 3 React Microfrontends working together as one.

The Navbar is a microfrontend which has 2 buttons Planets and Movies.

The button - Planets renders a body which is Microfrontend to fetch the Planets Details.

Similarly Movies Button - renders the body which is a Microfrontend to fetches the starwars movies.

To Create the Project - We first create 

1) Navbar microfrontend and put some code to it to render the buttons.

2)Then Create a Planets Microfrontend and put code into it to fetch the starwars planets.

3)Then Create a Movies Microfrontends and put code to fetch the starwars movies.

4)Finally Create a Root Project - in which we register each of the applications we have created.

A beautiful starwars website which fetches your favourite planets and movies - But in a Microfrontend set up - 3 Microfrontends in total - May the Force be with you - Microfrontend.