Breaking down the concepts of Microfrontend Architecture

July 30, 2021

Yogesh Dhande

Principal Consultant Micro-Frontend & Microservices LinkedIn

Problems faced by a customer 

  • Writing scalable software that would futureproof opportunities of growth for an organization.
  •  Writing software is easy, writing good software which stands the test of time is difficult.
  • Many organizations follow the agile methodology that successfully builds and delivers 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

Criticality of investing in a good software architecture

Writing good software is a very broad topic, the proposed highlighting solution aims at three important aspects of microfrontends

  • Reusability
  • Separation of UI elements from business logic
  • Unidirectional data flow

The architecture is composed of two units:

Reusability

1
How this promotes separation of UI elements from business logic

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 the action. The client application passes inputs to the UI element and responds to the events. Any business logic is handled in the client application.

 

2
Why do we need to separate UI elements from business logic

Enables developers to do parallel development, promotes modularity, testing of business logic becomes easier and more reliable

 

3
How this promotes Reusability

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 the user’s profile while clicking on the avatar in 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

Unidirectional data flow

What is Unidirectional data flow

A unidirectional data flow means that you often nest child components within higher-order parent components when designing an app. 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.

Separation of UI elements from business logic

How this promotes Unidirectional data flow

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 the application page,> organism > molecule > atom.

The process of developing above mention highlights

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/ Impacts

Improves the application development process.

Makes testing and debugging easier

Makes code less error-prone

Promotes code reusability

Makes code less error-prone

0 Comments

Submit a Comment

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

Subscribe for updates