Micro Frontend – Web Components Solution

April 28, 2022

Yogesh Dhande

Chief Delivery Officer at iauro systems Pvt Ltd LinkedIn

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.

Image Source: Dev Academy

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
  • The architecture is composed of two units: client application and component library.

A few questions might come into
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?

Image source: codecentric.de

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.

Understanding the Technology/Process Used

We presume understanding the technicalities and the overall development process is crucial for our customers. The proof of concept for the micro frontend architecture was created using Angular 11 + Storybook 6. Here is the detailed explanation of the flexible and versatile development process of micro frontends at iauro:

STEP 1

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

Inputs:

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<object> ([{

“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”

}])

STEP 2

The component is created and added to the storybook UI.

STEP 3

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.

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Subscribe for updates