English | ็ฎไฝไธญๆ
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.
# npm
npm install garfish
# yarn
yarn add garfishThe doc site (Garfish) is only available in Chinese for now, we are planning to add English versions soon.
๐ 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
- 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