https://github.com/devonchurch/chia-seeds

Federated Modules / Micro Front-end exploration
https://github.com/devonchurch/chia-seeds

Last synced: about 2 months ago
JSON representation

Federated Modules / Micro Front-end exploration

• Host: GitHub
• URL: https://github.com/devonchurch/chia-seeds
• Owner: devonChurch
• License: mit
• Created: 2020-08-03T08:25:01.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T20:54:20.000Z (over 3 years ago)
• Last Synced: 2025-02-02T08:29:47.786Z (over 1 year ago)
• Language: Vue
• Size: 777 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 55
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Chia Seeds 🌱 🌰 🐦

## What 👋

An exploration into Micro Front-end compositions to understand the granularity teams can collaborate within the same application context.

## How 💡

Three core layout scenarios were created to encapsulated business requirements.

### Standard

**Primary navigation with content area**



### Isolation

**No navigation, only content**



### Modal

**Supplementary content overlay**



Micro Front-end _"slices"_ were identified and allocated under five color-coded cross-functional teams.

![Teams](https://user-images.githubusercontent.com/15273233/95007177-28c0f880-0669-11eb-8cb9-4a8efb1de1e8.png)

A user flow was created to simulate the _"slices"_ in the context of our required layout scenarios.

![User flow](https://user-images.githubusercontent.com/15273233/95007373-73437480-066b-11eb-8085-897156444cb8.png)

Each Micro Front-end _"slice"_ runs completely independently and composes into the core Singe Page Application shell via two main technology paradigms.

### [Single-SPA](https://single-spa.js.org/)

**A lightweight Micro Front-end lifecycle orchestrator**

### [Federated Modules](https://webpack.js.org/concepts/module-federation/)

**Run-time dependency reconciliation**

![Local development](https://user-images.githubusercontent.com/15273233/95007419-49d71880-066c-11eb-9b7f-f10417479db3.png)

## Conclusion 👍

Combining Single-SPA Root and Parcel application composition alongside Federated Modules run-time Micro Front-end injection is a powerful pattern with production potential.

![demo](https://user-images.githubusercontent.com/15273233/95007606-01205f00-066e-11eb-8722-ab53aa86a574.gif)