Microfrontends

The Smallest of Frontends 😂

Mirco Wat?

Mircrofrontends is the broad idea that your frontend is a service that can be independently deployed and interacted with via HTTP

  • Host - a consumer of a remote
  • Remote - a module to be consumed by a host
  • Bi-directional - a host can be a remote and/or a remote can be a host

Header

App

localhost:3001

localhost:3000

GET

Host

Remote

Implementations

Mircofrontends is the idea but they can be implemented quite differently

Implementations

Web Components

Web Components

Implementation

Header

App

localhost:3001

localhost:3000

GET

Host

Remote

index.html

<script src="localhost:3001/index.js"></script>

App.tsx

<ui-header></ui-header>

Web Components

  • Simplest solution, script tag with a web component
  • No bundler!
  • Supported across all major browsers and web frameworks

Pros

Cons

  • No native support for SSR
  • No sharing of library bundles across modules (duplicate downloads)
  • Ecosystem is not as formative as larger web frameworks

Webpack

Webpack

Implementation

Header

App

localhost:3001

localhost:3000

GET

Host

Remote

webpack.config.js

plugins: ModuleFederationPlugin({

    remotes: {

        header: 'header@localhost:3001/remoteEntry.js'

     }

})

plugins: ModuleFederationPlugin({

    exposes: {

       header: '../src/Header'

     }

})

webpack.config.js

App.tsx

const Header = React.lazy(() => import('header/Header'))

Webpack

  • Plugin built into Webpack core
  • Extensive API (shared dependencies across modules, version requirements of dependencies, etc.)
  • Early support for SSR

Pros

Cons

  • Bundler lock-in
  • No support for ESM at the moment (commonjs)
  • Webpack config...

single-spa

single-spa

Implementation

Header

App

localhost:3001

localhost:3000

GET

Host

Remote

importMaps.json (client, server)

index.html

<application name="header"></application>

single-spa

  • Simply solution, point to a bundle
  • Framework agnostic, multiple framework support (code to an interface)
  • SSR support

Pros

Cons

  • Template/render-engine lock-in
  • A lot of experimental loader usage that has security issues
  • Fragile ecosystem

Conclusion

  • Microfrontends represent the idea of creating frontends as a service
  • There are multiple implementations
  • The microfrontend ecosytem is still in its infancy and many quirks are being worked out
  • Microfrontends are a natural progression of microservices and will at some point function the way kubernetes does now

Recap

Microfrontends

By Adam Recvlohe

Microfrontends

  • 158