Skip to content

Instantly share code, notes, and snippets.

@davidgg
Created June 20, 2019 11:26
Show Gist options
  • Save davidgg/34e6def7d63f33b071c14af4a59d6b77 to your computer and use it in GitHub Desktop.
Save davidgg/34e6def7d63f33b071c14af4a59d6b77 to your computer and use it in GitHub Desktop.
Micro Frontends

Micro Frontends Architecture

What

Micro frontends are the technical representation of a business subdomain, they provide strong boundaries with clear contracts, also they avoid sharing logic with other subdomains (DDD) Luca Mezzalira

Domain and subdomains are concepts used mainly in backend projects, but they can be used in frontend as well.

Micro Frontends is an old topic, with lots of different approaches. Same paradigm as micro-services in the backend.

Often, when an application needs to scale we start using the same strategies:

  • More databases
  • More microservices
  • ...

The idea with micro frontends is to apply some of the same principles to the frontend code, more micro frontends. Additionally, micro frontends allow us to scale the teams, no the infrastructure.

You share nothing with other micro frontends.

How

Slice the domain of the application in subdomains. Assign teams for each one.

  • iframes
  • Open Components. Front + Back inside self-container units.
  • Server-side composition. (Mosaic9)
  • URL
  • Single SPA
  • Frint JS

PROS

  • Smaller, more cohesive and maintainable codebases.
  • Better collaboration. A large number of teams and developer can work on the same product.
  • It eases the use of different frameworks. -> Encourages different better solutions to different problems.
  • Strong boundaries.
  • More deploys.
  • Less friction between teams.
  • More independent teams.
  • Better management.
  • Innovation without impacting the entire application.
  • Better dependency management.
  • Easier to upgrade.
  • Easier to maintain legacy code.
  • More autonomous teams. They can all do the full work.
  • Faster developer onboard process.
  • Opportunity to test different technologies in the same product -> Developers more motivated.

CONS

  • More complex communication between frontend parts.
  • More parts, more builds to set up.
  • Duplication of dependencies.
  • Increases the number of bytes our users must download.
  • Repetition of code.

Coding time

Check Building Micro Frontends with React, Vue, and Single-spa for a great example.

Bigger example: Simple SPA examples

Conclusion

  • Good for big teams and/or projects.
  • Good for distributed teams.
  • Helps to migrate.
  • Helps to coexist applications.

Sources

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment