A Micro Front-end exploration using the Single SPA architecture to present React, Vue, and AngularJS application verticals synergistically.
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.
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.
- Section: Products
- Pages: Listings, Purchases
- Section: Settings
- Pages: Profile, Account
- 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.
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.
