Micro Frontend – Web Components Solution
It wouldn’t be wrong to call micro frontends the new way of building web apps. With the help of micro frontends, it’s now possible to build apps with 90% front code. Micro frontends are the latest patterns where UI (front ends) are brought into the picture from semi-independent fragments. These fragments are built using single or multiple technologies by different teams.
Devs cannot deny that micro frontends are becoming more popular. The key reason is software usage and the dynamic nature of web applications. With the help of different frontend frameworks, it’s now possible to facilitate technological changes and keep up with them.
Problem Statement of the Customer
Micro frontend is all about building sophisticated web applications to meet customer needs. However, sometimes it’s difficult to cope up with the demand of the users. Here are a few problem statements usually faced while developing micro frontend services:
- Writing software is easy, writing good software which stands the test of time is really difficult.
- Many organizations follow the agile methodology which is successful in rapidly building and delivering features, but that comes at a cost of compromise in architecture.
- As the project progresses, complexity increases and along with that the number of issues as well.
- A lot of these issues arise due to poor architecture and debugging them becomes harder due to the unwanted coupling between application modules and lack of clear separation of user interface with business logic.
Solutions Provided by iauro
After studying the problems in-depth, we work on several plans to produce innovative solutions that solves the majority of the problems faced by the users. Here are a few remedial measures taken by us:
- Writing good software is a very broad topic, the proposed solution aims at three important aspects of it, viz.
○ Reusability
○ Separation of UI elements from business logic
○ Unidirectional data flow
A few questions might come inton your mind after going through the solutions. Possibly, here are the answers to them:
How does this promote the separation of UI elements from business logic?
A: The component library acts as a common repository for UI elements used throughout the application. The UI elements in the library simply accept properties as input and output events on action. The client application passes inputs to the UI element and responds to the events. Any business logic is handled in the client application.
Why do we need to separate UI elements from business logic?
A: Enables developers to do parallel development, promotes modularity, testing of business logic becomes easier and more reliable.
How does this promote Reusability?
A: Say we have a simple application with a navbar, a sidebar and a content page. On all the pages, you can see the user avatar. Clicking on the avatar in the navbar opens the user settings menu, clicking on the avatar on the sidebar loads user’s profile while clicking on the avatar in the edit profile page opens a file selector to update the user’s avatar
Even though all have different business logic, the same UI element can be reused in all three places.
What is Unidirectional data flow?
A: unidirectional data flow means that when designing an app you often nest child components within higher-order parent components. The parent component(s) will have a container for the state of your app (typically an immutable variable called state). The parent component typically passes down a snapshot of its state to its child components via read-only props and then the child components can communicate with the parent to update the state via callbacks which are bound to a button or form in the child component.
How this promotes Unidirectional data flow?
A: The component library is created by following the atomic design pattern. [REF] A hierarchy is created by using atoms, molecules and organisms where data traverses down the hierarchy from application page > organism > molecule > atom.
The component to be created is documented with necessary stories.
Atom: User avatar
Name: iauro-user-avatar
Inputs:
name: string (Saul Yaleman)
color: string (#FF6464 | rgb(255, 100, 100) | rgba(255, 100, 100, 0.7) | hsv(0, 61, 100))
image: https://cdn.iauro.com/static/user/1620618470455
size: number (36)
Molecule: Multiline text user
Name: iauro-multiline-text-user
nputs:
user: object ({
“name”: “Saul Yaleman”,
“color”: “#FF6464”,
“image”: “https://cdn.iauro.com/static/user/1620618470455”,
})
title: string (Alarm raised at Site 1)
label: string (10:45 AM)
appearance: string (fill | outline | none)
Organism: Work log
Name: iauro-work-log
Inputs:
title: string (Work Log)
data: array([{
“name”: “Saul Yaleman”,
“color”: “#FF6464”,
“image”: “https://cdn.iauro.com/static/user/1620618470455”,
“title”: “Alarm raised at Site 1”
“label”: “10:45 AM”
}, {
“name”: “Abhinav Shukla”,
“color”: “#19A450”,
“image”: “https://cdn.iauro.com/static/user/1620637470455“,
“title”: “Ahinav Shukla resolved the alarm – 1014623”
“label”: “9:20 AM”
}])
The component is created and added to the storybook UI.
The component is integrated into the application.
Benefits of the Micro Frontends
Micro-frontends aim to decrease the size of monoliths within an organization for greater flexibility in updates. Using micro frontends, iauro has developed user-centric business workflows more effectively and swiftly. Micro frontends are easier to implement during changing business processes. Alongside these benefits, here are other key points about micro frontends uses:
Improves the application development process
Promotes code reusability
Makes testing and debugging easier
Makes code less error-prone
Have you adopted micro frontends? Why not?
If you still doubt why to adopt micro frontends, then consider this question – Is a large monolithic application easier to handle or a fragmented micro frontend with more versatility and ease of access? By using micro frontend architecture, various enterprises have modified their functionality. Instead of being dependent on a single platform, putting considerable effort into reusing various contexts helps gain more profits over the long term. If you are looking to scale up your teams, adopting micro frontends is a must. Make each team independent of others and motivate them toward writing high-quality code.
