Micro-Frontends for BackEnds Pattern

Question:- How does the old traditional Monolithic App looks like ?

Question:- How was this improved by separation of Backends and Frontends ?

Question:- How did the backend evolved into micro-services ?

Question:- How did the Front-end evolve ?

Question:- What does Micro-Frontends represents ?

Question:- How does the concept of fully-grown teams looks like ?

Idea is that, single team owns both the components : (BackEnd + FrontEnd).

Question:- How does the real-life (BE+FE) combination looks like ?

Question:- What set of tools are usually used for developing Front-end applications ?

Answer → These are main tool-sets :-

• React → For developing front-end applications.
• Webpack → For Packaging.
• Babel → For compiling the Javascript code into final executables.

Question:- With each Micro-Frontend for every BackEnd, How is the code organised into the repositories ?

Question:- What are disadvantages of maintaining the code like this ?

Answer → Following are the main disadvantages of maintaining the multiple repositories for the code :-

• Code is duplicated multiple times in multiple repositories. Thus, if code-change is required to be done against some bug, then it has to be done at multiple places.
• The code is kept & maintained in two different repositories.
• We have to maintain the dependencies of React, Webpack, Babel, etc. in multiple places.
• Testing & deployment has to be done separately.

Overall, this is a tedious process to maintain these multiple repos.

Question:- What can be the alternative to maintain & manage these micro frontends ?

Answer → The answer is Mono-Repos. Here is what a Mono-Repo is :-

Question:- Who uses MonoRepos in Industry ?

Question:- What tools and frameworks can be leveraged for Mono Repos ?

Question:- How the code is organised with Mono-Repos ?

Answer → Structure of repository was changed into an modular design. Here are the crucial points :-

• There was only a single repo for different components like : dweb and mweb.
• All the components (different micro-frontends) could be housed into the same package named ui.
• Each folder-structure have their own deployment-pipeline.

Question:- What are some advantages & dis-advantages with Mono-Repos ?

Question:- What are some limitations with Mono-Repos ?

Question:- What are the conclusions with using Mono-Repos ?

That’s all in this blog. If you liked reading this, do clap on the same. We would meet you in next topic on another blog.

References :-

• https://micro-frontends.org/
• https://martinfowler.com/articles/micro-frontends.html
• https://bytes.swiggy.com/monorepos-lets-talk-about-it-4b1b7d4f1038
• https://blog.flipkart.tech/ratings-reviews-flipkart-part-1-797aa3687109