DEV Community 👩‍💻👨‍💻

Ramesh Vishnoi
Ramesh Vishnoi

Posted on

Micro-frontend Pratical guide - Part 1

What is Micro-frontend?

It is an advanced FE concept used when the codebase is very big and large number of developers actively working on it.

Micro-frontend architecture become famous after the success of microservices architecture where the backend is divided into different services each having its API layer, and database.

Micro-frontend architecture allows us to build a single application from multiple separate builds (commonly known as modules). These modules can be technology agnostic, team can work and deploy independently.

For example - A Ecommerce company can have multiple teams working on a single web application

  1. Home screen team - specializes on loading home screen content lighting fast
  2. Cart team - focus on cart journey and so on.

Do you need to have Microfrontend architecture in your side projects?

Yes and No.
If you want to learn then yes, there is no other way you can get practical knowledge.
Will it have any performance or other impact? - No.
Setting it up as architecture is time-consuming and an extra burden of maintaining different repositories.

Pros and Cons

Pros

  • Scalability - Useful for complex codebase with large numbers of developers. Easier to scale project by incremently growing team working on individual module
  • Allow usage of multiple framework - Each team can choose its framework based on team expertise.
  • Faster development and deployment - Each team can work on its module independent of other team. Once a module is updated or deployed, it will be available in the main app without the need for redeployment of main app.
  • Maintainability - Easy to maintain module as compared to complete app.

Cons

  • Complexity - Setting up micro-frontend architecture is complex and time-consuming.
  • Team Dependency - If a module is down then corresponding feature will be down affecting the complete app.
  • Team Communication - Communication gap can lead to duplicate methods, functionality across different modules

Implementation Guide is available here

Top comments (0)

This post blew up on DEV in 2020:

js visualized

🚀⚙️ JavaScript Visualized: the JavaScript Engine

As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! 🥳

Happy coding!