Garfish is a micro front-end framework, mainly used to solve the problems of cross-team collaboration, diversification of technology system, and increasing complexity of applications brought by modern web applications in the context of front-end ecological boom and increasing complexity of web applications, and Garfish has been polished and tested by a large number of online applications, with strong functional stability and reliability.

Garfish Goals

To compose multiple independently delivered front-end applications into a whole, and to decompose front-end applications into some smaller and simpler applications that can be "independently developed", "independently tested" and "independently deployed", while still appearing to users as cohesive individual products.

Installation

# npm
npm install garfish

# yarn
yarn add garfish

Documentation

The doc site (Garfish) is only available in Chinese for now, we are planning to add English versions soon.

• About Garfish
• Quick Start
• API References

Functionality

🌈 Rich and efficient product features

• Garfish micro front-end sub-application supports any kind of framework and technology system access
• Garfish micro front-end sub-application supports "independent development", "independent testing" and "independent deployment
• Powerful pre-loading capability, automatically record user application loading habits to increase loading weight, and greatly reduce application switching time
• Support for dependency sharing, which greatly reduces the overall package size and the repeated loading of dependencies.
• Support data collection, effectively perceive the state of the application during operation
• Support for multiple instance capability to run multiple sub-applications in the page at the same time enhances the business splitting efforts
• Provides efficient and usable debugging tools to assist users in the micro front-end model brings different development experience problems from the traditional R&D model

📦 Highly scalable core modules

• Supports HTML entry and JS entry through the Loader core module, making it easy to access micro front-end applications
• Router module provides route-driven, master-child route isolation, users only need to configure the routing table application can complete the independent rendering and destruction, the user does not need to care about the internal logic
• Sandbox module provides runtime isolation for the application's Runtime, which can effectively isolate the side effects of JS and Style on the application
• Store provides a simple mechanism for exchanging communication data

🎯 Highly scalable plugin mechanism

• Provide business plugins to meet various customization needs of business parties

Contributing

• Contributing Guide

Credit

• Qiankun is a very good micro front-end framework, Garfish sandbox design learned a lot of good ideas
• single-spa for community raised a hot wave of micro front-end solutions, learned a lot of amazing Garfish routing system design. And for the Garfish bridge design, we have refered the implementation of the bridge part in single-spa and we think it is a good design, so we fork the code of the bridge implementation part and make some adjustments for the lifecycles in Garfish.
• Garfish's css-scope plugin is inspired by the implementation of reworkcss, and some some of the implementation code is forked from reworkcss for different scenarios.
• The design of garfish's es-module plugin was inspired by the @babel/traverse and es-module-shims libraries, and some of the implementation code is forked from @babel/traverse