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
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:
-
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
-
Module loading mechanism: Just add a
sync
suffix to the module name to realize synchronous and asynchronous loading of modules, see also: Loading Mechanism -
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
-
Component Context Objects: A large number of context objects have been injected into Vue component instances to facilitate development, see also: Component
egg-born-backend
: It is the core module of the frontend and mainly provides the following features:
-
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 theNPM Registry
orCabloy Store
for sharing with the community. See also: Module Compilation and Publish -
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 -
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
-
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 theAgent
process at the beginning, it is difficult to smoothly transition to the distributed scene later. Therefore, the backend of CabloyJS usesRedis
. It starts from the bottom of the framework to design a native distributed architecture, and has derived a series of distributed development components, such asBroadcast
,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, Queue, Schedule, Startup
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
orCabloy Store
are collectively referred to asglobal modules
, which are generally installed onnode_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
Comments: