What is CabloyJS

CabloyJS is a node. js full stack framework with its own workflow engine, which is based on KOA + Egg + Vue + framework7 + mysql

The online demo

scenario Link/QR code
PC test.cabloy.com/
Mobile terminal

Who will use the Node.js full-stack framework?

>>>>> 1. Outsourcing orders

Pain points:

The customer expects the project to be completed on time with low price and low risk. Service providers want high gross profit, less investment, fast progress, customer satisfaction. How to strike a balance?

If you receive a project and start code development from scratch, it will magnify the contradiction between customers and service providers and increase the implementation risk of the project. Therefore, a high quality, efficient, flexible full stack framework, can make outsourcing orders to go more smoothly, farther

Advantages:

  1. Highly efficient and flexible: CabloyJS spent 5 years to build the Node.js full stack framework, built-in a large number of features, out of the box, but also has a strong scalability, easy to customize development
  2. Second chanceThe perfect infrastructure of CabloyJS not only makes the development more efficient, but also can guide and cultivate customers’ daily control experience, thus derivifying more business needs and cooperation opportunities

>>>>> 2. Start-ups

Appeal:

In today’s world of high startup costs and increasingly fierce competition, startups often want to develop a minimum usable product (MVP) in as short a time as possible and at as little cost as possible, so as to release testing, collect feedback, and iterate

Advantages:

  1. As soon as possible to the ground: CabloyJS adopts modular system and supports the development of all scenarios to ensure the MVP product landing as soon as possible
  2. hedgingCabloyJS builds distributed design from the ground up, with core features such as a workflow engine built in. When the system is up and running, it can seamlessly support cluster deployment and continue to develop more core businesses based on the MVP producthedgingThe effect of
  3. value-added: Provided by CabloyJSModule market, can be accessed throughModule marketDirectly purchase and their own business needs to match the module, at low cost to quickly achieve business needs, so as to achievevalue-addedThe effect of

CabloyJS business model

  1. Free open source: CabloyJS full stack framework, open source and free, and provides a large number of documents, test modules, video courses and other resources
  2. Module market: Provided by CabloyJSModule market. Research and development colleagues can continuously precipitate common modules in the actual development process, published toModule marketAnd share revenue with the platform. Thus become outsourcing to take orders outsideIncome after sleep. If the modules are good enough, the revenue is good enough, and the posture is good enoughLie flat
  3. The secondary distribution:Module marketThe importThe secondary distributionBring together more social channel resources to drive the sales of modules

CabloyJS has previously produced a set of video courses, introducing the same secondary distribution gameplay, welcome to taste

Related links:

  • About the course
  • On the framework
  • About Secondary Distribution

Four highlights of CabloyJS

>>>>> Highlight 1: Adaptive layout:pc = mobile + pad

  1. The background that

For front-end development, there is a real problem: how to develop both PC and mobile?

There are generally two traditional practices:

1) Use CSS adaptive media query

The layout of native mobile is different from that of PC. CSS adaptive media queries only make PC pages available on mobile, but not on native mobile

For example, many blogs are implemented using Bootstrap; Another example is the vast majority of backend management system templates on the market. Often give priority to the PC side of the display effect, and then use CSS adaptive media query to adapt to the mobile end, so that the mobile end can only reach the extent of viewing, but absolutely not good use

2) Use two sets of code

Due to the limitations of using CSS adaptive media query, many projects use two sets of code to deal with the LAYOUT display of PC and mobile respectively. This solves the problem, but it doubles the cost, time, and effort of doing two sets of code for the same business logic

  1. Solution:pc = mobile + padAdaptive layout

CabloyJS pioneered the adaptive layout mechanism of PC = Mobile + pad: only a set of code is needed to achieve the native effect on mobile, while seamlessly bringing the control experience and development mode on mobile to PC

To demonstrate the effect: go to test.cabloy.com/ and adjust the window size to experience the effect on PC and mobile

>>>>> Highlight 2: Modular development systems are isolated from modules

  1. Modular system: CabloyJS adoptThe module of thinkingPlan the system architecture based on service functions, and organize front-end components and back-end logic related to service functions into oneBusiness moduleTo facilitate the cohesion and reuse of business functions, thus facilitating the precipitation of common modules and then publishing toModule market
  2. Module isolation: The page, data, logic, routing, configuration and other elements of a module are namespace isolated to avoid variable pollution and conflict between modules
  3. Global and local modules: CabloyJS has a lot built inGlobal moduleTo provideWorkflow engine,User management,Role management,Rights management,Menu management,Parameter Setting Management,Form validation,Login mechanism, etc. Specific business development is inLocal moduleThe structure is clear and hierarchical, so as to easily cope with the continuous growth of business scale

>>>>> Highlight 3: Front-end and back-end separation, full scenario development

The architecture is designed to separate the front and back ends, enabling rapid development of services in all scenarios

scenario The front end The back-end
PC: Web CabloyJS front-end CabloyJS backend
PC: Exe CabloyJS front end + Electron CabloyJS backend
Mobile: IOS CabloyJS front-end + Cordova CabloyJS backend
Mobile: Android CabloyJS front-end + Cordova CabloyJS backend
Wechat official account CabloyJS front-end + wechat API CabloyJS backend
Enterprise WeChat CabloyJS front-end + enterprise wechat API CabloyJS backend
nailing CabloyJS front-end + pin API CabloyJS backend
Slack CabloyJS front-end + Slack API CabloyJS backend
Small programs: wechat, Alipay, etc Uni-app + CabloyJS front-end SDK CabloyJS backend
  • The back-end: Because of the complete front and back end separation design, only a set of CabloyJS back-end code can be developed
  • The front end: All scenarios that can be based on H5 need only develop a set of CabloyJS front-end code
  • Small program: Provides CabloyJS front-end SDK so uni-App can easily interconnect with CabloyJS back-end code

>>>>> Highlight 4: Built-in NodeJS workflow engine

As is known to all, NodeJS is a back-end development language and operating environment, which supports high concurrency and high development efficiency. However, NodeJS is mostly used in tool scenarios such as data CRUD management, mid-layer aggregation and mid-layer proxy, and rarely goes deep into the core of the business domain. This is one of the reasons there are so many minimum usable products (MVPS) developed with NodeJS that end up refactoring from scratch

As a business development platform, NodeJS still lacks many core basic components. NodeJS workflow engine is one of them. CabloyJS 4.0 focuses on the development of NodeJS workflow engine, and as the built-in basic core module (also open source, free), further expands the application scenarios of NodeJS in the back end, providing the foundation support for in-depth research and development of various commercial business logic

The development of CabloyJS

CabloyJS has been under development since 2016 and has gone through two stages:

1. Stage 1: EggBornJS

The core focus of EggBornJS is the isolation of modular architecture and modules to achieve a complete full-stack development framework

For example, the egg-born-front module is the core module of the front end of the framework, the egg-born-backend module is the core module of the backend of the framework, and the egg-born module is the command line tool of the framework, which is used to create the skeleton of the project

Is this why all business modules are prefixed with egg-born-module-

2. Stage 2: CabloyJS

EggBornJS is just a basic full-stack development framework. In order to support rapid business development, there are many business-related supporting features, such as workflow engine, user management, role management, permission management, menu management, parameter setting management, form verification, login mechanism, and so on. Especially in the scenario where the front and back ends are separated, the requirement for permission management rises to a higher level

Based on EggBornJS, CabloyJS provides a set of core business modules, so as to realize a series of business support features, and combine these features organically to form a complete and flexible upper ecological architecture, so as to support specific business development process

With EggBornJS, you can reuse not only components, but also business modules

With CabloyJS, you can quickly develop all kinds of business applications

CabloyJS architecture diagram and technology stack

CabloyJS does not blindly rebuild the wheel, but uses mature open source framework and components in the industry, through organic combination, innovation again, supplement the infrastructure features of the business level, so as to have rich features and maintain a strong scalability

1. Layer 1: NodeJS

Based on NodeJS, the front-end and back-end can use Javascript language for full-stack development, thus significantly improving the development efficiency

2. Second layer: VueJS, KoaJS

3. EggJS

  • The front endFramework7 as the main UI component library, with other UI component libraries based on business needs, such as AntD Vue table component, AntV X6 workflow drawing component, ChartJS chart component, etc
  • The back-end: EggJS is adopted as the underlying framework, which follows the mature infrastructure and rich plug-in ecosystem of EggJS

4. The fourth layer: egg-born-front and egg-born-backend

  • egg-born-front: is the core module of the front end, mainly carrying out the following aspects of work:
  1. Module front-end isolation: The module front-end page, data, logic, routing, configuration and other elements are namespace isolation to avoid variable pollution and conflict between modules
  2. Module loading mechanism: Simply add one to the module namesyncSuffix, can be implemented moduleSynchronous loadingandAsynchronous loading, see:Loading mechanism
  3. PC = Mobile + Pad Adaptive layoutFramework7 has been modified to require only one set of code,Mobile terminalAchieve the original effect while willMobile terminalSeamless integration of control experience and development modePC, seeAdaptive layout: PC = Mobile + Pad
  4. Component environment objects: A number of environment objects are injected into Vue Component instances for easy development, see Component
  • egg-born-backend: is the core module of the back end, mainly carrying out the following aspects of work:
  1. Modular development system: The original directory structure of EggJS is not suitable for the modular development style. But EggJS provides a powerful extension mechanism that allows custom Loader loaders to be provided. By developing a self-defined Loader, the directory structure based on service modules is realized. Each business module can define its own business-related resources, such as:Routes, Controllers, Services, Models, Middlewares, Config, I18N language resources, and so on. And these guys canCompile the packageInto a JS file, also can be carried outdefacingAnd thusProtecting business code. Because of this modular development system, it is also convenient to publish compiled packaged modules directly toNPM warehouseorModule marketTo share with the community. See also:Module compilation and publishing
  2. Module back-end isolation: Based on a customized Loader, the module is used as a backendRoutes, Controllers, Services, Models, ConfigTo avoid variable pollution and conflict between modules
  3. Bean containers vs. AOP programming: A lighter, more flexible Bean container is implemented based on native JS (Vanilla JS) and can be extended with AOP mechanisms, see beans
  4. Native distributed architecture: EggJS originalWorker + AgentThe process model is very convenient for a single machine. But faced with multi-machine clusters, especially based ondockerIn terms of cluster deployment,The Agent processYou’re out of your element. More importantly, if you start based onThe Agent processIt is difficult to make a smooth transition to a distributed scenario. As a result,egg-born-backendusingRedis, the original distributed architecture design from the bottom of the framework, and derivedBroadcast, Queue, Schedule, StartupSuch as a series of distributed development components to facilitate distributed development from the beginning. So when the system is up, you can easily do cluster scaling, see:Broadcast.Queue.Schedule.Startup

Layer 5: EggBornJS

Egg-born-front and egg-born-Backend, together with some peripheral tools, constitute EggBornJS, which is the first stage of CabloyJS development

Layer 6: CabloyJS

Based on EggBornJS, CabloyJS developed a set of core global modules, realized a series of business support features, and organically combined these features to form a complete and flexible upper ecological architecture, so as to support specific business development process

7. The Seventh floor

The actual project consists of global modules and local modules

  • Global module: CabloyJS built-in core modules fromNPM warehouseorModule marketThird party modules, collectively referred to asGlobal module, generally installed innode_modulesdirectory
  • Local module: The actual development work of the project is generally inLocal moduleAnd universities.Local moduleLocated in the project directory, see:The new module

belief

Who can use JavaScript to write applications, will eventually use JavaScript to write | Atwood’s law

We believe that deep explorers of Javascript will be inspired by this quote and work together to contribute to the Javascript ecosystem and build a more prosperous application ecosystem

CabloyJS is an exploration of this famous saying. You are welcome to join the CabloyJS community to promote the prosperity and application of Javascript

Origin of name

1. EggBorn

The origin of the name is relatively simple, as Egg(back-end framework) is the result of EggBorn. There is a cartoon called “Tianshu strange tan”, the adorable Lord inside is called “eggs”, I like to see (accidentally exposed the age 😅)

2. Cabloy

Cabloy is a magical spell from the Smurfs that has magical effects when spelled correctly. Likewise, CabloyJS is magic about chemistry, based on modular combinations with biochemical reactions, you’ll achieve anything you want

preview

  • White theme

  • The dark theme

  • Hyacinth theme

  • Bright theme

  • Display the sidebar

  • Mobile style

License

MIT

A link to the

  • Website: https://cabloy.com/
  • GitHub: https://github.com/zhennann/cabloy