As web applications arebecoming more and more mature every day, we find a wide range of webapplications; from simple to highly complex ones. Those web applications can besimple two to three page websites or a combination of several components, whichmay be even developed by more than one team. Managing this kind of complexityin a monolith application is not easy.

A simple web applicationwith one to two pages could be easily developed by an individual or a smallteam, so there is no need to think about complex architectures. But the problemarises when the application becomes more complex and frontend components aretoo large to be developed by one team. Micro-frontend architecture becomeshelpful in such situations.

Microservicearchitecture is where several lightweight and loosely coupled services arecombined to deliver a larger service or application. Similarly, the basic ideaof the Micro-frontend is breaking large frontend applications into moremanageable loosely coupled pieces in a manner that each piece can beindependently developed by a separate team. Those pieces should be defined witha clear mission and well-formed boundary so the teams could work with their owncodebases and release independent versions.

This diagram shows howthe individual micro-applications are combined to generate a completeapplication. These micro-applications are loosely coupled and can be developedusing different frameworks like Angular, React, Vue etc. Main application canbe a combination of several frameworks. Each Micro-frontend application cantalk to each other using a common communication event bus where differentmicro-apps can emit events or subscribe to the events emitted by othermicro-apps. Further, each micro-application can talk to the backend individuallyand receive and send data independently.

Best practices inMicro-frontends

·        Each teamshould be able to work on their own business domain without depending on otherteams and further to choose or update the technology stack independently.

·        Even twoteams are using the same framework, the runtime should not be shared withinteams. Individual teams should have their own codebase.

·        To avoidconflicts between applications, teams can use a prefix with common agreementwhen declaring CSS classes, variables, using local storage or cookies.

·        Use browserevents for communication as much as possible.

Advantages of Micro-frontends

·        Complexapplications become a combination of small manageable applications which can beeasily developed by several teams.

·        Since theoverall complexity is divided into pieces, it is easy to understand and developthe product as separate micro-applications.

·        Eachapplication can be easily deployed independently by CI/CD pipelines and we donot need to worry about the whole application when adding a new feature to asingle system. Each application can be tested independently so no need to testthe whole product.

·        Eachapplication can use an independent technology stack to serve the correspondingbusiness requirement better. Further different versions of the same stack couldbe used depending on the requirement.

·        Modificationto an existing component/app is possible without touching other components.Even a component can be rewritten without touching other parts. Further, if ateam needs to use the latest technology for a new feature without convertingthe whole application, that is also possible with Micro-frontends.

Bases of dividing apps orcomponents in Micro-frontends

1.       Divide bysections

This is one of thesimplest ways of dividing a web application. A web page can be divided intoseparate sections and these sections can be developed as separatemicro-applications. As an example let’s say a page containing a header,products section, search section, suggested product section, and a footer,those components can be developed as separate apps and combined in productionto deliver the whole application.

2. Divide by Features

Another common way ofdividing Micro-frontends, is by application features. As an example, a completeapplication can have some features like login, dashboard, profile page,reporting area, etc. These features can be separated from each other and builtindividually as independent Micro-frontend apps to make a complete application.

3. Divide by domain

Another popular way ofdividing Micro-frontends is based on the domain. For example, applications canbe divided by profile domain, branding domain, core domain, etc. Thosecomponents will be integrated to finalise the complete application.

4. Divide by pages

Where an applicationconsists of different pages which have different functionalities, thatapplication can be divided into micro-applications by individual pages. As anexample, a home page can be developed by one team and a reporting page can bedeveloped by another team as separate applications.

Different ways to implementMicro-frontends

Mirco-frontends can beimplemented in several ways,

2.     UsingIframes

3.     Using Webcomponents

4.     UsingLibraries

5.     UsingCustomised orchestrators

6.     UsingMicro-frontend frameworks

Framework-basedMicro-frontend development is one of the most common ways of developingMicro-frontends as there are plenty of frameworks available for the moment.

Some of them are

7.     Bit

8.     Single SPA

9.     SystemJs

10.  Open Components

11.    Qiankun

12.  Luigi

13.  FrintJS

14.  PuzzleJS

In the next part of thisarticle, we will be discussing how to set up a Micro-frontend application usinga framework called Single SPA.

‍