CabloyJS是什么
CabloyJS是一款自帶工作流引擎的Node.js全棧框架, 接單快手、創業神器, 基於koa + egg + vue + framework7 + mysql
在線演示
| 場景 | 鏈接/二維碼 |
|---|---|
| PC端 | https://test.cabloy.com/ |
| Mobile端 |  |
誰會用這款Node.js全棧框架？
>>>>> 1. 外包接單
痛點：
客戶希望項目按質如期完工、價格低、風險小；服務商希望毛利高、投入少、進度快、客戶滿意。如何實現二者的平衡呢？
如果接到項目，從零開始代碼開發，就會放大客戶與服務商之間的矛盾，增大項目的實施風險。因此，一款高質、高效、靈活的全棧框架，可以讓外包接單之路走得更順一些，更遠一些
優點：
高效靈活：CabloyJS歷時5年精心打造的Node.js全棧框架，內置大量特性功能，開箱即用，同時又具有強大的可擴展性，便於定制開發二次機會：CabloyJS完善的基礎建設，不僅讓開發效率更高，而且可以引導和培育客戶的日常操控體驗，從而衍生出更多的業務需求和合作機會
>>>>> 2. 初創企業
訴求：
在創業成本高企、競爭越發激烈的今天，初創企業往往希望在盡短的時間、以盡少的成本，研發出最小可用產品（MVP），從而盡早發布測試、收集反饋、迭代優化
優點：
盡快落地：CabloyJS采用模塊化體系，支持全場景開發，確保MVP產品盡快落地保值：CabloyJS從底層內置分布式設計，並且內置工作流引擎等核心特性。當系統起量之后可以無縫支持集群部署，並在MVP產品的基礎上繼續深入開發更核心的業務，從而達到保值的效果增值：CabloyJS提供了模塊市場，可以通過模塊市場直接選購與自身業務需求相匹配的模塊，以低成本快速實現業務需求，從而達到增值的效果
CabloyJS的商業模式
開源免費：CabloyJS全棧框架，開源免費，並提供大量文檔、測試模塊、視頻課程等資源模塊市場：CabloyJS提供了模塊市場。研發同仁可以在實際開發過程中不斷沉淀通用的模塊，發布到模塊市場，與平台共享收益。從而成為外包接單之外的睡后收入。模塊足夠優秀，收益就足夠多，姿勢也就足夠躺平二級分銷：模塊市場導入二級分銷的玩法，匯聚更多社會渠道資源，帶動模塊的銷售
CabloyJS先期制作了一套視頻課程，導入了相同的二級分銷的玩法，歡迎品鑒
相關鏈接：
CabloyJS的四大亮點
>>>>> 亮點1：自適應布局：pc = mobile + pad
- 背景說明
對於前端開發而言，有一個很現實的問題：如何同時進行pc端和mobile端的開發？
傳統的做法一般而言有兩個：
1）采用css自適應媒體查詢
由於原生mobile端的布局和pc端的布局是不同的。css自適應媒體查詢只是讓pc端的頁面在mobile端可用，但達不到原生mobile端的效果
比如，許多使用bootstrap實現的博客；再比如，市面上絕大多數后台管理系統模版。往往優先處理pc端的顯示效果，然后采用css自適應媒體查詢來適配mobile端，從而在mobile端僅僅達到能看的程度，但絕對不好用
2）采用兩套代碼
由於采用css自適應媒體查詢有很大的局限性，很多項目采用兩套代碼來分別處理pc端和mobile端的布局顯示。這樣雖然解決了問題，但是同樣的業務邏輯需要做兩套代碼，成本、時間、精力都得翻倍
- 解決之道：
pc = mobile + pad自適應布局
CabloyJS首創pc = mobile + pad的自適應布局機制：只需要一套代碼，mobile端達到原生效果，同時將mobile端的操控體驗和開發模式無縫帶入pc端
效果演示：進入演示網站https://test.cabloy.com/，然后調整窗口尺寸分別體驗pc端和mobile端的效果
>>>>> 亮點2：模塊化開發體系與模塊隔離
- 模塊化體系：CabloyJS采用
模塊思維規划系統架構，以業務功能為單位，將與業務功能相關的前端組件與后端邏輯組織為一個業務模塊，有利於業務功能的內聚與重用，從而便於沉淀通用的模塊，然后發布到模塊市場 - 模塊隔離：模塊的頁面、數據、邏輯、路由、配置等元素均進行了命名空間隔離處理，避免模塊之間的變量污染與沖突
- 全局模塊與局部模塊：CabloyJS內置了大量
全局模塊，提供工作流引擎、用戶管理、角色管理、權限管理、菜單管理、參數設置管理、表單驗證、登錄機制，等等諸多特性。具體的業務開發則在局部模塊中進行，架構清晰、層次分明，從而輕松應對業務規模的持續增長
>>>>> 亮點3：前后端分離，全場景開發
通過前后端分離的架構設計，可以支持全場景業務的快速開發
| 場景 | 前端 | 后端 |
|---|---|---|
| PC：Web | CabloyJS前端 | CabloyJS后端 |
| PC：Exe | CabloyJS前端 + Electron | CabloyJS后端 |
| Mobile：IOS | CabloyJS前端 + Cordova | CabloyJS后端 |
| Mobile：Android | CabloyJS前端 + Cordova | CabloyJS后端 |
| 微信公眾號 | CabloyJS前端 + 微信API | CabloyJS后端 |
| 企業微信 | CabloyJS前端 + 企業微信API | CabloyJS后端 |
| 釘釘 | CabloyJS前端 + 釘釘API | CabloyJS后端 |
| Slack | CabloyJS前端 + Slack API | CabloyJS后端 |
| 小程序：微信、支付寶等 | Uni-app + CabloyJS前端SDK | CabloyJS后端 |
后端：由於完整的前后端分離設計，只需開發一套CabloyJS后端代碼即可前端：所有可基於H5的場景，只需開發一套CabloyJS前端代碼即可小程序：提供CabloyJS前端SDK讓Uni-app可以輕松對接CabloyJS后端代碼
>>>>> 亮點4：內置NodeJS工作流引擎
眾所周知，NodeJS作為后端開發語言和運行環境，支持高並發、開發效率高，有口皆碑，但是大多用於數據CRUD管理、中間層聚合和中間層代理等工具場景，很少深入到業務領域的核心。有許多采用NodeJS開發的最小可用產品（MVP）最終會另起爐灶重構，這是原因之一
究其根源，NodeJS作為業務開發平台，還缺少許多核心的基礎構件，NodeJS工作流引擎便是其一。CabloyJS 4.0重點開發了NodeJS工作流引擎，並作為內置的基礎核心模塊（同樣是開源、免費），近一步拓展了NodeJS在后端的應用場景，為深入研發各類商業業務邏輯，提供了基礎支撐
CabloyJS的研發歷程
CabloyJS從2016年啟動開發，主要歷經兩個研發階段：
1. 第一階段：EggBornJS
EggBornJS關注的核心就是模塊化體系與模塊隔離，並以此實現一套完整的全棧開發框架
比如模塊egg-born-front是框架前端的核心模塊，模塊egg-born-backend是框架后端的核心模塊，模塊egg-born是框架的命令行工具，用於創建項目骨架
這也是為什么所有業務模塊都是以
egg-born-module-為命名前綴的原因
2. 第二階段：CabloyJS
EggBornJS只是一個基礎的全棧開發框架，如果要支持業務的快速開發，還需要考慮許多與業務相關的支撐特性，如：工作流引擎、用戶管理、角色管理、權限管理、菜單管理、參數設置管理、表單驗證、登錄機制，等等。特別是在前后端分離的場景下，對權限管理的要求就提升到一個更高的水平
CabloyJS在EggBornJS的基礎上，提供了一套核心業務模塊，從而實現了一系列業務支撐特性，並將這些特性進行有機的組合，形成完整而靈活的上層生態架構，從而支持具體的業務開發進程
有了EggBornJS，從此可復用的不僅僅是組件，還有業務模塊
有了CabloyJS，您就可以快速開發各類業務應用
CabloyJS架構圖與技術棧
CabloyJS並不盲目重新造輪子，而是采用業界成熟的開源框架和組件，經過有機組合、再次創新，補充業務層面的基建特性，從而具備了豐富的功能特性，又保持了強大的可擴展性
1. 第一層：NodeJS
基於NodeJS，從而使得前后端均可以采用Javascript語言進行全棧開發，從而顯著提升開發效率
2. 第二層：VueJS、KoaJS
3. 第三層：Framework7、EggJS
前端：采用Framework7作為主體的UI組件庫，同時根據業務需要搭配其他UI組件庫，如AntD Vue的表格組件、AntV X6工作流繪制組件、ChartJS圖表組件，等等后端：采用EggJS作為底層框架，從而沿用了EggJS成熟的基礎建設和豐富的插件生態
4. 第四層：egg-born-front、egg-born-backend
egg-born-front：是前端的核心模塊，主要進行了以下幾方面的工作：
- 模塊前端隔離：對模塊前端的頁面、數據、邏輯、路由、配置等元素進行了命名空間隔離處理，避免模塊之間的變量污染與沖突
- 模塊加載機制：只需給模塊名稱增加一個
sync后綴，即可實現模塊的同步加載和異步加載，參見：加載機制 - pc=mobile+pad自適應布局：對Framework7進行了改造，只需要一套代碼，
mobile端達到原生效果，同時將mobile端的操控體驗和開發模式無縫帶入pc端，參見自適應布局：pc = mobile + pad - 組件環境對象：向Vue組件實例注入了大量環境對象，方便開發，參見：Component
egg-born-backend：是后端的核心模塊，主要進行了以下幾方面的工作：
- 模塊化開發體系：EggJS原有的目錄結構並不適合模塊化的開發風格。但是EggJS提供了強大的擴展機制，允許提供自定義的Loader加載器。通過開發自定義的Loader加載器，實現了以業務模塊為單元的目錄結構。每個業務模塊可以定義與自身業務相關的資源，如：
Routes、Controllers、Services、Models、Middlewares、Config、i18n語言資源，等等。而且這些元素可以編譯打包成一個js文件，同時也可以進行丑化，從而保護商業代碼。由於這種模塊化的開發體系，也方便把編譯打包的模塊直接發布到NPM倉庫或者模塊市場，與社區分享，參見：模塊編譯與發布 - 模塊后端隔離：以自定義的Loader加載器為基礎，對模塊后端的
Routes、Controllers、Services、Models、Config等元素進行了命名空間隔離處理，避免模塊之間的變量污染與沖突 - Bean容器與AOP編程：基於原生JS（Vanilla JS）實現了更輕量、更靈活的Bean容器，並可以通過AOP機制進行擴展，參見：Bean
- 原生分布式架構：EggJS原有的
Worker + Agent進程模型，對於單機而言非常便利。但是面對多機集群，特別是基於docker的集群部署而言，Agent進程就失去了用武之地。更重要的是，如果一開始基於Agent進程進行開發，后續很難平滑的過渡到分布式場景。因此，egg-born-backend采用Redis，從框架底層就開始原生分布式的架構設計，並衍生出了Broadcast、Queue、Schedule、Startup等一系列分布式的開發組件，方便我們從一開始就進行分布式的開發。因此當系統起量后，可以輕松做集群擴展，參見：Broadcast, Queue, Schedule, Startup
5. 第五層：EggBornJS
egg-born-front和egg-born-backend，再加上一些周邊工具，共同構成了EggBornJS，也就是CabloyJS研發歷程的第一階段
6. 第六層：CabloyJS
CabloyJS在EggBornJS的基礎上，研發了一套核心全局模塊，實現了一系列業務支撐特性，並將這些特性進行有機的組合，形成完整而靈活的上層生態架構，從而支持具體的業務開發進程
7. 第七層：Project（項目）
實際的項目由全局模塊和局部模塊構成
全局模塊：CabloyJS內置的核心模塊、來自NPM倉庫或者模塊市場的第三方模塊，統稱為全局模塊，一般安裝在node_modules目錄局部模塊：項目實際的開發工作一般在局部模塊中展開。局部模塊位於項目目錄內，參見：新建模塊
信念
凡是可以用JavaScript來寫的應用，最終都會用JavaScript來寫 | Atwood定律
相信，Javascript的深度探索者都會被這句名言激發，共同努力，為Javascript生態添磚加瓦，構建更繁榮的應用生態
CabloyJS正是對這一名言的探索之作。歡迎您也加入CabloyJS的社區生態，一起促進Javascript的繁榮與應用
名稱的由來
1. EggBorn
這個名稱的由來比較簡單，因為有了Egg(后端框架)，所以就有了EggBorn。有一部動畫片叫《天書奇譚》，里面的萌主就叫“蛋生”，我很喜歡看（不小心暴露了年齡😅）
2. Cabloy
Cabloy來自藍精靈的魔法咒語，拼對了Cabloy這個單詞就會有神奇的效果。同樣，CabloyJS是有關化學的魔法，基於模塊的組合與生化反應，您將實現您想要的任何東西
預覽
- 白色主題
- 暗色主題
- 風信子主題
- 燦爛主題
- 顯示側邊欄
- 移動端風格
License
MIT