滴滴開(kāi)源跨平臺(tái)統(tǒng)一 MVVM 框架 Chameleon
近日，滴滴在 GitHub 上開(kāi)源了跨端解決方案 Chameleon，簡(jiǎn)寫(xiě) CML，中文名卡梅龍；中文意思變色龍，意味著就像變色龍一樣能適應(yīng)不同環(huán)境的跨端整體解決方案，具有易用、開(kāi)發(fā)快、高性能等特點(diǎn)。下文將詳細(xì)介紹 Chameleon 項(xiàng)目的研發(fā)背景和性能特點(diǎn)。
背景
研發(fā)同學(xué)在端內(nèi)既追求 h5 的靈活性，也要追求性能趨近于原生。 面對(duì)入口擴(kuò)張，主端、獨(dú)立端、微信小程序、支付寶小程序、百度小程序、Android 廠商聯(lián)盟快應(yīng)用，單一功能在各平臺(tái)都要重復(fù)實(shí)現(xiàn)，開(kāi)發(fā)和維護(hù)成本成倍增加。迫切需要維護(hù)一套代碼可以構(gòu)建多入口的解決方案，歷經(jīng)近 20 個(gè)月打磨，滴滴跨端解決方案 Chameleon 終于發(fā)布，真正專(zhuān)注于讓一套代碼運(yùn)行多端。
設(shè)計(jì)理念
軟件架構(gòu)設(shè)計(jì)里面最基礎(chǔ)的概念“拆分”和“合并”，拆分的意義是“分而治之”，將復(fù)雜問(wèn)題拆分成單一問(wèn)題解決，比如后端業(yè)務(wù)系統(tǒng)的”微服務(wù)化“設(shè)計(jì)；“合并”的意義是將同樣的業(yè)務(wù)需求抽象收斂到一塊，達(dá)成高效率高質(zhì)量的目的，例如后端業(yè)務(wù)系統(tǒng)中的“中臺(tái)服務(wù)”設(shè)計(jì)。
而 Chameleon 屬于后者，通過(guò)定義統(tǒng)一的語(yǔ)言框架 + 統(tǒng)一多態(tài)協(xié)議，從多端（對(duì)應(yīng)多個(gè)獨(dú)立服務(wù)）業(yè)務(wù)中抽離出自成體系、連續(xù)性強(qiáng)、可維護(hù)強(qiáng)的“前端中臺(tái)服務(wù)”。
跨端目標(biāo)
雖然不同各端環(huán)境千變?nèi)f化，但萬(wàn)變不離其宗的是 MVVM 架構(gòu)思想，Chameleon 目標(biāo)是讓 MVVM 跨端環(huán)境大統(tǒng)一。
學(xué)習(xí)全景圖
從事過(guò)網(wǎng)頁(yè)編程的人知道，網(wǎng)頁(yè)編程采用的是 HTML + CSS + JS 這樣的組合，同樣道理，chameleon 中采用的是 CML + CMSS + JS。
JS 語(yǔ)法用于處理頁(yè)面的邏輯層，與普通網(wǎng)頁(yè)編程相比，本項(xiàng)目目標(biāo)定義標(biāo)準(zhǔn) MVVM 框架，擁有完整的生命周期，watch，computed，數(shù)據(jù)雙向綁定等優(yōu)秀的特性，能夠快速提高開(kāi)發(fā)速度、降低維護(hù)成本。
CML（Chameleon Markup Language）用于描述頁(yè)面的結(jié)構(gòu)，我們知道 HTML 是有一套標(biāo)準(zhǔn)的語(yǔ)義化標(biāo)簽，例如文本是<span> 按鈕是<button>。CML 同樣具有一套標(biāo)準(zhǔn)的標(biāo)簽，我們將標(biāo)簽定義為組件，CML 為用戶(hù)提供了一系列組件。同時(shí) CML 中還支持模板語(yǔ)法，例如條件渲染、列表渲染，數(shù)據(jù)綁定等等。同時(shí)，CML 支持使用類(lèi) VUE 語(yǔ)法，讓你更快入手。
CMSS(Chameleon Style Sheets) 用于描述 CML 頁(yè)面結(jié)構(gòu)的樣式語(yǔ)言，其具有大部分 CSS 的特性，并且還可以支持各種 css 的預(yù)處語(yǔ)言 less stylus。
通過(guò)以上對(duì)于開(kāi)發(fā)語(yǔ)言的介紹，相信你看到只要是有過(guò)網(wǎng)頁(yè)編程知識(shí)的人都可以快速的上手 chameleon 的開(kāi)發(fā)。
豐富的組件
在用 CML 寫(xiě)頁(yè)面時(shí)，chameleon 提供了豐富的組件供開(kāi)發(fā)者使用，內(nèi)置的有 button switch radio checkbox 等組件，擴(kuò)展的有 c-picker c-dialog c-loading 等等，覆蓋了開(kāi)發(fā)工作中常用的組件。
詳情請(qǐng)查看：
https://cmljs.org/doc/component/component.html
豐富的 API
為了方便開(kāi)發(fā)者的高效開(kāi)發(fā)，chameleon 提供了豐富的 API 庫(kù)，發(fā)布為 npm 包 chameleon-api，里面包括了網(wǎng)絡(luò)請(qǐng)求、數(shù)據(jù)存儲(chǔ)、地理位置、系統(tǒng)信息、動(dòng)畫(huà)等方法。
詳情請(qǐng)查看：
https://cmljs.org/doc/api/api.html
自由定制 API 和組件
基于強(qiáng)大的多態(tài)協(xié)議，可自由擴(kuò)展任意 API 和組件，不強(qiáng)依賴(lài)框架的更新。各端原始項(xiàng)目中已積累大量組件，也能直接引入到跨端項(xiàng)目中使用。
智能規(guī)范校驗(yàn)
代碼規(guī)范校驗(yàn)，當(dāng)出現(xiàn)不符合規(guī)范要求的代碼時(shí)，編輯器會(huì)展示智能提示，不用挨個(gè)調(diào)試各端代碼，同時(shí)命令行啟動(dòng)窗口也會(huì)提示代碼的錯(cuò)誤位置。
詳情請(qǐng)查看：
https://cmljs.org/doc/framework/linter.html
漸進(jìn)式跨端
很多人已經(jīng)開(kāi)發(fā)小程序了，又不愿意大多闊斧重新改造，也希望使用 CML？當(dāng)然可以，2 種方式使用 CML：
先進(jìn)前端開(kāi)發(fā)體驗(yàn)
Chameleon 不僅僅是跨端解決方案。基于優(yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來(lái)積累的最有用的工程化設(shè)計(jì)，提供了前端基礎(chǔ)開(kāi)發(fā)腳手架命令工具，幫助端開(kāi)發(fā)者從開(kāi)發(fā)、聯(lián)調(diào)、測(cè)試、上線等全流程高效的完成業(yè)務(wù)開(kāi)發(fā)。
-
框架：Chameleon 不僅僅是跨端解決方案，讓開(kāi)發(fā)者高效、低成本開(kāi)發(fā)多端原生應(yīng)用。基于優(yōu)秀的前端打包工具 Webpack，吸收了業(yè)內(nèi)多年來(lái)積累的最有用的工程化設(shè)計(jì)，提供了前端基礎(chǔ)開(kāi)發(fā)腳手架命令工具，幫助端開(kāi)發(fā)者從開(kāi)發(fā)、聯(lián)調(diào)、測(cè)試、上線等全流程高效的完成業(yè)務(wù)開(kāi)發(fā)。框架提供了自己的視圖層描述語(yǔ)言 CML 和 CMSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，讓開(kāi)發(fā)者能夠?qū)Ｗ⒂跀?shù)據(jù)與邏輯。
-
腳手架工具：基于 node 開(kāi)發(fā)的腳手架工具，提供簡(jiǎn)潔的命令，進(jìn)行初始化與構(gòu)建項(xiàng)目。
-
目錄結(jié)構(gòu)：提供規(guī)范化的項(xiàng)目結(jié)構(gòu)，適合于企業(yè)級(jí)大型應(yīng)用的開(kāi)發(fā)，CML 單文件組件的開(kāi)發(fā)模式更有利于提高開(kāi)發(fā)效率與優(yōu)化文件組織結(jié)構(gòu)。
-
視圖層與邏輯層：視圖層由 CML 與 CMSS 編寫(xiě)，邏輯層由 JS 編寫(xiě)，chameleon 的核心是一個(gè)標(biāo)準(zhǔn)響應(yīng)式數(shù)據(jù)驅(qū)動(dòng)視圖更新的 MVVM 框架。
-
多態(tài)協(xié)議：提供了跨端時(shí)各端底層組件與接口統(tǒng)一的解決方案，使開(kāi)發(fā)者可以自由擴(kuò)展原生 api 與組件。
-
規(guī)范校驗(yàn)：為了提高開(kāi)發(fā)的效率與代碼的可維護(hù)性，chameleon 提供了全面的代碼規(guī)范與校驗(yàn)，幫助開(kāi)發(fā)者能夠得到更好的開(kāi)發(fā)體驗(yàn)。
后續(xù)規(guī)劃
有關(guān)安裝、使用過(guò)程以及常見(jiàn)問(wèn)題解答，請(qǐng)查看以下鏈接：
-
chameleon 官網(wǎng)：cmljs.org/
