Research is done by Marielle
Speed is the heartbeat of the digital world, driving users’ expectations higher than ever before.
That’s where micro frontends come to the rescue—a modern, agile approach to frontend development that promises to revolutionize how we build web applications.
In this blog, we delve into micro frontends. We’ll explore why they’ve gained popularity, when to use them, and how to integrate them seamlessly into your projects!
Let’s dive in!
What are Micro Frontends?
Microservices are a popular architecture approach used to build distributed applications. They involve dividing the backend into separate services, ensuring seamless operation, and avoiding bottlenecks. And, micro frontends extend this concept to the frontend world, allowing for modular and scalable development.
Picture this: a web application seamlessly divided into modules—each with its own functions, implemented independently. This is the realm of the micro frontend architecture, empowering frontend teams with the same agility and speed that microservices offer to backend teams.
The goal? To free work teams from dependency, unlocking faster development and simplifying the complexity of digital products!
Monolithic Architecture vs. Micro Frontend Architecture
When placed side-by-side monolithic architecture and micro frontend architecture, it becomes clear that they are two fundamentally different approaches to building web applications.
Let’s dive deeper into the comparison between these two architectural styles:
Monolithic frontends
The image below shows the different architectures with monolithic frontends:
The Monolith has a single team that handles everything, from creating and maintaining the complete application to sharing databases, backend, and frontend.
The front and back divide the monolithic application in two, also dividing the work team to own its monolithic backend or frontend.
With Microservices, the backend architecture has evolved into a more scalable setup. This makes each microservice belong to different teams, making things more efficient and flexible.
Even if the user doesn’t notice the division of the backend, things can get tricky when trying to integrate the microservices into the monolithic frontend. That’s when the bottleneck of the application comes into play, causing some issues. It’s like having the disadvantages of a monolithic system, such as:
- Too large and complex for anyone to fully understand and make changes quickly and correctly.
- A change in the frontend code could affect the entire website.
- Any modification in the frontend code must be re-implemented, increasing the compilation time.
Micro frontends
The vertical organization divides the application into small independent functions, each one implemented simultaneously, from the backend to the frontend, by a work team.
The reason why this approach has gained popularity is because of the issues with the monolithic approach. You see, the frontend has been growing at a rapid pace, and with a monolithic architecture, it becomes harder to keep things in order.
Micro frontends offer the same scalability, flexibility, and adaptability as backend microservices architecture. Plus, they make the application less cumbersome and more user-friendly. And the best part? Each micro frontend can be developed with different frameworks.
The central ideas of a micro frontend are the following:
- Promote technology independence – Work teams have the freedom to choose their preferred technology stack, enabling them to optimize workflows and drive innovation without constraints.
- Separate application code for each team – No shared runtime or global variables exist among different work teams using the same framework, ensuring independent application states and eliminating shared states.
- Resilient web design – To ensure optimal usability, application functions must be designed with care. Employing methodologies such as “Universal Rendering” and “Progressive Enhancement” can significantly enhance performance.
In comparison, the micro frontend architecture clearly stands out as a more efficient and streamlined approach for contemporary web apps. This architecture helps bridge the disconnect between backend microservices and frontend development, embodying agile and scalable development practices.
10 Benefits of Micro Frontend Framework
Building a modern web application with micro frontends is not only technologically efficient but also organizationally beneficial. It offers several advantages that will help your team!
Here are ten benefits of implementing micro frontends:
1. Independent implementations
With micro frontend architectures, the functions of a monolithic application are separated into different sub-applications. Essentially, it breaks down a big task into smaller, more manageable parts. These sub-applications are implemented independently by different work teams instead of trying to implement all functions at once.
2. Higher Performance
In a monolithic application, the entire application must always be loaded, even if not all of its parts are used, making its initial load time high. With the micro frontend architecture, a specific module of the application is loaded on demand, thus reducing the initial loading time.
3. Faster implementation and deployment
Implementing web components independently really speeds up development. You don’t have to run the entire application just to make a correction or add something to a single function.
Compared to having one huge monolithic software, building micro frontends is much faster and easier than building giant monolithic software, which represents a big step in the release of new features. As a consequence, implementation time is significantly improved.
4. Reliability
Micro frontends work by ensuring that if one module fails, the others can still operate seamlessly. This is particularly critical for large applications that have multiple independent functions.
5. Scaling to multiple teams
Unlike a traditional monolithic frontend, micro frontends offer the flexibility for multiple teams to work independently on different pieces of software. Basically, you have independent teams who bring their own expertise and make decisions on architecture, coding style, and testing based on their specific tasks. It allows everyone to express themselves and contribute to the project in the best way possible.
6. Adoption of different technological stacks
Micro frontends can use different technology stacks, offering flexibility and customization. They are autonomous software pieces that enhance scalability by allowing independent development and deployment. This promotes efficient development and maintenance, enabling teams to work on specific functionalities without interference.
7. Web applications that are easy to maintain
Maintaining large monolithic applications can be time-consuming for developers. However, the micro frontend approach allows each team to take responsibility for maintaining their development functions. Working with smaller pieces of software makes it easier to understand and maintain each functionality when needed.
8. Continuous updates
Continuous updates are key here. Why? Micro frontends benefits your project timeline by breaking down a monolithic frontend into smaller components. This makes it a breeze to update each business process, resulting in a better customer experience with more frequent iterative updates.
9. Smaller, more manageable code
Micro frontends offer a streamlined and manageable codebase compared to monolithic frontends. This precision reduces the chances of errors and enables faster development with less effort. Particularly valuable for applications with complex workflows.
10. Reuse of functionality
Micro frontends offer significant benefits in developing multiple applications with shared workflow requirements. By leveraging micro frontends, companies can streamline functionality across applications, saving time and effort in development. For instance, a company can utilize the same payment processing function across various sites, eliminating the need to recreate it for each application.
When to Use Micro Frontends?
Micro frontends are ideal for large applications with multiple functions. If scalability issues are anticipated, the micro frontend architecture should be employed.
The recommended approach is to divide the application into isolated sets of functions and screens, similar to a cell phone with different applications and functions.
For instance, there is a dialer application for making calls, a contacts application for storing phone numbers, and a messaging application for sending texts.
While these applications interact with each other, each serves a specific purpose, which is why they are implemented as independent applications.
So, if you want to implement micro frontends, consider your application’s size and scope. If it is massive and has many functionalities, micro frontends are the way to go!
The Micro Frontend Development Process for a Simple Application
How exactly do you integrate the micro frontend architecture in a simple application? We’ve got you covered!
We have implemented a simple application that leverages the use of Webpack 5 Angular and shares authenticated state across the application. We made use of the micro frontend architecture that consists of a few child applications, which is the profile of the currently logged-in user and the basket. We have a shell/container which consumes all the child applications. Plus, keep all the packages in the same repository. Therefore, we’re using a monorepo here.
The shell/container app and each child app are deployed and served independently. The container app will make HTTP requests at runtime to fetch the JavaScript required to render each child app as and when it is needed.
Shell/Container
Child 1
Child 2
Shared Authorization
When moving to a micro-frontend architecture, with each of the frontends being its own application, there is no shared state that can be used to store authentication tokens once the user has logged into the first application.
This can be overcome by using the Open ID Connect protocol. Each time you need to log in to an application using OIDC, you are redirected to your OpenID site, where you log in and then return to your application with an access token and identity token.
Data Dependency
Webpack Module Federation plugin allows the sharing of common dependencies within micro apps:
- When you add libraries to the micro-frontend host, you need to also add them to the remotes that consume the dependencies.
The shared component libraries contain the code and application state we want to share across the site:
- Like, the basket functionality code resides in the shared library, so it is dependent on the products that are selected on the shell/container app.
Production Ready
Dynamic loading of micro frontend remotes
The host is loading the micro frontends upon initialization of the host, not on route change.
With the @angular-architects/module-federation library’s loadRemoteModule() method, we can dynamically load the micro-frontend remotes on route change with a few quick changes.
Deploy using Vercel
The idea behind micro frontends is to be able to deploy each application independently. We can do this in Vercel by creating a separate project for each application. Vercel limits the number of projects for a single repo to three in the free plan.
Update routes to support micro frontend paths to production
We need to update the route definition to include the URI for the deployed application.
We’ll use the environments configuration built to support both local and deployed environments and define a configuration for serving locally versus production build.
Add deployment URL to Okta
You’ll need to update the Okta application with the new deployment location so that you can sign in.
API
By now, you should be able to use the deployed site.
Conclusion
Micro frontends can bring a lot of benefits to large-scale web development projects that are based on microservices. It allows developers to split the entire solution into independent components. This results in a number of advantages, including faster feature roll-out, simplified testing of individual modules, adoption of different technological stacks, and smoother updates.
However, micro frontends also come with some drawbacks. Testing an application as a whole might be complicated. Also, micro frontend projects are quite costly since they require a big team of developers and managers.
Therefore, you must first consider all aspects before making a decision for your business.
Need Frontend Development Services?
Taking advantage of the right architectural approach can make a significant difference in the success of your web app. Whether you’re starting a new project or revamping your existing frontend, exploring the world of micro frontend architecture could be the game-changer you’ve been searching for.
At StarTechUP, we’re passionate about the boundaries of front-end development. We specialize in cutting-edge services, with a focus on micro frontends architecture.
Our experienced developers are here to help you unlock the full potential of micro frontends, delivering enhanced scalability, accelerated development cycles, and seamless collaboration across teams.
Get in touch with us today, and let’s discuss how different technologies can be tailored to meet your specific needs and goals!
