English Introduction | 中文介绍
Chameleon/kəˈmiːlɪən/,also named CML for short, "变色龙" in Chinese. We named our framework Chameleon as we believe it can perfectly run on different platforms.
Offical website: CMLJS.org
- Install
- Quick start
- APIs
- Components
- Resources: libs, demo, tutorials
- Our plans
Highly consistent performance on each platform—— Highly consistent performance, no need to reference documents for each platform.
With polymorphic protocol you can easily organize your platform specified code.
Web | WeChat Mini Program | Native-weex | Baidu Smart Program | AliPay Mini Program |
---|---|---|---|---|
The goal that our tech team are pursuing when we develop our APP pages is achieving high performance close to native APP and keeping the flexibilities that we have in H5 pages at the same time. As platform entires, such as mobile APP, WeChat Mini Program, AliPay Mini Program, Baidu Smart Program, Quick APP, continue to grow up, it has multiplied the cost of development and maintenance for implementing one single feature. So we urgently need a framework that can write once and come out with codes that can run over all platforms. After tweenty months' hard work, we finally be able to pulish our multi-paltform development framework "Chameleon" and truely focused on build a multi-platform apps with a single codebase.
The most basic concepts in software architecture design are "dividing" and "merging". "dividing" means "divide and resolve", which is dividing a complex issue into some small problems that we can solve easily. The design of Micro-service Architecture Pattern in back-end is a good example of this "dividing" concept. The meaning of "merging" is to make all similar business logics into one single module to achieve a high efficiency and high quality system, such as the design of "Middle service" in back-end business system.
Chameleon belongs to the latter, and by defining an unified language framework plus an unified polymorphic protocol , it can essentially extract a self-contained, continuous and maintainable "front-end middle service" from business logics related to multiple platforms.
Although different platforms vary in their basic implementations, their fundamental structure still remains the same: MVVM architectural pattern. The ultimate goal of Chameleon is to unify all MVVM-like frameworks..
As all web developers know, a web page is a combination of HTML, CSS and JS. Our framwork Chameleon will fellow the pattern and still use CML + CMSS + JS.
JS is used to implement business logic. Comparing with normal web develop workflow, Our framework has a standed MVVM framework, an entire lifecycle, watch property, computed property, two-way data-binding and other awesome features which can improve our development efficiency and reduce maintenance costs.
CML Chameleon Markup Language is used to describe web structures. Just like HTML has a standed set semantic tags, such as <span>
and <button>
, CML also has a set of "tags" which we call them Components
. CML has provided some basic components that are released with our frameworkComponents. Additionally, CML also supports template syntax. For example, we have conditional rendering, list rendering and data binding, etc. Except that, we support Vue-like directives, so you can get started faster.
CMSS(Chameleon Style Sheets) CMSS is used to provide styles for CML pages, and it has most properties that css has, and it supports less
and stylus
.
That's all you need to get stated with Chameleon, we believe as long as you have experiences with web development you will be able to use Chameleon in no time.
Chameleon provided lots of components that you can used to build your own CML pages, we have built-in components such as button switch radio checkbox
, and also some extended components c-picker c-dialog c-loading
, etc. They basiclly covered all the most used components that you want.
Chameleon provided all those apis in npm package named chameleon-api
, it includes apis for web requests, data storage, location services, system information interfaces and animations, etc.
Based on Chameleon's powerful polymorphic protocol, you could extend any apis and components as you want, no need to rely on framework's updates. You can even use some native components that you already have in your previous projects by importing them with polymorphic protocol.
With our smart syntax checker, you will get an tip when there is an syntax error in your IDE. So you don't have to debug CML codes for each single platform, and you can also check out command window for these error reports in text format.
If you want to integrate some multi-platform codes in your projects and you don't want to refactor your projects, you can develop a polymorphic component and imported it directly into your own projects.
Chameleon is not only just a solution for multi-platform development, it also absorbed the most useful engineering design accumulated over the years in the industy. Based on the excellent front-end packaging tool Webpack, Chameleon has a set of clis to help you in the whole workflow from develop, debug, test and publish.