TL;DR: This blog discusses the differences between build-time and runtime integration in micro frontends. Build-time offers speed and optimization, while runtime provides flexibility and scalability. Combining both approaches can enhance performance and development workflows.
Micro frontend architecture is a technique for splitting an app’s frontend into smaller, easier-to-manage modules. It works similarly to the microservices architectural design used in back-end development and helps improve scalability and efficiency in front-end development.
However, the effectiveness of this architecture depends on how you connect those components to create the main application. There are two main ways to do this:
Both have benefits and can be more successful on different types of projects. In this post, I’ll explain both methods so that you can decide which one best suits your application.
Micro frontends split monolithic frontends into several independent, smaller units that handle separate features. This boosts flexibility in front-end development since different teams can develop, test, and maintain separate features using different technologies. These micro frontends could be combined at build or runtime to make them run smoothly as one application for users.
Micro frontend runtime integration combines micro frontends into one application during the execution phase. It allows different frontend parts to be designed, deployed, and scaled independently by multiple teams with different technological stacks. Moreover, runtime integration makes it easy to release updates or add completely new features to your app without interrupting users.
The process of runtime integration can be divided into several parts.
An app shell, also known as a central application or component, is used as an orchestrator for the overall app. It is usually configured with JavaScript frameworks such as module federation or Single-SPA for bootstrapping and integrating micro frontends.
Micro frontends are loaded on demand instead of the entire application simultaneously. This approach often uses dynamic imports to load what’s needed at any given time, thereby improving the application’s responsiveness and efficiency.
Every micro frontend uses unique techniques, such as CSS Modules or Shadow DOM, to prevent its styles from interfering with others. The execution of JavaScript is also kept separate by techniques like sandboxing so that scripts in one micro frontend don’t affect those in the other.
Micro frontends talk through a message bus or custom events, allowing them to share information and interact without being directly connected. Actions and data are coordinated using a shared state management system like Redux to ensure consistency and responsiveness throughout the application.
The app shell’s integration layer handles navigation within the application. It feels seamless because this section dynamically loads the appropriate micro frontend based on user interactions and current URLs.
Build-time integration in micro frontends combines multiple components or applications into a single bundle during the build process. This speeds up application execution since everything is ready to go. However, runtime integration is more flexible than this method, since updating any part would require rebuilding and redeploying entire applications.
The process of build-time integration can be divided into several parts.
This involves merging all micro frontends into one bundle during the build process. It usually requires a compiler like Webpack or Rollup to aggregate and minify JavaScript, CSS, and other assets.
In this approach, interaction points and dependencies of the components are resolved during the build step. For example, you can use tools like Babel for transpiling and PostCSS for processing CSS. This often leads to a monolithic bundle containing all necessary code and resources.
Configuration and routing among components are predefined and hard-coded into the build using frameworks like React Router or Vue Router. These routes and other dependencies can often be mapped using configuration objects in XML or JSON files. However, it involves a lot of careful planning among teams to ensure that the entire application works together without issues.
Dependencies are managed centrally during the build process. This approach ensures that all micro frontends use the same versions of shared libraries and frameworks, minimizing runtime issues and conflicts.
Since all the components are combined at build time, the final application bundle often requires some optimization. For that, you can use:
Understanding the differences and similarities between runtime and build-time integration methods is essential in choosing the best development approach for your project.
Combining runtime and build-time approaches can offer benefits such as runtime flexibility and build-time performance improvements. Thus, this blend will lead to efficient development workflows, better performance, and better maintainability of code bases.
In conclusion, micro frontend architecture splits complex frontends into smaller, manageable pieces, enhancing scalability and development. Depending on your project’s requirements, choosing between build-time- or runtime-based integrations becomes easier, too: build-time is stable and fast, while runtime allows more flexibility and scalability.
If you have any questions, contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!