# single-spa/single-spa

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/single-spa-single-spa).**

13,871 stars · 927 forks · JavaScript · NOASSERTION

## Links

- GitHub: https://github.com/single-spa/single-spa
- Homepage: https://single-spa.js.org/
- awesome-repositories: https://awesome-repositories.com/repository/single-spa-single-spa.md

## Topics

`front-end` `javascript` `microfrontends` `microservices` `router` `single-page-applications` `single-spa`

## Description

single-spa is a microfrontend orchestration framework designed to compose multiple independent frontend applications into a single interface. It functions as a frontend routing engine and lazy-loading application loader that mounts and unmounts microfrontends based on the current URL without requiring a browser refresh.

The framework enables multi-framework frontend integration, allowing different JavaScript frameworks to coexist on one page. This architecture supports distributed frontend development, where separate teams develop and deploy modules independently while maintaining a unified user experience.

The system manages the lifecycle of these applications through a centralized registry and dynamic module loading. It optimizes frontend performance by deferring the download of application code until a specific route is accessed.

## Tags

### Web Development

- [Micro-Frontend Orchestrators](https://awesome-repositories.com/f/web-development/micro-frontend-orchestrators.md) — Functions as a micro-frontend orchestrator that composes multiple autonomous web applications into a single unified interface. ([source](https://single-spa.js.org/))
- [URL Route Mapping](https://awesome-repositories.com/f/web-development/dynamic-content-resolution/url-route-mapping.md) — Maps browser URL changes to specific microfrontend configurations to trigger application loading and activation.
- [Dynamic Loading Strategies](https://awesome-repositories.com/f/web-development/dynamic-loading-strategies.md) — Implements dynamic loading strategies to fetch JavaScript bundles on demand, reducing the initial page payload.
- [Lazy Loading](https://awesome-repositories.com/f/web-development/lazy-loading.md) — Defers the download of application code until the specific route is accessed to optimize page load times. ([source](https://cdn.jsdelivr.net/gh/single-spa/single-spa@main/README.md))
- [Microfrontend Routers](https://awesome-repositories.com/f/web-development/microfrontend-routers.md) — Acts as a frontend routing engine that mounts and unmounts microfrontends based on the current URL.
- [Micro-Frontend Frameworks](https://awesome-repositories.com/f/web-development/single-page-applications/micro-frontend-frameworks.md) — Integrates multiple different JavaScript frameworks to coexist on a single page without browser refreshes.
- [Frontend Performance Optimization](https://awesome-repositories.com/f/web-development/frontend-performance-optimization.md) — Optimizes frontend performance by delaying application code downloads until they are needed.

### Software Engineering & Architecture

- [Framework Coexistence](https://awesome-repositories.com/f/software-engineering-architecture/framework-coexistence.md) — Enables the coexistence of multiple different JavaScript frameworks on a single page through an agnostic wrapper.
- [Application Registries](https://awesome-repositories.com/f/software-engineering-architecture/application-frameworks/application-framework-extensions/application-registries.md) — Provides a centralized registry to manage the activation and inactivation logic of registered microfrontend applications.
- [Microfrontend Lifecycles](https://awesome-repositories.com/f/software-engineering-architecture/application-lifecycle-management/microfrontend-lifecycles.md) — Manages the mounting and unmounting of micro frontends via standardized lifecycle functions.
- [Distributed Frontend Development](https://awesome-repositories.com/f/software-engineering-architecture/distributed-frontend-development.md) — Supports distributed development workflows where separate teams deploy modules independently while maintaining a unified experience.