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.