- The
hostpage renders thecatalog,buy,basketandrecos(recommendations) components. - The
hostpage contains the application's Redux store. - The
catalog,buy,basketandrecoscomponents subscribe to events from the store and publish events to the store.
- The
hostpage has to be aware of the other components. It controls how the components are rendered. - The other components cannot be used outside the
hostpage. This is mostly because it holds the message bus. - The teams in charge of
catalog,buyandbasket, andrecoscannot work in isolation. Changes to any of their components would affect the structure of the page and the other components.
- Move the event bus (Redux) outside the
hostpage. For example, the event bus could be a Redis message queue. This fixes problem 2. - Move the components outside the
hostpage. Thehostshould not be dependent on the components. This fixes problem 1. - Deploy the components from their own services. This fixes problem 3.
This implementation involves the use of SSIs (server-side includes) from Nginx. Each service renders their HTML on the server and serves it.
- The content is rendered server-side using SSIs.
- The components do not utilize any interaction; there is no Javascript.
- There is no event bus.
Unfortunately, there is no branch in the repo that shows this implementation. It was overwritten in error. You could find it in the repo's history.
This implementation builds on Naive-SSI by composing each microservice's content from React components. The services do not serve HTML but Javascript.
- The content is rendered server-side using SSIs.
- The components utilize Javascript.
- There is no event bus.
- The implementation can be found in the naive-react branch.
- The page is rendered improperly due to multiple
<body>and<script>tags at different points in thehostHTML.
This implementation also builds on Naive-SSI by composing each microservice's content from Web components.
- The content is rendered server-side using SSIs.
- The components utilize Javascript.
- There is no event bus.
- The implementation can be found in the web-components branch.
- This implementation is hugely inspired by the micro-frontends project. In fact, it's a shameless copy save for changes to the names of the services.
- This implementation is the closest to the requirements for the research.
This implementation restricts the rendering of the components to the client; it does not utilize SSIs. The components are built using React.
- The content is rendered client-side.
- The implementation uses a Redis message queue as an event bus.
- The implementation can be found in the master branch.
Starting nginx and all team containers
docker-compose up --build
Once everything is build an running you can access the assembled product page via http://127.0.0.1:3000/.
- Replace the Redis message queue with a more robust implementation like RabbitMQ.
- Host the microservices as apps instead of React components. This will allow the microsevices to be composed from other libraries / frameworks like Vue and Angular.