Skip to content

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

Notifications You must be signed in to change notification settings

sergicontre/microfrontends-state-management

Repository files navigation

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

About

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

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published