Chameleon/kə ːlɪ n/, short for CML, Chinese name Kamel long; The Chinese word chameleon means a cross-end holistic solution that can adapt to different environments just like a chameleon.

The document

Host: CMLJS.org

background

The r&d students pursue both the flexibility of H5 in the end, and the performance close to the original. In the face of entrance expansion, main end, independent end, wechat small program, Alipay small program, Baidu small program, Android manufacturers alliance fast application, single function in each platform have to be repeated, development and maintenance costs have increased exponentially. The urgent need to maintain a code that can build a multi-entry solution, after nearly 20 months of work, Didi’s cross-end solution Chameleon has finally been released. Really focus on making one set of code run multiple times.

Design concept

The most basic concepts in software architecture design are “split” and “merge”. The meaning of split is “divide and conquer”. Complex problems are divided into single problems to solve, such as the “microservitization” design of back-end business system. The meaning of “merging” is to abstract and converge the same business requirements together to achieve the purpose of high efficiency and high quality, for example, the design of “middle-stage service” in back-end business system.

Chameleon belongs to the latter. By defining a unified language framework + unified polymorphic protocol, Chameleon separates the multi-terminal (corresponding to multiple independent services) business from the self-developed, continuous and maintainable “front-end mid-platform service”.

Across the end goal

Although there is a great deal of variation between different end environments, what remains the same is the idea of MVVM architecture. Chameleon aims to unify MVVM across end environments.

Learn the panorama

Development of language

Those of you who have done web programming know that web programming uses a combination of HTML + CSS + JS, in the same way that Chameleon uses CML + CMSS + JS.

JS syntax is used to process the logical layer of the page. Compared with common web programming, this project aims to define a standard MVVM framework with complete life cycle, excellent features such as Watch, computed and two-way data binding, which can rapidly improve the development speed and reduce the maintenance cost.

CML (Chameleon Markup Language) is used to describe the structure of a page. We know that HTML is a standard set of semantic tags, such as for text and

CMSS(Chameleon Style Sheets) is a Style language used to describe the structure of CML pages. It has most CSS features and supports less Stylus, a preformatting language for various CSS.

From the above introduction to the development language, I believe you can see that as long as there is a web programming knowledge of Chameleon can quickly get started.

Rich components

When using CML to write pages, Chameleon provides rich components for developers to use, including built-in components such as Button Switch Radio Checkbox, and extended components such as C-picker, C-dialog, c-loading, covering common components in development work.

Rich API

In order to facilitate the efficient development of developers, Chameleon provides a rich API library, published as the NPM package Chameleon-API, which includes network request, data storage, location, system information, animation and other methods.

Freely customize apis and components

Based on the powerful polymorphic protocol, can freely extend any API and components, not strongly dependent on the update of the framework. A large number of components have accumulated in the original project at each end and can be directly imported for use in cross-end projects.

Intelligent specification check

Code specification verification, when the code does not meet the requirements of the specification, the editor will display intelligent prompt, do not have to debug each end of the code, at the same time, the command line start window will prompt the wrong location of the code.

Progressive span

In order to have a set of code that runs multiple functions without having to refactor a project aggressively, you can develop multi-purpose components in Chameleon and call them directly from the original project.

Advanced front-end development experience

Chameleon is more than just a cross-end solution. Based on the excellent front-end packaging tool Webpack, it absorbs the most useful engineering design accumulated over the years in the industry and provides the front-end basic development scaffold command tool to help end developers efficiently complete business development from the whole process of development, joint adjustment, testing, on-line and so on.

Contact us

[email protected]

Wechat & QQ communication group

WeChat


QQ