## **Development** Process **of CabloyJS** ### **1\. Stage One:EggBornJS** EggBornJS implements a full-stack development framework with business modules as its core For example, the module `egg-born-front` is the core module of the frontend of the framework, while the module `egg-born-backend` is the core module of the backend of the framework, and the module `egg-born` is the command-line tool of the framework for creating the project skeleton This is why all business modules are prefixed with `egg-born-module-` ### **2\. Stage Two:CabloyJS** EggBornJS is only a basic full-stack development framework. Considering business development, many business-related supporting features need to be provided, such as `User Management`, `Role Management`, `Permission Management`, `Menu Management`, `Settings Management`, `Form Validation`, `Login Mechanism`, and so on. Especially in the case of `frontend and backend separation`, the requirement of permission management is raised to a higher level On the basis of EggBornJS, CabloyJS provided a set of core business modules, so as to realize a series of supporting features, which are organically combined to form a complete and flexible upper ecological architecture, thus supporting the specific business development process > With EggBornJS, not only the components can be reused, but also the business modules do from now > With CabloyJS, you can quickly develop all kinds of business applications ## **CabloyJS Architecture diagram and technology stack** ![cabloy-2x](https://portal.cabloy.com/api/a/file/file/download/c749dbd91a7d46ca9605e7b631943485.png) ### **1\. Level One: NodeJS** Based on NodeJS, the frontend and backend can use Javascript language for full stack development, thus significantly improving development efficiency ### **2\. Level Two: VueJS、KoaJS** ### **3\. Level Three: Framework7、EggJS** * `Frontend`**:** Framework 7 is used as the main UI component library, and other UI component libraries are matched according to business needs, such as AntD-Vue's table component, AntV-X6 workflow drawing component, ChartJS chart component, etc. * `Backend`**:** EggJS is adopted as the underlying framework, thus following the mature infrastructure and rich plug-in ecology of EggJS ### **4\. Level Four: egg-born-front、egg-born-backend** * `egg-born-front`**:** It is the core module of the frontend and mainly provides the following features: 1. **Module isolation at frontend**: Namespaces are isolated for pages, data, logic, routing, configuration and other elements in the frontend of the module to avoid variable pollution and conflict between modules 2. **Module loading mechanism**: Just add a `sync` suffix to the module name to realize synchronous and asynchronous loading of modules, see also: [Loading Mechanism](https://cabloy.com/articles/module-basic.html) 3. **pc=mobile+pad Adaptive Layout**:The Framework7 has been optimized, so that only one set of codes is needed to adapt to PC and Mobile, see also: [Adaptive Layout: PC = Mobile + Pad](https://cabloy.com/articles/adaptive-layout.html) 4. **Component Context Objects**: A large number of context objects have been injected into Vue component instances to facilitate development, see also: [Component](https://cabloy.com/articles/front-component.html) * `egg-born-backend`**:** It is the core module of the frontend and mainly provides the following features: 1. **Modular development system**: The original file structure of EggJS is not suitable for the modular development style. However, EggJS provides a powerful extension mechanism, allowing you to provide a custom loader. By developing a custom loader, a file structure with business modules as the unit is implemented. Each business module can define resources related to its own business, such as `Routes`, `Controllers`, `Services`, `Models`, `Middlewares`, `Config`, `i18n`, and so on. In addition, these elements can be compiled and packaged into one javascript file, and can also be uglified to protect commercial codes. Because of this modular development system, it is also convenient to directly publish the compiled and packaged modules to the `NPM Registry` or `Cabloy Store` for sharing with the community. See also: [Module Compilation and Publish](https://cabloy.com/articles/module-compile.html) 2. **Module isolation at backend**: Based on the custom loader, namespace isolation processing is carried out for the `Routes`, `Controllers`, `Services`, `Models`, `Config` and other elements on the backend of the module to avoid variable pollution and conflict between modules 3. **Bean Container & AOP**: Based on pure javascript (Vanilla JS), a lighter and more flexible bean container is implemented, and can be extended through the AOP mechanism. See also: [Bean](https://cabloy.com/articles/bean.html) 4. **Native distributed architecture:** The original `Worker + Agent` process model of EggJS is very convenient for a single machine. However, when it comes to multi machine clusters, especially Docker based cluster deployment, `Agent` process lose its usefulness. More importantly, if the development is based on the `Agent` process at the beginning, it is difficult to smoothly transition to the distributed scene later. Therefore, the backend of CabloyJS uses `Redis`. It starts from the bottom of the framework to design a native distributed architecture, and has derived a series of distributed development components, such as `Broadcast`, `Queue`, `Schedule`, `Startup`, which facilitates distributed development from the beginning. Therefore, after the system is scaled up, cluster expansion can be easily done. See also: [Broadcast](https://cabloy.com/articles/broadcast.html), [Queue](https://cabloy.com/articles/queue.html), [Schedule](https://cabloy.com/articles/schedule.html), [Startup](https://cabloy.com/articles/startup.html) ### **5\. Level Five: EggBornJS** `egg-born-front` and `egg-born-backend`, together with some peripheral tools, constitute EggBornJS, which is the first stage of CabloyJS's R&D process ### **6\. Level Six: CabloyJS** CabloyJS has developed a set of core global modules on the basis of EggBornJS, implemented a series of business support features, and organically combined these features to form a complete and flexible upper ecological architecture to support specific business development processes ### **7\. Level Seven: Project** The actual project consists of global modules and local modules * **Global modules**: The core modules built in CabloyJS and third-party modules from `NPM registry` or `Cabloy Store` are collectively referred to as `global modules`, which are generally installed on `node_modules` directory * **Local modules**: The actual development work of the project is generally carried out in `local modules`. Local modules are located in the project directory, see also: [Modularization And Create Module](https://cabloy.com/articles/module-create.html)