A Brief Introduction to Micro-Frontends

·

5 min read

A Brief Introduction to Micro-Frontends

“An architectural style where independently deliverable frontend applications are composed into a greater whole.”

What is Micro Frontend?

A micro-frontend is a development architecture wherein a product is broken down into smaller development units. Each part of the application can exist individually and be developed, tested, and deployed independently. Every micro-frontend app can be created using a different framework or technology.

Core Ideas behind Micro Frontends

  • Be Technology Agnostic: Each team should have the freedom to adopt the technology stack of its choice without having to coordinate with other teams.

  • Isolate Team Code: No runtime should be shared among different teams, even when they use the same framework. Self-contained, independent apps should be created without high reliance on global variables or shared states.

  • Establish Team Prefixes: Naming conventions should be agreed upon for scenarios where Namespace CSS, Events, Local Storage, and Cookies cannot be isolated to avoid collisions between apps.

  • Build a Resilient Site: A robust web design should be targeted through the use of methodologies such as 'Universal Rendering' and 'Progressive Enhancement' to improve perceived performance.

3 Approaches to dividing your application into Micro Frontends

  • By Page: Distinct, specialized micro-apps can be created for each page if appropriate routing is defined.

  • By Functionality: A single page with many features performing distinct actions can be broken down into smaller apps and transformed into standalone applications.

  • By Section: Divide the application into sections, where several sub-apps may also share some common components.

Benefits of Micro Frontends

  • Faster and isolated, development and deployment: As each micro-frontend can be developed and deployed independently, the development speed is significantly increased.

  • Technology agnostic: Its architecture allows individual teams to select their preferred technology stack, which improves and speeds up the development cycle.

  • High Maintainability: It is more feasible to understand the workflow of each functionality, facilitating its maintenance when needed.

  • Individual testing and fewer regression issues: With isolated teams on the front end, the development, testing, and deployment cycles become smoother and help build more resilient applications.

  • Single responsibility: Microfrontend allows each team to build components following the single responsibility principle.

  • Reliability: If one of the modules fails, the others will continue to function. This is very important for a large application because it has multiple independent functionalities.

  • Scalability: With the modular and decoupled micro frontend architecture, we can easily scale up an application to multiple teams, as newer introductions won't affect the rest of the application.

  • Vertical teams: Microfrontends also enable the creation of vertical teams, which means a full-stack team of developers can own a feature on both the backend and the front end at the same time.

  • Reusability: By using micro frontends, companies can take advantage of the commonality of functionality, saving time and effort when creating new applications, i.e. one micro-frontend component can be utilized by different teams.

  • Autonomous teams: Micro frontend allows fully independent teams, to have full ownership and responsibility for working on a given part of the product, thus improving focus and enabling engineers to build a specific feature with maximum efficiency.

  • Adoption of different technological stacks: Each of the micro frontends can be implemented using different technology stacks, as they are autonomous pieces of software.

  • Learning Curve: For new engineers joining the teams, it is easier to learn smaller apps than to understand a monolith with thousands of lines of code.

  • Open for Addition and Close for Modifications: Microfrontends enable scope for continuous refactoring because they allow for the simultaneous use of older frameworks while only refactoring or building newer parts of the application.

  • Incremental upgrades: With micro-frontends, your team can quickly upgrade and deliver new features. This approach enables teams to apply incremental upgrades to dependencies, user experience, load speed, architecture, and more.

  • Simple, decoupled codebases: Micro frontend approach breaks things down into different, smaller code bases, thus providing clutter-free codebases, with proper boundaries set between components.

  • Higher performance: With the micro frontend architecture, a specific module of the application is loaded on demand, thus reducing the initial loading time.

Drawbacks of Micro Frontends

  • Isolation: Each team has to make efforts to isolate the individual modules to avoid collisions of code or style.

  • Shared resources: To avoid duplication and keep the front end thin, components might have to share assets and libraries (wherever possible), which may create undesirable coupling.

  • Accessibility: Heavy reliance on JavaScript could be introduced to render the page, which may negatively affect accessibility.

  • Styling: When the UI is made up of components produced by various teams, maintaining a consistent look is more complicated.

  • Coordination: With so many moving parts, APIs need to be very well-defined and stable. Teams will have to coordinate on how different components in the micro-frontend communicate with each other and with the backend services.

  • Payload size: Independently-built JavaScript bundles can cause duplication of common dependencies, increasing the number of bytes we have to send over the network to our end users.

  • Environment differences: As each team works and focuses on its development, it can introduce many issues that are associated with developing in an environment that is quite different from production.

  • Operational and governance complexity: As a more distributed architecture, micro frontends will inevitably lead to having more data to manage, i.e. more repositories, more tools, more build/deploy pipelines, more servers, more domains, etc.

Conclusion

Micro frontends are undoubtedly a very useful architecture that solves some of the major problems associated with monolithic frontend apps. With a micro frontend, you can enjoy a speedy development process, improved efficiency, incremental upgrades, simple codebases, independent deployment, autonomous teams, and more.

Switching to a micro frontend architecture can give development teams more autonomy, thereby accelerating development. It also helps that the technology choices, codebases, teams, and release processes could all be operated and evolved independently of each other without excessive coordination.

Whether micro frontends are the right approach for you and your organization or not should only be decided after considering the automation requirements, operational and governance complexity, quality, uniformity, and other important factors of the application.

Did you find this article valuable?

Support Aanchal by becoming a sponsor. Any amount is appreciated!