Micro Frontends state management example

This is an example project to show how to manage data/state with Web Components using Micro Frontends techniques.

The application uses ES modules 📦 for development, and Webpack as a module bundler.

Features

• 🚀 Use LitElement. A simple base class for creating fast, lightweight web components
• ✏️ Use Wired Elements. A set of common UI elements with a hand-drawn, sketchy look. These can be used for wireframes, mockups, or just the fun hand-drawn look. Wired Elements implemented as web components, and can be used on any page and with most frameworks.
• 🚦 Vaadin Router configured for code splitting and lazy loading
• 🛠 webpack 4 for easy development and production bundling

State Management Patterns

• 👨‍👦‍👦 Use Mediator pattern to manage state in Micro Frontend scope.
• 🎛 Use Pub/Sub pattern to manage state in Global scope to share state between Micro Frontends.
• Use ⬆️events up and ⬇️ properties/attributes down in Web Components scope.

Install dependencies

npm i

Start the development server

Start webpack-dev-server on localhost:

npm run dev

Scaffold based on https://github.com/vaadin-learning-center/lit-element-tutorial-04-navigation-and-code-splitting.git