Micro Frontend- Build Time Composition and Run Time Composition

For those of who are familiar with micro frontends, and those who getting in to micro frontends, I’m pretty sure you’ve come across these terms Build time and Run time composition. Trust me, these topics are pretty important, if you are planning to implement micro frontend architecture in your project.

So we’ll start with the term “Composition”. The term composition in the development field means, combination (aggregation) of various components (parts) of code in to a single one.

Build Time Composition

Ecommerce application (build time)

As you can see in the flow diagram given above, We’ve depicted a Ecommerce application with 3 micro frontend units, Home, Cart, and Payment. All these components are composed or combined or compiled at a particular stage, which then results in to the entire web application. This is called Build time composition.

I’ll explain with an example now. Suppose the micro frontend application shown above has already been deployed into production. Now we want to introduce a new feature or functionality to a particular unit (micro frontend, lets say Cart). Now if we want the change that we made to be reflected into the entire application, all the units (micro frontends) has to be build again (similar to that of a monolithic application with typescript in it).

Advantages of Build Time Composition:

1. Performance Optimization
2. Consistent User Experience
3. Simplified Deployment Process
4. Predictable State

Disadvantages of Build Time Composition:

1. Reduced Flexibility
2. Increased Build Time
3. Scalability Challenges
4. Versioning and Dependency Management

Run Time Composition:

Ecommerce Application (run time composition)

Now let’s get into the term Run time composition. This one is a little different from the previous one. Here we can take the same example Home, Cart, and Payment. If we were to make some changes to the unit, lets take Cart as an example, suppose there was a bug in the Cart micro frontend, the number of the items in the cart is not correct. We went through the code, and figured out the root cause of the problem and fixed it. Now we need this to be pushed to the production. But this time unlike, Build time composition, instead of building all the other micro frontends, we’ll only need to build that particular micro frontend and then push it. That’s it, It will be reflected in all the micro frontend units that is depended on it as well.

Advantages of Run Time Composition:

1. Flexibility and Independence
2. Scalability and Modularity
3. Reduced Initial Build and Deployment Complexity
4. Resilience

Disadvantages of Run Time Composition:

1. Performance Overhead
2. Complexity in Dependency Management
3. Security Concerns
4. Increased Run time Complexity

Understanding build-time and run-time composition is crucial when delving into micro frontend architecture. These two methods offer distinct advantages and challenges, shaping how micro frontends are integrated, deployed, and managed.

• Build-Time Composition emphasizes performance optimization and consistency, providing a cohesive user experience at the cost of flexibility. It’s ideal for scenarios where stability and efficiency are paramount.
• Run-Time Composition offers unparalleled flexibility, enabling independent deployments and dynamic feature integration. However, it requires careful handling of performance, dependency management, and security considerations.

Mastering these composition strategies is essential for effectively leveraging micro frontend architecture, enabling scalable, modular, and efficient web applications.