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
