Micro-frontends (3/)
Tags: webpack, devjournal, programming
Published: 2022-02-12 21:51:43


-

> 
So micro-frontends are simply a collection of decentralised
portions of a frontend application that compound to the same website.

> 
As part of the architecture, we have a framework that communicates between host pages and the individual mfes.
It manages the loading and unloading of these mfes.

**While designing this framework, we ought to consider:**
**1**.What elements of the application need to be decentralised.
Here we analyse the parts that could more likely recycle and would not make sense to redo them each time we want to make use of them.

**2**.We make the units work together.
**3**.Routing -> we create a consistent and reliable way to make these artefacts interconnected and interdependent.
**4**.The elements should also have the capability of communicating with each other

**Microservices architecture**
-It refers to a pattern for organising computer systems into services that can scale with demand.
-Traditionally , scaling up demands meant we have to replicate multiple instances of the existing monolith so as to suffice the demands.

-A  [monolith application](https://www.google.com/search?q=what+is+a+monolith+in+software&sxsrf=APq-WBvaYxdWi2ZC0fE7Ah2g4M4uz5U0RQ%3A1644686699183&ei=a-0HYu7nCpXbkwX7lrDwCA&oq=what+is+a+monolith+in+so&gs_lcp=Cgdnd3Mtd2l6EAMYADIFCAAQgAQyBQgAEIAEMgYIABAWEB46BwgAEEcQsAM6BwgAELADEEM6CggAEOQCELADGAA6DAguEMgDELADEEMYAToPCC4Q1AIQyAMQsAMQQxgBOgQIABBDOgcIABCABBAKOggIABAWEAoQHkoECEEYAEoECEYYAVDVAlixEmCRHWgBcAF4AIABpQSIAacRkgEJMi0xLjQuMC4xmAEAoAEByAETwAEB2gEGCAAQARgJ2gEGCAEQARgI&sclient=gws-wiz) describes a single-tiered software application where the user interface and data access code are combined into a single program from a single platform. 

-A monolith centralises the codebase so that it is one place.
-Also, there are lesser calls involved when we get a user request, and hence thinning the chances of failure.

-However, problems start to occur when these monoliths get big. Centralised code leads to tight coupling that becomes difficult to break up.

-There is also a cap to the performance of a machine. To mean, a very big program would be impossible to run on these machines.
-As a solution, applications are broken down into services.

-A service oriented architecture is able to scale the parts of an application that are under load.
-Operating System Virtualization made service oriented architecture even more economical since one server could host multiple virtualized operating system instances.
-Each of these instances can run a service. Therefore, you can host you multi-split application 
on just one server.

**The catch.**
-Using this platform meant that engineers would have to manage more **layers of infrastructure** . 
These are:
-The virtual machine hosts.
-The hypervisor layer
-the hardware

-As if that’s not enough, it is prone to failures due to its complexity, and hence a harder debugging process

**solution
Elastic compute cloud**
-The Elastic Compute Cloud (EC2) by amazon solves this predicament to some
point. 
-Amazon rents out virtual machines to application owners. amazon focuses on the hardware
maintenance and hypervisor, whereas the application programmers focus on
the vm hosts - where their application code is running.

**Containers**.
-It is wasteful to have an entire virtual machine just to run a small piece of application code
containers allow a vm to be sliced up into isolated file system regions
-A size of the container ranges from the equivalent of an entire virtual machine down
to a single service, hence, microservice.

**The hierarchy**
-Micro-services run in containers, which run on a virtual machine, that runs on a hypervisor which runs on a server.

-The concept of micro-frontends is not altogether different from that of microservices.
They both work on the principle of separating elements in order to achieve independence.

**The Devil in details**
-There are hurdles that you must overcome for the micro-frontend to be deemed successful:

- Pulling data from a micro-service
- Routing the micro-frontends
- Web components
- Communication with micro-frontends