If you've already used microservices, you already know the huge benefit it provides to reduce architecture complexity of large monolithic backends. However, on the frontend side, many huge apps are still monolithic and hence are huge codebases with many dependencies.
Welcome everyone to a new story on Devspedia. Today we'll be talking about micro frontends, what are they, how you can use it, and what are the benefits of using such technique.
Micro frontends are basically about splitting larger frontend apps into smaller, manageable and independent pieces. In this way, each piece of your app (for example user's orders list) is reusable, independent and deployable on it's own.
Don't get confused with reusable Vue or React components, because a micro frontend technique treats each piece as a separate independent frontend app.
Let's take a YouTube! video page as an example. In this case we can see at least 3 micro frontends highlighted in the screenshot below:
The container application is the main application frontend which is responsible for loading child micro frontends and is also responsible for managing cross-cutting functionalities such as authentication, website navigation, user info, ...etc.
Other micro frontends such as:
Let's assume each of these micro frontends have a dedicated team working on it, each team should be able to independently develop, deploy and deliver/release without being dependent on or blocked by any other team.
Micro frontends allows exactly that. Each piece/micro frontend is an entirely separate frontend code base, and is not blocked by or depending on anything else inside of the application container.
Well, many reasons in fact, let's take a look
There are many ways, let's briefly highlight a few.
You can use server side template composition using any of your favorite types of server side language to basically create the application container, and then compose other micro frontends inside of it via a template language of choice, ex:
<html>
<head>
<title>Example</title>
</head>
<body>
<!--# include file="path/to/micro-frontend entry HTML file" -->
</body>
</html>
Other developers prefer using node modules for managing micro frontends. Take a look at this package.json example:
{
"name": "@google/youtube",
"version": "1.0.0",
"description": "Video sharing app",
"dependencies": {
"@google/video-player": "^1.2.3",
"@google/next-up-videos-list": "^4.5.6",
"@google/video-description": "^7.8.9"
}
}
This obviously seems more flexible than the previous example. In this implementation each micro frontend is a separate node module, which our container application can include at build time.
However, there's a downside for this approach, which is having to make a new container application release every time one of the micro frontends is updated, because we'll need to use the new version of this node module, build again, and finally release. This leads us to think of other solutions that are executed in run-time instead of build-time to allow greater release flexibility.
This is a very flexible approach. In this approach we'll include a JavaScript file in our container application, and then use the APIs provided by that file to actually inject the micro frontend inside the container application.
<script src="https://video-player.google.com/bundle.js"></script>
This file then allows us to render that micro frontend where we want, when we want via consistent APIs that we design.
Ex:
window.videoplayer.mount(document.getElementById('video-player'))
We can run this command in our router, or based on some event,.. etc.
This is another very flexible approach, but of course, browsers support are lacking a bit here. In this example instead of injecting via JavaScript, we actually create a custom DOM element and mount it somewhere.
Ex: (after adding the script file to the head as in previous example)
const appContainer = document.getElementById('app-container');
const videoPlayer = document.createElement('video-player');
appContainer.appendChild(videoPlayer);
LitA simple base class for creating fast, lightweight web components
Styling of each micro frontend should be independent and scoped to itself, so it won't leak to surrounding micro frontends or even the application container, there are techniques to ensure that on the run time like BEM or CSS-in-JS , or build time like SASS.BEM — Block Element ModifierBlock Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.Sass: Syntactically Awesome Style SheetsSyntatically Awesome Style Sheets
Finally, I do encourage you to start using micro frontends if you haven't alraedy, it's also currently being advised to adopt via ThoughtWorks.Micro frontends | Technology Radar | ThoughtWorksSyntatically Awesome Style SheetsMicro frontends | Technology Radar | ThoughtWorksThis Technology Radar quadrant explores the techniques being used to develop and deliver software
Thanks for reading devspedia, I love you, and I'll see you the next time :)