In their first week with Commit, each new Engineering Partner takes on a hackathon onboarding project. They build a project, present it to the Commit community, and write a short summary of their experience. There are no restrictions, no limits, no jokes.
Mukundan is a technology geek who likes to leverage technology and solve complex business problems. He is focused on building systems from scratch and also specialized in digital transformation. He enjoys mentoring and coaching developers as he believes in sharing knowledge with the wider community. He is a big sports buff who likes to watch and play different sports particularly cricket and tennis. Apart from this he loves to spend time with his wife and twins.
Another buzzword and modern technology
Most of you are familiar with the buzzword micro-services and yeah the term ‘micro’ is also used for the frontend, so why is it so special? What is this web component and how will it help me build a micro-frontend?
Micro-frontend
The main objective of scalable micro-frontend is to break big monoliths into small manageable and independent apps. So let’s discuss the advantages:
- Easy maintenance
- Independent deployments
- Simplified testing
- Separation of concern/ responsibility
Web component
Web component consists of three main technologies:
- Custom component: HTML tag which encapsulates the behaviour and structure you want
- Shadow DOM: a separately rendered DOM tree from the main DOM so that it can be scripted and styled without the fear of collision with other parts of the document
- HTML template: markup template for the custom component proposed architecture
Currently web components are used to build a component library and the components are used in a suite of products. The advantage here is as you have built these components as web components it can be used with any frontend library, framework that you already have in production. So, if you have ten applications in production and you create a component library, in total you have 10 applications/code bases to maintain now with this approach.
My proposition is as follows – instead of creating a component library, we create a web component based out of functionality or modularity. We expose configurations through attributes and can create a scalable micro-frontend which could be plugged in on any app later.
Confused?
Let’s discuss a simple example. Both ‘chat’ and ‘tasks’ are common applications required for different products. Additionally, they are specific to the product which they are hosted or integrated with. This means if you have tasks in your sales dashboard they are different from what you have in your project dashboard and that information is served from the respective product APIs. So, if you can create a micro-frontend which can sit on the respective API and behave the same as you have built across the suite of products (one UX), you can build a new product just by adding different micro-frontends and plug it on the APIs which hold the state information.
So your frontend code should look like the image below, where you import the web components and then configure the API url and pass state through attributes if required.
Benefits of this approach
- Breaking of frontend modules based on business functionality, modularity.
- You can use existing frontend library frameworks to build your web component, in my code repository I have added sample code with ReactJS and VueJS.
- Rapid application development of new products just plug and play.
- No new module added for maintenance instead each teams responsibility is to make sure they handle business functionality according to the contract.
- Separation of scripts and styles with parent DOM, you can achieve this with iframes but it comes with security and compatibility overhead. The code repository has a sample custom component with iframe behaviour for experimentation.
- Independent deployments and simplified testing, all the advantages of micro-frontends.
Learnings
Web component is a new technology on the web and helps you have styling and scripting detached from the main DOM. I wanted to explore web components so I created some sample components using JavaScript.
Having worked on big web applications, I have seen dependency on iframes when we wanted to reuse existing code/UI or create a micro-frontend. But iframes are not reliable and come with security risks so with web component I wanted to explore if we can replace iframes with web component and also wanted to create web components using modern JS frameworks like ReactJS and VueJS and show the possibility of how these custom components can constitute a big web application. I have learnt how to create custom web components on ReactJS and VueJS applications.
Micro-frontend components:
Application with micro-frontends:
I think creating a custom component library is an anti-pattern, therefore, I wanted to showcase how you can leverage custom components on existing codebase and new codebase. In the process I have created an entire demo application with a sample dashboard which can be used as a seed application or reference in building big scalable web applications with micro-frontends being the custom web components.
Future Plans
- React-router works with web components but Vue-router doesn’t so I’m planning to fix it.
- ReactJS doesn’t bundle styles with the component but VueJS properly bundles them, so I want to fix it, using radium solves the issue partially but still legacy apps have stylesheets.
- Create the deployment of the entire app on kubernetes.
- Handle versioning of web-component and demo on k8s.
- Run performance tests on UI and benchmark page load.
If you’re interested to learn more, I am always happy to chat and collaborate.