Skip to content

Instantly share code, notes, and snippets.

@mnhlt
Created June 10, 2021 17:35
Show Gist options
  • Save mnhlt/9a1b62fa3d3e0b0f8c05694d24f07801 to your computer and use it in GitHub Desktop.
Save mnhlt/9a1b62fa3d3e0b0f8c05694d24f07801 to your computer and use it in GitHub Desktop.
Microfrontend
title date tags categories
Journey to Microfrontend: Pilot
2021-06-09 19:43:03 -0700
microfrontend
distributed frontend
reactjs
coding
journey
microfrontend

Micro-frontend

https://micro-frontends.org/

Need reason?

  • Want to try new tech? in small scope, yes!
  • A single UI layer is hard to scale
    • Single deployment becomes a bottleneck. your changes can be blocked by another team changes to be deployed.
    • Single point of failure.
    • Changes require many people to verify.
    • Reliable E2E tests are hard.
  • Shared tools? Webpack config outdated. Which team will do updating?
  • Independently deploy? rebuild all the app or just a fragment?

Frontend microservice aka Microfrontend in nutshell

Microfrontends are the technical representation of a bussiness subdomain, they provide strong boundaries with clear contracts, also they avoid sharing logic with other subdomains Luca Mezzalira, Chief Architect at DAZN

If we can't declare context-boundaries between domain, don't think about microfrontend.

Domain share absolutely nothing

Avoid to share components or code across different bounded contexts, abstraction could make our code more complex to maintain in the long run, the communication overhead could become a bottleneck for our organizations.

New challenges

The main challenges with scaling frontend applications are scaling the teams, reducing the communication overhead and innovate!

We split monolith to micro. So we have to do the integration.

  • Links between fragments.
  • Build-time. How much updates should be build?
  • Server-side

How to keep the best-practices?

  • Frontend:
    • User experience
      • lag?
      • reload all the time?
      • mismatching content/state
    • Developer experience
      • Are you willing to do the update a header for 5 times?
      • Bounded-context stop you doing update in one place. sometime you must update through many repo => monorepo can help here.
    • Small bundle sizes
  • Microservice stuffs:
    • Deploy independently
    • Hightly decentralized
    • Dev/Prod parity

How to setup local development?

TBC

How to do it?

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