https://github.com/devonchurch/kombucha
A Micro Front-end exploration using the Single SPA architecture
https://github.com/devonchurch/kombucha
angular react single-spa single-spa-angular single-spa-react single-spa-vue vue
Last synced: about 2 months ago
JSON representation
A Micro Front-end exploration using the Single SPA architecture
- Host: GitHub
- URL: https://github.com/devonchurch/kombucha
- Owner: devonChurch
- Created: 2020-05-10T08:14:18.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T03:54:01.000Z (over 3 years ago)
- Last Synced: 2025-03-28T07:44:05.456Z (about 1 year ago)
- Topics: angular, react, single-spa, single-spa-angular, single-spa-react, single-spa-vue, vue
- Language: JavaScript
- Homepage:
- Size: 4.31 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 50
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Kombucha 🍵🍶😋
## What 👋
A **Micro Front-end** exploration using the [Single SPA](https://single-spa.js.org/) architecture to present **React**, **Vue**, and **AngularJS** _application verticals_ synergistically.
## Why 🤔
The ability for _Developers_ to build **isolated** _verticals_ of an application while remaining a **cohesive** experience to _Users_ is an important pillar to an application architecture.
Combining **multiple** Front-end frameworks into a **single** application experience facilitates the incremental evolution of a codebase with an emphasis on longevity. It also allows teams to choose a technology stack that is relevant to a given _verticals_ requirements.
## How 💡
The Single SPA system acts as a high-level routing orchestrator that mounts the relevant _application vertical_. This very light layer of abstraction means that no one UI Framework is controlling the core application architecture.
**_The application is split into three verticals, each associated with a different UI Framework._**
### **Vue**
+ **Section:** _Products_
+ **Pages:** _Listings, Purchases_
### **Angular**
+ **Section:** _Settings_
+ **Pages:** _Profile, Account_
### **React**
+ **Section:** _Create_
+ **Pages:** _Invoice, Ticket_
Each _application vertical_ has a Single SPA wrapper that hooks into their lifecycle methods for mounting.
_Application verticals_ are **deployed independently** and curated at run time via the Single SPA initializer.
## Demo 📺
The demo below shows each _application vertical_ being mounted based on Single SPA's assertion on the current core route.
Each **Micro Front-end** can be freely mounted using the [Single SPA Devtools extension](https://single-spa.js.org/docs/devtools/).
