## **Preface** Through the architecture design of frontend & backend separation, only one set of codes is needed to support the cross-platform development, including backend management system and frontend applications CabloyJS full stack framework supports `cross-platform` and `cross-end` development through the architecture design of frontend & backend separation, so: 1. Only one set of codes is needed to realize the admin management system at backend and the applications at frontend at the same time 2. Only one set of codes is needed to adapt to PC and mobile at the same time, and the mobile is close to the native experience ## 1\. Demo Online: Example of large project To cope with the development of large projects, CabloyJS provides troika: `Suite`, `Module` and `App`. `Suites` and `Modules` are used to organize source codes, and `Apps` are used to organize interface layout * See Also: [Suite](https://cabloy.com/articles/suite-basic.html), [Module](https://cabloy.com/articles/module-create.html), [App](https://cabloy.com/articles/app-introduce.html) | **Application** | **Application Type** | **PC** | **Mobile** | |:---|----|:---|:---| | large project (multi-suite, multi-module, multi-app) | 2B: Backend management system | | ![test演示](https://portal.cabloy.com/api/a/file/file/download/6914326ee0a64d97b2c6f317356f863e.png) | | Account Type | Username | Password | |----|----|----| | Admin User | admin | 123456 | | Normal User | tom | 123456 | | Normal User | jane | 123456 | ## 2\. Official System: CabloyJS Official Services All services officially provided by CabloyJS are developed and implemented using the CabloyJS full stack framework > Important thing, it is necessary to emphasize again: all the following demonstrations are implemented through one set of codes | **Application** | **Application Type** | **PC** | **Mobile** | |:---|----|:---|:---| | Backend management System | 2B: Backend management system | | ![cabloy-admin-qrcode](https://portal.cabloy.com/api/a/file/file/download/28cda3b0dcd54b69b20452f6b95ef73d.png) | | Blog | 2C: Static output, SEO optimization | | ![zhennann.com](https://portal.cabloy.com/api/a/file/file/download/df5965a54874446b9b8f3a4765a1efd9.png) | | Technical Docs(English) | 2C: Static output, SEO optimization | | ![cabloy.com:index.html](https://portal.cabloy.com/api/a/file/file/download/b459ccefc7c84d2ba5b0ab922a3ad7fe.png) | | Technical Docs(Chinese) | 2C: Static output, SEO optimization | | ![https-::cabloy.com:zh-cn:index.html](https://portal.cabloy.com/api/a/file/file/download/d4b4f1e3ca004295b88735125555eb9c.png) | | Community(English) | 2C: Static output, SEO optimization | | ![https-::community.cabloy.com:index.html](https://portal.cabloy.com/api/a/file/file/download/2f4ebd338f7b46a19d1eefd81aa6bc2b.png) | | Community(Chinese) | 2C: Static output, SEO optimization | | ![https-::community.cabloy.com:zh-cn:index.html](https://portal.cabloy.com/api/a/file/file/download/ea67e99a9c184cdf9b0cda98926adb3e.png) | | Courses(English) | 2C: Static output, SEO optimization | | ![https-::course.cabloy.com:index.html](https://portal.cabloy.com/api/a/file/file/download/04b4230f4ab04e47b58cefda1952c3d8.png) | | Courses(Chinese) | 2C: Static output, SEO optimization | | ![https-::course.cabloy.com:zh-cn:index.html](https://portal.cabloy.com/api/a/file/file/download/730580a8c6b14d7ab662d9e40dcbca3d.png) | | Cabloy Store(English) | 2C: Static output, SEO optimization | | ![https-::store.cabloy.com:index.html](https://portal.cabloy.com/api/a/file/file/download/6ab0e2a9dfd54a31b4f6a91d0373001d.png) | | Cabloy Store(Chinese) | 2C: Static output, SEO optimization | | ![https-::store.cabloy.com:zh-cn:index.html](https://portal.cabloy.com/api/a/file/file/download/67c1b3320928458fb5793ce6c1c5c773.png) | ## 3\. Demo Online: Wechat/Mobile Ordering Together CabloyJS has officially crafted a suite of `WeChat/Mobile Ordering Together` to demonstrate how to simultaneously implement the backend merchant management application and the frontend WeChat/Mobile ordering application through one set of codes, and each application is perfectly compatible with the PC and Mobile * Suite Source Codes, See Also: [bz-diancai(Wechat/Mobile Ordering Together)](https://store.cabloy.com/articles/bz-diancai.html) * Videos, See Also: [微信一起点菜项目进度复盘](https://course.cabloy.com/zh-cn/articles/B-001.html) (Translation Wanted) | **Application** | Application Type | **PC** | **Mobile** | |:---|----|:---|:---| | merchant management | 2B: Backend management system | | ![微信点菜管理应用](https://portal.cabloy.com/api/a/file/file/download/7f102b9109b5450b91aa2bdd8e4a575a.png) | | WeChat/Mobile ordering together | 2C: Frontend application | | ![微信点菜点菜应用](https://portal.cabloy.com/api/a/file/file/download/28f20865a44f40f0a19ba2e4d189385a.png) | | Account Type | Username | Password | |----|----|----| | Admin User | admin | 123456 | | Normal User | tom | 123456 | | Normal User | jane | 123456 | ## Supported platforms of CabloyJS | **Platform** | **Frontend** | **Backend** | |:---|:---|:---| | PC: Web | CabloyJS Frontend | CabloyJS Backend | | PC: Exe | CabloyJS Frontend + Electron | CabloyJS Backend | | Mobile: IOS | CabloyJS Frontend + Cordova | CabloyJS Backend | | Mobile: Android | CabloyJS Frontend + Cordova | CabloyJS Backend | | Slack | CabloyJS Frontend + Slack API | CabloyJS Backend | | Wechat | CabloyJS Frontend + Wechat API | CabloyJS Backend | | Wechat Enterprise | CabloyJS Frontend + Wechat API | CabloyJS Backend | | DingTalk | CabloyJS Frontend + DingTalk API | CabloyJS Backend | * Backend: Because of the complete `frontend and backend separation`, only one set of CabloyJS backend code should be developed * Frontend: All scenarios that can be based on H5 need only develop one set of CabloyJS frontend code ## Supported application types of CabloyJS 1. Multi-tenant `SAAS` business system can be developed 2. Backend business management system can be developed, such as OA, CRM, ERP, e-commerce, etc. 3. `CMS` content management system with `JAMStack` architecture can be developed to support SEO optimization, such as blogs, technical documents, communities, knowledge stores, etc. 4. You can first develop the backend business management system, and then extend the development of `CMS` content management system; Alternatively, the `CMS` content management system can be developed first, and then the backend business management system can be extended 5. Various App applications can be developed through `Cordova` to support IOS and Android 6. You can develop desktop applications through `Electron` 7. ……