https://github.com/anfibiacreativa/web-fragments-migration-demo

A sample to illustrate decoupling and migrating an enterprise Angular monolithic app, to micro-frontends with web-fragments
https://github.com/anfibiacreativa/web-fragments-migration-demo

microfrontend web-fragments

Last synced: 3 days ago
JSON representation

A sample to illustrate decoupling and migrating an enterprise Angular monolithic app, to micro-frontends with web-fragments

• Host: GitHub
• URL: https://github.com/anfibiacreativa/web-fragments-migration-demo
• Owner: anfibiacreativa
• Created: 2024-11-16T16:53:23.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-19T13:38:22.000Z (3 days ago)
• Last Synced: 2024-12-19T14:43:10.634Z (3 days ago)
• Topics: microfrontend, web-fragments
• Language: TypeScript
• Homepage:
• Size: 7.17 MB
• Stars: 1
• Watchers: 2
• Forks: 1
• Open Issues: 4
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Migration path from Angular monolithic SPA app, to micro-frontends featuring Qwik and Analog.js

> [!IMPORTANT]

> README and CODE SAMPLE status is WORK IN PROGRESS

This sample demonstrates how to migrate a monolithic Angular SPA e-commerce application to a micro-frontend architecture using  [Web Fragments](https://github.com/web-fragments/web-fragments).

## Application design

The e-commerce application consists of a Homepage default route featuring a catalog and the shopping cart area. 

![ecommerce app](https://github.com/user-attachments/assets/2947391b-ab67-4e17-990a-fde10facb87d)

Catalog cards link directly to the product detail page.

![detail page](https://github.com/user-attachments/assets/11fbfccb-6e59-43f7-a7d2-cf8c16bf5915)

## Application structure

The user interface is composed by the following components

- homepage

- product page

- product detail

- product card

- shopping cart

## Migration excercise 

The decoupling and migration excercise consists in horizontally splitting the monolithic UI and codebase into multiple applications that are independently developed, released, versioned and deployed, with the following correspondence,

- Homepage + productpage -> Shell application HTML

- Product catalog -> Micro-frontend split 1 -> Analog.js

- Product detail -> Micro-frontend split 1 -> Analog.js

- Shopping cart -> Micro-frontend split 2 -> Qwik

![web-fragments drawio](https://github.com/user-attachments/assets/e088f739-6418-4610-aba6-df8424040599)

## Come back soon! This is a work in progress

Come back often, while we work on the demo and slides! In the mean time you can learn more about micro-frontends and modern frontend development visiting [microfrontend.dev](https://microfrontend.dev) and learn more about Web Fragments following [this link](https://blog.cloudflare.com/better-micro-frontends)

🫶