Micro-Frontends for BackEnds Pattern

aditya goel
4 min readJan 7, 2023

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 :-

--

--

aditya goel

Software Engineer for Big Data distributed systems