DEV Community

Ramesh Vishnoi
Ramesh Vishnoi

Posted on

3 1

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

SurveyJS custom survey software

Build Your Own Forms without Manual Coding

SurveyJS UI libraries let you build a JSON-based form management system that integrates with any backend, giving you full control over your data with no user limits. Includes support for custom question types, skip logic, an integrated CSS editor, PDF export, real-time analytics, and more.

Learn more

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay