First of all, what is Micro Frontend?

Micro Frontend is a micro service approach to front end web development. The concept of Micro Frontend is to think about a web application as a composition of features owned by different independent teams. Each team has a distinct area of business or mission it cares about and specialises in. A team is cross functional and develops its features end-to-end.

Micro front end architecture

We’ve established a good micro service architecture for our backends. It’s time to apply the same principles to our front ends. A lot of firms are moving towards micro frontend from classic monolith architecture like Google, Amazon, Salesforce, Zalando, ThoughtWorks etc.

Amazon’s architecture for micro frontend

There are various implementations for micro frontend approach. But, in this article, we’d be talking about micro frontend implementation using Web Components only.

What are Web Components?

In modern web development, everyone is using components to encapsulate UI functionalities. Web components are low-level browser API that helps us to extend the browser with new components, they provide us a standard interface for defining new components. Web components have a standard way of creating components that use HTML and DOM API that every other front end framework uses and a common way of receiving and sending data using props and events.

Web component simply tells the browser WHEN and WHERE to create a component, not HOW to create a component.

Web Components comprises of 3 concepts:

1. Custom Elements: Set of JavaScript APIs that allow you to create your own HTML elements and define the way they behave.
2. Shadow DOM: A private DOM that is scoped to your component only and capable of isolating CSS and JavaScript.
3. HTML templates. New HTML tags that allows us to create templates for your components.

In simpler terms, you can create your own HTML selector, like , etc. EVERYONE is using Web components, according to Google, 5% of page loads today, use Web components. What’s driving this adoption? As a developer, we have full freedom to use the stack to create our own components and still maintain interoperability. That’s the key difference between web components and proprietary component libraries. Once you have invested your time in creating a web component, they can be used widely in a more diverse range of applications because they work anywhere the web works. Custom Elements The Custom Elements specification lays the foundation for designing and using new types of DOM elements. Autonomous custom elements are new HTML tags, defined entirely by you. They have none of the semantics of existing HTML elements, so all the behaviour needs to be defined by you. You can define your own custom element by using: customElements.define('custom-element', customElementClass); Custom Elements follow a lifecycle to mount and unmount the component on the DOM. To learn more about custom elements and shadow DOM in depth, refer WebComponents. Till here, I hope you got a basic understanding of micro frontends and web components. Let’s dive into the implementation part, and build something cool using Web Components and Custom HTML Elements.

#angular #github #micro-frontends #web-components #react