Design Concepts and Front-End Mechanisms

Learn about the three main mechanisms for building micro front-ends: iframes, JavaScript techniques, and component registry.

So, what exactly is a micro front-end application? In theory, it involves breaking down our websites into smaller functional pieces, which are independently deployed and managed. Breaking up a website in this way means thinking about silos of functionality that are self-contained and are able to function as if completely independent of other areas of the site.

Designing an application using micro front-ends has its benefits, but it will also present us with a few unique challenges. It is best suited to websites where a number of different teams are working together to produce a single user experience. There may be a team that is solely focused on products and product management. This team would be responsible for building a front-end that shows what products are available on the site.

They may need to implement a search algorithm, for example, or need to show current specials that are available to a certain geographic region. The team that handles all things related to products should be able to build, test, and deploy functionality in their own rhythm and without affecting other areas of the site.

We may have another team that is solely responsible for handling payment for goods on the site. This team may take all things shopping cart, including integration with credit card payment providers and calculation of shipping costs and taxes.

An update of the site from this team may revolve around the integration of another payment provider, like PayPayPayPay Corporation is a Japanese company that develops electronic payment services., for example, and should not affect anything to do with the product team.

Get hands-on with 1400+ tech skills courses.