The Evolution of Application Development: Embracing Micro-Frontends
The way we build applications has undergone a significant transformation in recent years. With the constant emergence of new frameworks, having a flexible tech stack is crucial. This flexibility allows teams to work together seamlessly, building parts of an app in React and others in Vue, for instance. One approach to achieving this flexibility is through micro-frontends, which enable us to develop and deploy web apps independently while still functioning as a single application.
Micro-Frontends: A Game-Changer in Application Development
In production, there are various ways to implement micro-frontends. In this tutorial, we’ll explore a few methods and then delve into Fronts.js, a progressive micro-frontend framework for building web applications.
Alternatives to Fronts.js
Before we dive into Fronts.js, let’s review two common approaches to building micro-frontends:
- Single-spa Router: Uses a single-spa root config file, which holds information like shared dependencies, as well as individual SPAs packaged into modules that communicate with each other and single-spa via APIs.
- Webpack Module Federation: Solves the problem of code sharing by allowing applications to load code from each other. However, it lacks customization options and can be verbose.
Getting Started with Fronts.js
Fronts.js offers a more complete and fully-targeted implementation, providing several unique benefits, including support for nested micro-frontends. This means a parent page can hold multiple child pages, each potentially built using a different repository. Additionally, Fronts.js offers cross-framework support, allowing developers to build a single page using several different technologies.
Key Features of Fronts.js
Fronts.js includes several key features that make it an attractive option for building micro-frontends:
- Code Splitting and Lazy Loading: Allows different apps built using Fronts.js to import different Fronts.js apps as modules.
- Lifecycle Methods: Enables hooking into lifecycle methods provided by Fronts.js apps to perform required operations.
- Generic API: The Fronts.js API is framework-agnostic, making it applicable to a wide variety of use cases.
The Progressive Nature of Fronts.js
Fronts.js is progressive, meaning it supports both Module Federation and non-Module Federation. An application can start off in normal mode without Module Federation and progressively shift into Module Federation. Additionally, Fronts.js offers a version control mode that allows version management of component applications.
In-Depth Look at the Fronts.js API
The Fronts.js API is straightforward, but it’s worth taking a closer look at its code. Fronts.js includes three different loaders, selecting the correct one based on the requirement. We can use the useWebComponents() API to isolate CSS from other applications, the useApp() loader for applications that don’t require CSS isolation, and the useIframe() loader to isolate both CSS and JavaScript.
Example Micro-Frontend with Fronts.js
To demonstrate Fronts.js in action, let’s create an example micro-frontend. We’ll work on top of the official fronts-example repo, which includes a container ecommerce site as the parent and a products page as the child.
Fronts.js Folder Structure
The example repo contains two full-fledged Fronts.js projects inside the packages directory. Each project has its own folder structure, which looks roughly like this:
- bootstrap.tsx: Used to bootstrap our Fronts.js application when it’s loaded in the browser.
- site.json: Specifies configuration details for the app, including dependencies and entry points.
Routing between Micro-Frontends
To enable routing between micro-frontends, we can use the useApp() functionality to generate a component from a separate micro-frontend. This allows us to seamlessly render different apps within our main application.
Communication between Micro-Frontends
Fronts.js enables communication between micro-frontends using its globalTransport functionality. This allows us to set up global listeners for events and emit events in other micro-frontends, facilitating seamless communication between components.
Differences from Webpack
Fronts.js is built on top of webpack’s Module Federation, but it simplifies the process of building micro-frontends. Key advantages of Fronts.js over webpack include reduced configurations, no need to deal with plugin modifications, and simplified multi-app routing.
Conclusion
Micro-frontends are revolutionizing the way we build applications, allowing developers to work on separate parts of frontend applications independently and deploy them independently. Fronts.js shines by providing a flexible and minimal configuration framework that simplifies the process of building micro-frontends. Its progressive nature, cross-framework support, and generic API make it an attractive option for developers looking to build scalable and maintainable applications.