If you missed part one of this series, please visit MicroFrontend Applications: Mobile Applications (Part One). While in that blog we focused on the mobile application, this blog will focus on the microfronend in website applications.
Microfrontend in Web Applications
Microfrontend in web applications lean towards run-time architectures and can be developed using a range of web technologies such as HTML, CSS, and JavaScript.
Web development is trending towards responsive single-page applications (SPAs) and feature-rich interfaces, employing frameworks like Angular, ReactJS, and Vue. As they get bigger and more complicated, they require an architecture.
Using the microservice frontend architecture, the large application is broken down into multiple SPAs, and then each of these can either be iframe-nested in a Shell and plugged through the postMessage API for inter-microfrontend communication or hosted and routed from different subdomains.
This architectural approach allows for a more granular and independent development and deployment of different features.
Dynamic Loading and Composition
- Strategy: Web applications using Microfrontend leverage dynamic loading and composition. Large and complex parts of the user interface are developed as independent microfrontend, which are then dynamically loaded and composed at runtime in a Shell.
- Implementation: The composition may happen on the server side or in the user's browser. The shell application or main entry point loads microfrontend on demand based on user interactions or specific routes. Module Federation, a webpack feature can facilitate this workflow.
Independent Development and Deployment
- Strategy: Microfrontend architecture allows you to create a distributed architecture where individual features or components of your application are developed and deployed independently.
- Implementation: Each microfrontend is built as a separate bundle, and with Module Federation these bundles can be loaded dynamically at runtime by other parts of the application. Different teams can work on various parts of an application independently and deploy them separately, making it easier to scale, release independent updates, and maintain a faster development pace.
Technology Diversity
- Strategy: Web applications using microfrontend can take advantage of technology diversity, allowing different teams to choose the most suitable technology stack for their specific microfrontend.
- Implementation: Each microfrontend can be developed using different frameworks or libraries based on the team's expertise and the requirements of the specific feature, such as React, Vue, Angular etc., or simply vanilla JS backed by structure-based architectural frameworks like PureMVC or Backbone to stay close to metal besides having a longer shelf-life for the application.
Isolation and Fault Tolerance
- Strategy: Microfrontend provides isolation, which helps in containing faults and failures. If an issue arises in one microfrontend, it is less likely to impact the entire web application.
- Implementation: Error boundaries and isolation mechanisms ensure that problems within one microfrontend do not propagate to others, maintaining a more fault-tolerant system.
In conclusion, microfrontend architecture represents a groundbreaking paradigm shift in frontend development. By embracing modularity, autonomy, and team-centric development, it addresses the challenges of building and maintaining large-scale applications.
This two-part blog post serves as a valuable resource for developers and architects seeking insights into the world of microfrontend architecture, from its foundational principles to its nuanced application in mobile and web contexts.
