Coupage (/ku.paʒ/) is a tiny toolkit that aims to simplify the creation of extensible browser-based applications. It implements a mechanism that loads extensions inside a host application and takes care of shared dependencies.
Coupage provides a compact set of interfaces and build utilities that implement the following characteristics:
- Statically typed code-based contract between an application and it's extensions
- Built-in internationalization, performance and security
- Optimal development experience for extension authors
Coupage offers a simple, yet flexible extensibility integration model that is capable of addressing the foundational requirements of a modern micro-frontend architecture.
Note
Check the sample application that showcases the current set of Coupage capabilities.
Source: coupage-react-sample
Performance Report: coupage-react-sample/blob/master/reports/lighthouse.pdf
Security Report: coupage-react-sample/blob/master/reports/snyk.pdf
Many software systems support some form of extensibility due to functional, organizational or ecosystem requirements. It can be implemented in a static or dynamic manner and additional packages are often called modules or plugins. Coupage is not much different but uses the following terminology:
An implementation of a particular functionality that is built separately and can be dynamically loaded into a host application.
A specific area of the host application that is capable of handling extension contributions. It can be a navigation menu, a content block or something else.
A description of all extension points that are supported by a given extension. It may contain program code that will be executed by the host application.
Coupage consists of several packages that contribute to different aspects of the overall concept.
A zero-dependency extension loading implementation that provides optimized resource handling in both development and production environments.
A wrapper around a customized Webpack configuration that simplifies the typical development needs of a Coupage project.
An implementation that targets React and uses some of the popular ecosystem packages.
Coupage utilizes technologies like Webpack and AMD but this will very likely change as the ESM tooling support evolves. The core implementation is framework-agnostic and can provide support for other popular libraries besides React.