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:

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

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

Dependency graph without cycles

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

interface to register different search providers with

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

• 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

• 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

same as product

• 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

Uses demoit and Go

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

or use PDF.

add example and test it

optimization, evt. remove react-bootstrap