The idea of micro front-ends is to break down the frontend monolith into smaller, manageable parts. Every team can own its features end-to-end, work in their codebase, independently release versions, continuously deliver small incremental upgrades, and also integrate with other teams through APIs so that they can compose and manage pages and apps together. There are lots of approaches to micro front-ends, from smart build-time integrations of components to run-time integrations using custom routers. Here we have curated some of the best tools to build micro frontends. Before digging into the micro front end frameworks, let us see, what is micro front-end?
Micro front-end means approaching front-end development process of web apps with concept of microservices. Till now, the prevalent practice was to use microservices architecture as a foundation on which feature-rich apps can be built. So, the applications developed were called as frontend monolith. Disadvantage of this approach was that the architecture became a part of the app over time. It is developed separately, so maintenance is a challenge.
Micro front-end solves this issue. It’s approach is based in the concept that a web application is a compilation of independent features which can be developed by various teams and them combined to create a homogenous interface. Micro front-end architecture provides a cross-functional approach where various teams with different specializations develop end-to-end features from database to user interface. The subsequent app is less massive and more friendly.
The app is split according to the business domains across the stack. So developers can avail the same velocity and flexibility as backend teams have while working with Microservices architecture. Let us see top 7 micro frontend frameworks.
It is a Javascript architecture which allows you to develop multiple separate builds without any codependency. Together they form a single application like, piece of jigsaw.
This tool benefits the runtime approach and allows Javascript to dynamically import code from other apps. This prompts the creation of Javascript entry file which is available for download to other apps though webpack configuration. Module federation is most effective tools for countering the code dependency problem and so enables bundle size expansion through dependency sharing.
Bit CLI is a popular tool for component-driven development. With Bit, you can build, integrate and compose independent components together. It lets developers efficiently compose frontends in build-time to enjoy best of safety and robustness of “traditional monoliths” and the simplicity and scalability of micro frontends.
By using Bit, different teams can build, publish and expose their components independently, while working together with different teams to turn the web development process into modular composition of features and components. Also, to OSS tools for components-driven development, Bit provides a cloud platforms for teams to build changes and collaborate on components together so that development can be managed efficiently and scaled while keeping all teams completely independent to deliver autonomously.
Bit also provides a unique CI/CD process to ensure each frontend gets its own independent and fast process, means different teams can integrate changes safely without having to wait, or break anything. Programmers can continuously and safely propagate changes to components across all impacted apps. Subsequently, workflow is improved with simple decoupled codebases, autonomous teams, small well defined APIs, independent release pipelines and constant incremental upgrades.
It defined itself as a “Javascript framework for frontend microservices”. In sort, it applies a lifecycle to each application. Every app can respond to url routing events and should know how to bootstrap, mount and unmount itself from the DOM. Difference between traditional SPA and single-spa apps is- they should be able to coexist with different applications, and they don’t each have their own HTML page. Hence if you’re looking to put together various frontends or frameworks into one DOM and aim to integrate at runtime, must give Single SPA some serious consideration.
Popular applications like- Gmail, Google Maps, grammarly are deploying the single SPA framework. While using Single SPA, the template and sub-application should know the location in the target namespaces of frameworks lifecycle function. This is called as contract between a container and sub-application.
Webpack can be used to uphold the target location. For this, two new entries have to be added to the module.exports.output in each sub-application’s Webpack configuration. Now, you are ready to configure the main app. You render it and afterward add DOM placeholders for each sub-application. After this, the Single SPA library is included to the package.json file. This prepares the sub-application to be registered in the Single SPA library. After this, the runScript sources the external JS script file, which is run by adding new script to the document.
Qiankun is a tool for Micro Front-end implementation based on Single SPA but one that has been made production-ready. It tries to address main challenges that developers face when making an application by using smaller independent applications. Addressing the issues of component integration and publishing static resources, it guarantees that these sub-applications remain independent during the whole process, development to deployment. This isolation proves importance in issue handling of public dependencies and performance.
This is a tool for ‘server-side composition of Micro Frontends’ and helps teams to develop and serve various components of web app in isolation, treating every part as a complete app on its own. Those isolated parts called as Podlets and can be developed with node.js Podium library or any tech stack of developer’s choice. This framework works on the process of developing different parts of whole application in isolation, giving greater flexibility to your development teams.
It is a set of services, libraries together with a specification which defines how its components interact with each other, to support a microservice style architecture for large scale websites. Mosaic make use of Fragments which are served by separate services and are composed together at runtime as per template definitions. This is composed with a bunch of packages which includes handling routing, layout, template storage and showing UIs.
This is a micro frontend JavaScript framework lets you to create an administrative UI driven by local and distributive views. It allows a web app to communicate with micro frontends which the app contains. To ensure smooth communication, one can configure settings like navigation, routing, authorization and UX elements. It consists of Luigi Core app and Luigi client libraries. They set up secure communication between the core application and the micro frontend using postMessage API.