"Open Source Selection" is a column where we share high-quality projects in open source communities such as Github and Gitee, including technology, learning, practical and various interesting content. This issue recommends an open-source unified solution for small programs across ends. ——chameleon。
R&D students pursue both the flexibility of h5 and the performance of the native in the end. In the face of entrance expansion, App clients, WeChat Mini Programs, Alipay Mini Programs, Baidu Mini Programs, Android Manufacturer Alliance Fast Applications, and other mini programs, single functions must be repeatedly implemented on various platforms, and the development and maintenance costs are multiplied. Desperate to maintain a set of code to build a multi-entry solution, Didi cross-end solution Chameleon was finally released. Really focus on making a set of code run multi-terminal.
Features
High development efficiency: original and powerful cross-multi-terminal syntax checking function, with the best engineering design in the industry
Good maintainability: original polymorphic protocol; easy maintenance of a set of code to achieve cross-multi-end
Progressive access: one-click export of native components; no pollution referencing native components
Strong extensibility: Based on polymorphic protocols, any underlying interface can be extended; it does not rely heavily on the update of the framework
Rich base libraries: Unified CML Native SDK; rich component and API libraries
Multi-terminal high consistency: unified code, interface interaction, development process; high degree of unity at multiple levels
Design concept
The most basic concepts in the software architecture design are "splitting" and "merging", the meaning of the split is "divide and rule", the complex problem is split into a single problem to solve, such as the "microservice" design of the back-end business system; the meaning of "merger" is to abstract the same business requirements into a piece to achieve high-efficiency and high-quality purposes, such as the "middle office service" design in the back-end business system.
Chameleon belongs to the latter, through the definition of a unified language framework + unified polymorphic protocol, from the multi-terminal (corresponding to multiple independent services) business to extract self-contained, strong continuity, strong maintainable "front-end middle office services".
CML is multi-terminal
Supported platforms: web, WeChat Mini Program, Alipay Mini Program, Baidu Mini Program, Android (Weex), ios (weex), qq Mini Program, ByteDance Mini Program, Fast Application, continuous update
Cross-end targets
Although the environment at all ends is ever-changing, the MVVM architecture is the same, and Chameleon aims to unify the MVVM cross-end environment.
Installation
Dependent environment
依赖环境：node >= 8.10.0、npm >= 5.6.0 Install the chameleon-tool
It is recommended to use nvm to manage node versions, and it is not supported to use yarn, cnpm, etc. for installation.
npm i -g chameleon-tool After the installation is successful, execute cml -v to view the current version and cml -h to view the help documentation.
Create a project with Startup
- Execute the cml init project
- Enter a project name
- Wait for the npm install dependency to be executed automatically
- Switch to the project root directory to perform cml dev
- The preview interface will open automatically The preview interface is as follows:
Directory and file structure
├── chameleon.config.js // 项目的配置文件
├── dist // 打包产出目录
├── alipay // 支付宝小程序代码
├── baidu // 百度小程序代码
├── wx // 微信小程序代码
├── tt // 头条小程序代码
├── qq // QQ小程序代码
├── xx // 其他终端
├── mock // 模拟数据目录
├── node_modules // npm包依赖
├── package.json
└── src // 项目源代码
├── app // app启动入口
├── components // 组件文件夹
├── pages // 页面文件夹
├── router.config.json // 路由配置
└── store // 全局状态管理 Editor plugin
- idea、WebStorm 插件 CML Language Support
- VS Code plugin cml
- Atom plugin language-cml
- Sublime plugin review, stay tuned...
Code example
<template>
<view>
<text>{{title}}</text><text>{{reversedTitle}}</text>
</view>
</template>
<script>
class Index {
data = {
title: "chameleon"
}
computed = {
reversedTitle: function () {
return this.title.split('').reverse().join('')
}
}
mounted() {}
destroyed() {}
}
export default new Index();
</script> People who have worked in web programming know that web programming uses a combination of HTML + CSS + JS, and it is the same reason that CML + CMSS + JS is used in chameleon.
- JS syntax is used to deal with the logical layer of the page, compared with ordinary web programming, this project aims to define a standard MVVM framework, with a complete life cycle, watch, computed, data two-way binding and other excellent features, can quickly improve the development speed, reduce maintenance costs.
- CML (Chameleon Markup Language) is used to describe the structure of a page, and we know that HTML is a standard set of semantic tags, such as the text is<span> button is<button>. CML also has a standard set of labels, which we define as components, and CML provides users with a range of components. Template syntax, such as conditional rendering, list rendering, data binding, and so on, is also supported in the CML. At the same time, CML supports the use of VUE-like syntax, allowing you to get started faster.
- CMSS (Chameleon Style Sheets) is a style language used to describe the structure of CML pages, which has most of the characteristics of CSS, and can also support the preset languageless stylus of various css.
- CML adopts a componentization scheme consistent with Vue, single-file organization, life cycle, data responsiveness alignment Vue, data management capabilities aligned with Vuex, very convenient for developers to get started and maintain.
Through the above introduction to the development language, I believe you can see that anyone who has knowledge of web programming can quickly get started with the development of chameleon.
—END—
Open source protocol: Apache-2.0
Open source address: https://github.com/didi/chameleon