The Art of Micro Frontends
A modular architecture design for web applications
I recently heard the term Micro Frontends and wanted to investigate the real story behind this. The very first idea came to my mind was that, this should be a similar thing to the Micro Services with loosely coupled front-end components. However with that I got the curiosity of how to deliver this concept for real world industrial applications along with legacy systems. I did some digging into the matter and found some interesting concepts behind scene and I will summarize those finding through this article.
Options for developing frontend applications
- JAMstack architecture (JavaScript, APIs and Markup)
This is a popular web development philosophy that aims to speed up both the web development process and webpage download times.It delivers the speed and simplicity of pre-rendered static sites with dynamic capabilities via JavaScript, APIs and serverless functions. These pre-rendered sites are deployed directly to CDN without requiring to manage, scale, or patch any web servers. The main benefits are
- Simple and less expensive (since it is hosting static files)
- Fast
- Security
2. Client-side rendering applications (CSR)
One of the most common and highly used architecture now a days. Client (browser) receives HTML and JavaScript files, that manipulate the HTML document and the DOM. This results in interactive applications where user interactions result in animations or GUI changes, without a need of page refresh. To facilitate this, browser exposes an API, called Document Object Model (DOM), that allows scripting languages to access and manipulate HTML documents. This manipulation is most commonly done using JavaScript. Single Page Application(SPA) is one of the implementation of CSR. SPA is a web application which is delivered to the browser in a single HTML file and it uses CSR to change the content.
2.1 Single-page Applications
In Single-page Applications (SPA), only one HTML file is loaded to the browser, the page does not need to refresh when the user interacts with the page. This gives the user a smoother user experience. To be able to change the content of the page and to provide additional information for the user, the DOM has to be dynamically updated by using JavaScript and HTTP requests to get information from the server. Example frameworks and libraries are
- Angular
- React
- Vue
3. Isomorphic applications (universal applications)
The main idea is write JavaScript applications designed for the web browser but at the same time, the application must run on the server for generating HTML markup files. So, the code between the server and the client is shared and can run in both context. web page is rendered twice by the same application. Because the web application share code between client and server, the server, for instance can do the rendering part for the page requested by the browser, retrieve the data to display from the database or from one or multiple APIs, compile the data together, and then pre-render it with the template system used for generating the view, in order to serve to the client a page that does not need additional network calls for requesting additional data to display. This could suffer from scalability problems if the web page is visited by millions of users.
4. Static HTML sites
An HTML site is still quite common, and may be the right solution for a small site or start-up business landing page. Static HTML site are not meant to be a long lasting or at least developer cannot create full application with it.
5. Micro Frontends
Micro-Frontends is a term that was coined by ThoughtWorks Technology Radar in 2016.The concept of micro frontends is an extension of the micro services used in backend. Companies such as Netflix, Zalando, and Capital One have pushed the pattern to the front, preparing the groundwork for micro-frontends.
Let’s discuss more on micro-frontends.
The Idea behind Micro-Frontends
In the modern days we build feature rich powerful web applications based on various business requirements which are rapidly changed. When the application size and complexity is increased it tend to be more monolithic. Micro-Frontends overcome this problem by decomposing the front-end into different features owned by independent teams such that each team has a separate area of business that the team is proficient in.
This is a similar concept as micro services which performs in backend while micro-frontend plays the role in frontend side. By decoupling the responsibilities to separate set of components, those can be developed, tested and deployed independently thus allowing multiple features to be developed in parallel. The core concepts of micro-frontends can be summarized as
- Code isolation: The teams should build independent apps which are self-contained without relying on global variables or shared states. Runtimes should not be shared across teams. This is one of my favorite features cause I have seen that, when several teams are working on the same code base it will difficult to push and merge your changes since there will be more conflicts and updates each and every time. The waiting time will be long and we cannot immediately push the changes. If you are in a tight deadline then you’re doomed. :D
- Resilient site: The feature developed should also be useful in the cases where JavaScript fails. Universal rendering and progressive enhancement can be used to improve the performance.
- Technology agnostic: Every team must be able to choose and upgrade their technology stack without having to cooperate with other teams. Implementation details can be hidden by custom elements whilst delivering a neutral interface to others.
- Naming conventions: In cases where isolation is not possible, agreeing on naming conventions for CSS, events, namespace and cookies helps in avoiding collision and resolving ownership.
- Use native browser features: Browser events are preferred over custom APIs for communication.
Composition of Micro-Frontends
There are two technical point of views such as
- Vertical split: DDD (Domain Driven Design) will be used, there will be teams in charge for a business domain. This is the one I preferred cause each and every teams will get the chance to work on different areas on the product not only limiting to a certain view. For an example Netflix’s core domain of video streaming is splitted into 3 sub domains such as core subdomains, supporting subdomains and generic subdomains.
Horizontal split: Several small set of applications will be loaded into the same webpage which requires many teams to collaborate their efforts as every team will be focusing on a part of the view.
The composition of micro-frontends can have various approaches
- Server-side composition
In server-side composition, the backend server will compose the view by fetching all the micro-frontends and assemble the final webpage. This helps in achieving good first-page load speeds which are not possible with client-side composition. This technique is helpful when building micro-frontends that are based on progressive enhancement principles. A Content Delivery Network (CDN) can be used to serve cacheable pages. Ex : IKEA, Zolando and Amazon. Few ways of implementation are
- iframes
- ESI (Edge Side Includes)
- SSI (Server Side Includes)
- Client-side composition
Client-side rendering frameworks like React, AngularJS and Vue have become popular as they provide dynamic routing and a better user interface. Micro-frontends are wrapped as web components to load on the browser. Web components are a collection of various technologies including custom elements, HTML templates, Shadow DOM and HTML imports. Web components allow the creation of technology agnostic frontends which can be loaded by the browser. Shadow DOM reduces the risk of CSS collisions and also protects against global styles leaking in.
There are several frameworks that can be used such as
- Piral
- Ragu
- Single SPA
- Frint
- WebPack Module Federation
- Edge-side composition
View is assembled at the CDN level. ESI a XML based language can be used for this purpose.
Implement micro-frontends in practice
I’m not going to explain this section in detail but as an overview. Detailed picture with code examples can be found here. The main approaches are
- Server-side template composition
- Build-time integration
- Run-time integration via iframes
- Run-time integration via JavaScript
- Run-time integration via Web Components
There are three ways for micro-frontend projects. Mono-repository, Multirepository, Multi-repository with git-repo tool.
Micro Frontends in Practice
- Zalando
- HelloFresh
- AllegroTech
- Spotify
- SAP
- OpenTable
- DAZN
Micro-Frontend Communication
One solution is using an event emitter. When an event is occurred that will be injected to the event bus. Event bus is a mechanism that allows decoupled components to communicate with each other via events via a bus. If some micro-frontends in the view are interested in the event they can listen and react.
Another solution is custom events. The custom event are dispatched via an object available to all the micro-front-ends such as window object. The above image represents the communication between signing micro-frontend with catalog micro-frontend. Once the user is successfully authenticated token can be used to maintain the authorization between components. Web storages like session, local storage or cookies can be sued to store the token.
Another option could be to pass the data using query strings. This is not the most secure way to pass the sensitive data. However HTTPS protocol can be used to retrieve the information.
Benefits of micro-frontends
- Team independence
- Code organization
- Release Independence
- Reduced surface testing and faster builds
- Fault isolation
- Technology agnostic
Drawbacks of micro-frontends
- Orchestration — how to deal with loading applications when they are needed.
- Routing — how to manage routes in the application and decide which app to load.
- Isolation — how to bound to avoid collisions in the environment.
- Communication — how to provide applications the way they can communicate with each other.
- Consistency of UI/UX — how to manage common styles and make sure that UX is consistent.
Dependency management — how to avoid one library to be loaded more than once.
Conclusion
In its essence, the concept of micro-frontends architecture is the micro-services approach adopted to front-end development, and is a new alternative way for the development of modular front-end applications. Microfrontends are suitable for large applications with multiple functions. If it is considered that the project will have scalability problems, the micro-frontend architecture should be used.
Here I mainly summarized the details in architectural perspective and will come up with a separate article on implementation of micro-frontends.
So, study this architecture, and try to implement it to your products or applications. Stay safe and happy coding!
References
- Building Micro-Frontends
- https://semaphoreci.com/blog/microfrontends
- https://martinfowler.com/articles/micro-frontends.html
- https://www.toptal.com/front-end/micro-frontends-strengths-benefits
- https://uijrt.com/articles/v2/i8/UIJRTV2I80017.pdf
- Pavlenko, Andrei & Askarbekuly, Nursultan & Megha, Swati & Mazzara, Manuel. (2020). Micro-frontends: application of microservices to web front-ends.
- The Art of Micro Frontends : Build websites using compositional UIs that grows naturally as your application scales By Florian Rappl
