micro-frontends

example repo for micro frontends with react and dependency inversion as integration pattern

playground to learn how to integrate micro frontends, usages product and content search as example

Assume you have two ore more different search providers as e.g. product and content search. Both are developed in different teams which want to develop and release their features independently. But you have to integrate them in frontend like the following:

Why?

To scale with multiple teams in a micro services environment

• Keep coupling low
• One-way dependency graph
• Specialized assets know general assets, but not vice versa

Set up

yarn build

cd app/composer
yarn serve

cd app/search
yarn serve

cd app/product
yarn serve

cd app/content
yarn serve

Open http://localhost:8080 in web browser

Architecture

Components

Dependency graph without cycles

Sequence

Load HTML and JS

Execute search with one product search provider

... and add additional content search provider

... and if no results from any search provider, provide fallback with suggestions

Project structure

.
├── composer
│   └── server
├── content
│   ├── client
│   └── server
├── product
│   ├── client
│   └── server
├── search
│   ├── client
│   └── server
└── search-api
    ├── lib
    └── src
    

search-api

interface to register different search providers with

• ID
• order
• execute_search
• execute_count
• getSearchTab
• getResultComponent

search

• client

  • provides container stuff, like rendering search tabs or search results
  • calls search callback on active search provider
  • handles search errors, search fallback and merges suggestions from all search providers

• server

  • delivers client js, could be a CDN as well

product

• client

  • provides components to render search results and search tabs
  • could implement filter and use fetchData callback to re-execute search

• server

  • delivers client js, could be a CDN as well
  • could provide REST-API in real world use case

content

same as product

composer

• server
  • central unit that receives browser request and return html document
  • includes all scripts
  • may or may not fetch initial data and could be used for server side rendering

Slides

Uses demoit and Go

1. Install Go
2. Start with ./demoit slides/demo

or use PDF.

ToDos

Suspense/Loading optimization

error handling

add example and test it

layout

optimization, evt. remove react-bootstrap