重磅！滴滴跨端框架Chameleon 1.0正式釋出

滴滴在 GitHub 上開源的跨端解決方案 Chameleon（簡寫 CML）正式釋出 1.0 版本，中文名卡梅龍；中文意思變色龍，意味著就像變色龍一樣能適應不同環境的企業級跨端整體解決方案，具有易用、輕量、面向未來等特點。下文將詳細介紹 Chameleon 專案的研發背景和效能特點。

世界上最快樂的事，莫過於為理想而奮鬥。—— 蘇格拉底

歷時 3 年的研發和實踐，數十名團隊成員的努力，數百名業界參與者的共建，數千次的改進優化，終於迎來了跨端解決方案 CML1.0 正式版。

目錄

• 前言
• 全新：首個 MVVM+ 跨端標準協議
• 全面：支援所有小程式生態
• 細節：跨端一致性與定製性
  • 一致性
  • 定製性
• 效能：極致體驗
  • 包體積優化
  • 小程式端效能優化
• 豐富：生態化建設完善
  • c-design 元件庫
  • light-ui 元件庫
  • chameleon-ui-miniapp 元件庫
  • 生態規劃
• 工程化：全方位能力加持
  • 現代化"連結"管理
  • Native 端的優化策略
  • 編輯器外掛
  • 強大的語法檢查
• 友好：漸進式接入
  • CML 元件匯入與匯出
  • 原有專案整合 CML 跨端方案
• 藍圖：未來規劃
  • 端品類擴充套件
  • CML for DoKit
  • X-Editor 編輯器
  • CML 雲開發平臺 && serverless
• 特別感謝對開源的貢獻
• CML1.0 活動

前言

chameleon（簡寫 CML ）是一款真正專注於讓一套程式碼執行多端的跨端框架，擁有業內先進的工程化設計，豐富的基礎庫，獨創多型協議，提供標準的 MVVM 架構開發模式統一各類終端。

一經開源，CML 備受業界關注，長期佔領 github tending 榜單，開發理念和框架設計得到了廣泛開發者的認可。

但由於對部分細節缺乏充分思考，導致開源期間受到一些質疑。為此，我們深入調研業內的跨端框架，積極接納開源社群的建議，經過 6 個月 180 次開發迭代，腳手架 tool 累計釋出 70+ 日常版本，5090 次程式碼 commit；執行時框架 runtime 累計釋出 40+ 日常版本，900 次程式碼 commit；Github issues 解決率達 83%，單測覆蓋率超過85%，PR 次數 70+ ，CML 的穩定性和功能有了質的飛躍。所以，我們有信心釋出全新穩定的1.0版本，新增的特性主要包含：

• 端品類擴充套件

  • 首次提出 MVVM+跨端擴充套件標準協議，提供開發者擴充套件新端的能力
  • 全面支援業內所有平臺小程式（微信、支付寶、百度、頭條、qq）、H5 和客戶端
  • 多型協議過載能力
  • 提供漸進式接入能力，支援匯入匯出各端元件

• 易用性加強

  • 更加豐富的 DSL 模板語法，支援 50% 以上的 vue 模板語法能力，
  • 提供編輯器外掛 —— vscode外掛，支援語法高亮、指令補全等等
  • 全面語法檢查，覆蓋程度達93%

• 框架優化

  • 多端介面一致性增強，基礎樣式自由配置
  • 包體積優化，較最初版本減少近 40% 體積
  • 支援 mock 多域名請求
  • 新增支援生命週期多型、樣式多型
  • 支援 mixins 能力
  • 支援事件冒泡
  • 動態元件支援事件
  • 頁面生命週期支援 onShow、onHide
  • 小程式 setData 優化

• 端能力擴充套件

  • 支援微信小程式 wxs、支付寶小程式 sjs、百度小程式 filter.js
  • 支援小程式分包載入
  • 新增原生能力的支援，包括自定義 tabbar等

• 元件擴充套件

  • 新增更多跨端元件和介面，包括 richtext、audio 等等
  • 即將釋出更豐富的元件庫：c-design、light-ui、chameleon-ui-miniapp

關於被吐槽“通用性”犧牲了“豐富性”：CML 被反饋最多的問題是小程式元件豐富度不夠，雖然提供跨所有端的元件和 API 功能，但沒有封裝部分小程式特有定製化能力，所以，我們即將釋出chameleon-ui-miniapp和chameleon-api-miniapp，只為各類小程式服務，全面支援各類小程式元件和介面，同時使用者可以基於多型協議的過載能力定製其他端（例如 web 和 weex）的功能實現，期望能兼顧元件豐富度和統一性。

事實上，CML 已在滴滴眾多業務產品中實踐驗證(青桔單車、滴滴代駕、泊車、滴滴統一登入 passport、收銀臺、司機端、企業級、國際化)，越來越多的外部團隊開始基於 CML 開發跨端專案(百度視訊小程式、百度首創新房通、滴滴青桔單車、芒果 TV 視訊、老爸評測商城)。感謝所有開發者對 CML 的信任，在 beta 版本時使用。

全新：首個 MVVM+ 跨端標準協議

CML 基於對跨端工作的積累，規範了一套跨端標準，稱之為 MVVM+協議。

基於 MVVM+ 跨端標準協議，你可以自由擴充套件新端，快速支援任意 MVVM 架構模式的終端，如淘寶小程式、React Native 等等，具體參考：cmljs.org/doc/extend/…

你只需要基於 CML 開發專案，就可以讓已有專案無縫執行新端，再也不用學習新平臺框架啦！

以不變（專案程式碼）應萬變（多端），從“各自為政”到真正大統一。

得益於多型協議中對各層程式碼進行了介面的定義，CML 能夠實現標準化的擴充套件新端.

對上圖各層定義如下：

• API 介面協議（Library)：定義基礎介面能力標準
• 內建元件協議（Library)：定義基礎 Ui 元件標準
• 框架協議（Framework)：定義生命週期、事件、路由等框架標準
• DSL 協議（Language)：定義檢視和邏輯層的語法標準
• 多型實現協議（Interface)：定義允許使用者使用差異化能力標準

全面：支援所有小程式、H5和客戶端

CML1.0 支援了業內所有小程式平臺 ( 微信、支付寶、百度、頭條、qq )、H5和客戶端，並且，快應用官方研發團隊也正基於 MVVM+ 跨端標準協議擴充套件快應用程式，進度 100%，開發完成測試中。

特別強調的是，CML 擴充套件頭條小程式（阿里和芒果 TV）和快應用端（快應用官方團隊）完全由開源社群優秀的開發者貢獻實現。

細節：跨端一致性與定製性

CML1.0 實現了一套程式碼執行多端，並且高度一致。

一致性

一致性和差異化一直是跨端裡面的難題，CML 在這方面做了許多努力，包括生命週期的統一、事件系統、尺寸單位、佈局外觀一致、元件化方案、資料管理等等。特別強調的是，元件化和介面一致性是最容易忽視，也是最影響開發體驗的非常重要的點。

CML 的元件化方案，依託於各端原有的元件化能力，儘可能減少由於框架帶來的效能問題。

以微信和支付寶小程式為例，Exparser是微信小程式底層的元件組織框架，內建在小程式基礎庫中，為內建元件和自定義元件提供能力支援，是基於 WebComponent 的 ShadowDOM 模型實現的，高效輕量，效能很好。

各個小程式的元件化模型不一致，例如支付寶小程式元件化基於 React Web，使用上有諸多限制，包括元件無樣式作用域、資料傳遞、事件通訊等問題，CML 基於支付寶原有元件化能力，抹平與微信間的各種差異，在保證原有執行效能的情況下，實現多端一致性和提高易用性。

另一方面，通過引入了統一各端的一致性基礎樣式，解決各端呈現效果不一的問題。

同時，CML1.0 加強了跨端樣式校驗規範，在開發模式下，會嚴格檢查 CMSS 語法，只允許書寫通用的 CMSS 規則（跨 H5、各類小程式、客戶端）。

定製性

CML 既有統一性又可以定製差異化，提供了針對工程級別、專案、元件、方法、樣式等各種型別的定製化能力。

• 工程、專案定製化：cmljs.org/doc/framewo…
• 元件定製化：cmljs.org/doc/example…
• 方法定製化：cmljs.org/doc/example…
• 樣式定製化：cmljs.org/doc/view/cm…

CML 獨創的多型協議標準，可以直接使用任意端的第三方元件和方法庫，同時保證多端業務邏輯充分隔離，維護性很高。

特別強調的是 1.0 版本還支援了多型協議過載能力，可以過載某一個端的實現，基於這樣的能力我們將會推出面向各類小程式特有的元件庫，解決小程式開發者吐槽最多的小程式元件不夠豐富的問題。比如，利用多型協議過載能力，過載<share>元件在 web 端使用者的實現，提示使用者右上角分享。

我開發微信小程式時官方庫<picker>元件不夠靈活？好說，過載在微信小程式端的實現即可！！

效能：極致體驗

CML 非常重視框架的效能，在效能優化方向上做了許多工作,包括包大小、各端載入速度、執行效率等等，提供了非常好的效能體驗。

包體積優化

程式碼包大小直接影響到下載速度，從而影響使用者的首次開啟體驗。 CML 一套程式碼執行 N+ 端，可能讓人覺得框架很大，影響效能問題，CML 獨創的多型協議，貫穿整個框架，包括 Language、Framework、Library , 不僅具有很好的可維護性，而且在工程構建階段只保留一端程式碼，保障程式碼產出包足夠單純足夠小。

不僅如此，在包體積大小的優化方面，也做了許多其他工作工作，包括：

• 將公用模組進行程式碼分割，避免出現單檔案體積過大現象
• 按需載入內建元件和內建 api，大大減小包體積
• 工程層面直接支援小程式分包載入，常規的程式碼壓縮
• 工程支援把小程式圖片資源變成網路載入，配置 publicPath， 將打包出的 static/img 釋出到伺服器

微信小程式提供分包載入方案,以頁面為入口進行分包。可以優化小程式首次啟動的下載時間，以及在多團隊共同開發時可以更好的解耦協作。

CML1.0 支援小程式分包載入，你只需要通過非常簡單的配置，就可以在編譯時精準查詢資源、輸出主包、分包。具體參考：cmljs.org/doc/example…

小程式端效能優化

小程式端的渲染效能也是我們重要優化方向之一。

CML 通過接管小程式更新資料的 setData 介面，實現了一套資料響應系統，讓開發者能夠使用類 Vue 的資料響應特性，如 watch 和 computed，並且提供更便捷的方式更新資料：直接賦值，而非通過原生 setData 介面更新檢視。

事實上， setData 是小程式開發中使用最頻繁的介面，也是最容易引發效能問題的介面。

小程式是使用 WebView 作為檢視層的渲染載體，JavascriptCore 作為邏輯層的獨立執行環境。通過資料Diff 減少兩者間傳輸的資料量，可以優化效能。

在 CML 執行時框架，會對每個元件例項追蹤資料、收集依賴，在資料發生變更後，與上一次的快取資料作資料 Diff，計算出最小更新資料，再呼叫 setData 介面傳輸最小必要的資料量。

這樣，你可以對元件資料自由賦值，無需關心原生平臺介面的呼叫優化，框架會在提升開發體驗的同時，最大限度保證應用程式的效能。

豐富：生態化建設完善

CML 的生態不管元件庫、介面庫，還是編輯器外掛、除錯工具DebugKit、Xeditor 都在瘋狂迭代，持續更新。

值得強調的是元件生態圈，開源6個月來，開發者吐槽最多的 CML 元件不夠豐富的問題，如今，由 CML 官方團隊開發維護的 chameleon-ui-builtin、cml-ui、light-ui、chameleon-ui-miniapp 元件庫已經超過 60+ 元件，而且還在持續新增迭代。 另外，由普惠出行前端團隊主導合作共建的 c-design 元件庫也包含了 20+ 元件。

c-design 元件庫

C-Design 是一套基於 Chameleon 框架開發的多端 UI 元件庫,目前已經整合了多列選擇器、索引選擇器、訊息提示等12個元件

特性

• 基於 CML生態 開發的 UI 元件，提升使用者研發效率
• 無需遷移，開箱即食：元件產出 N+1 個包版本，可以在各種小程式、快應用、H5、weex等使用
• 使用簡單，配置靈活

進度與計劃

目前已經完成12個元件的開發，計劃於8月優化已完成的元件，精細打磨。

後續工作：適配需求較多的元件以及自定義主題。

以下是元件庫部分元件的簡單演示：

light-ui 元件庫

Light-ui 目標是成為一個開箱即用、多樣化配置、多端高度一致的元件庫。目前 light-ui 已提供十餘個跨端元件, 可支援開發者快速完成跨端需求的開發。

特性

• 通用基礎元件庫
• 靈活配置、多端效果統一

進度與計劃

目前已完成一期共十六個元件的開發。

後續工作：計劃於九月中旬前完成二期元件開發，同時不斷與設計師合作，打磨細節、完善互動體驗、提升元件易用性。

以下是元件庫部分元件的簡單演示：

chameleon-ui-miniapp 元件庫

chameleon-ui-miniapp 提供自由能力豐富的小程式端特有元件和 api 庫。使用者可以直接使用各類小程式統一版本的登入元件庫，同時基於多型元件的過載能力擴充套件實現，這樣既能在各類小程式使用統一登入，又能定製化 web 端等登入能力。

特性

• 基於小程式特性開發的ui元件庫
• 一套元件可執行於微信、支付寶、百度、qq小程式
• 易於擴充套件至其他小程式

進度與計劃

目前已初步完成既定元件的開發。

後續工作：完成元件文件更新，進一步優化及測試元件。

以下是元件庫部分元件的簡單演示：

生態規劃

將 CML 社群使用者群體具象分為以下等級開發者：

• 一級開發：普通使用某端元件庫的開發者
• 二級開發：某端基於 CML 執行時框架開發者，持續積累某端元件庫，哺育一級開發
• 三級開發：基於 CML 開發的使用者，持續積累多端元件庫，哺育一級、二級開發
• CML 貢獻者：共建 CML 框架，持續提升跨端體驗

對“一級開發”開放元件匯出能力，“二級開發”獨立開放各端框架入口，以及 CML “貢獻者” 開放新端擴充套件標準入口。基於一定的激勵機制，共建 CML 生態，持續轉化輸出。

工程化：全方位能力加持

得益於團隊在工程化設計上的嘗試與實踐，CML 擁有先進的工程化理念，整體開發、打包構建等流程非常高效。 CML 解決了本地開發時的各種痛點，包括提供 dev 服務、mock 資料、熱更新、自動重新整理、除錯視窗、線上資源代理等能力，大大提高本地開發效率。你可以自由引入各種 npm 依賴包，元件化開發，模組化複用，使用 ES6 特性以及 CSS 樣式預處理等等。

同時，CML 非常重視框架的穩定性，從程式碼質量、測試可靠度、語法檢查、生產環境等環節出發，提供穩定可靠的跨端解決方案。

現代化"連結"管理

CML 從工程化角度統一管理起來專案中用到的所有用於外部通訊的”連結“，包括資料請求連結（apiPrefix)、靜態檔案請求連結(publicPath)、頁面路由連結( router )、跨端統一連結( Chameleon URL)，不僅可以統一化管理”連結“資料，更可以高效使用資料模擬（mock）、線上資料代理（proxy）、CDN跨端重用和更新、跨端頁面統一下發等功能。

Native 端的優化策略

從 載入速度 和 執行速度 不同維度優化 Native 端效能，首先預載入 bundle 資源提升首次載入速度，利用快取提升二次載入速度，同時對資源採取增量更新策略。

1. 預載入是將下載 JSBundle 動作提前完成，在需要用到的時候直接從本地讀取並渲染。實際專案使用中，可以將需要預載入的 url 地址列表在app啟動時提前從服務端獲取，通過 Chameleon SDK 提供的預載入能力提前下載下來。
2. 下載完JSBundle後 Chameleon SDK 會快取此 JSBundle，下次渲染時，如果此 JSBundle 沒有更新則不會下載新的，達到節省時間和流量提升渲染速度的目的。

具體參考：cmljs.org/doc/chamele…

另一方面，計劃 CML 底層支援 Flutter，敬請期待。

MVVM+協議：

view：1. 實現 cmss for flutter，2. 實現 flutter 版本的MVVM+元件協議chameleon-ui-builtin-flutter

viewModel： 執行時（runtime）實現CML 的 DSL協議語法 chameleon-runtime

Model： 1. 直接用 dart 編寫 CML 邏輯層框架（使用者需要用 dart 寫業務程式碼），dart 可以轉 JS。2. 實現 flutter 版本的MVVM+介面協議chameleon-api

編輯器外掛

為了降低”開發一次除錯多端“的詬病，將問題提前暴露在”編輯時“，CML 釋出了多款 編輯器外掛，包括 Visual Studio Code、Atom、Webstorm 等。VScode 擴充套件應用商店中搜尋“cml”安裝即可。

目前該外掛支援了以下能力：

• 檔案關聯
• 語法高亮
• 內建、擴充套件、自定義元件及屬性補全和型別預設值提示
• 指令補全
• css、less 支援
• linter 校驗及提示
• api 補全
• 檔案 format

更多功能的支援正在開發中，後續還將支援 Sublime text 外掛，敬請期待。

強大的語法檢查

CML 實現了全面的語法檢查功能，且在持續加強。

跨端很美好，最大風險是可維護性問題。多型協議是 CML 業務層程式碼和各端底層元件和介面的分界點，CML 會嚴格“管制”輸入輸出值的型別和結構，同時會嚴格檢查業務層JS程式碼，避免直接使用某端特有的介面，不允許在公共程式碼處使用某個端特定的方法，即使這段程式碼不會執行，例如禁止使用window、wx、my、swan、weex等方法。

分為

• 目錄規範檢查
• 合法性檢查
• 邏輯規範檢查

CML for DoKit

CML DoKit專項工具是 CML團隊 與優秀的端研發工具 DoraemonKit 合作，產出的 CML 定製版Dokit，提供端SDK多種除錯功能，目前包括：

• console日誌檢視：方便在端上檢視每一個 CML 檔案中的console日誌，提供分級和搜尋功能
• storage快取檢視：將 CML 中的storage模組的本地快取資料視覺化展示
• 容器資訊：檢視每一個開啟的 CML 頁面的基本資訊和效能資料
• DevTool：快速開啟CML DevTool的掃碼入口

如下圖所示：

友好：漸進式接入

為降低原有專案遷移 CML 框架的成本，CML1.0 提供了以下兩種優雅簡潔的漸進式接入方案。

CML 元件匯入與匯出

CML1.0 能夠將 CML 元件匯出成各端元件，讓你更自由地使用 CML 。

也就是說，你可以在任意端原有專案中使用 CML 開發的元件：cmljs.org/doc/termina…

以 web 和小程式為例，在正常開發模式下，你需要維護 4 套程式碼(web、wx、alipay、baidu)。通過漸進式方案接入 CML 框架，開發 cml 通用元件，再匯出各端給原有專案使用，只需要維護一套元件程式碼，完全利用了 CML 的跨端優勢，大大降低了程式碼開發維護成本。

同時，CML1.0 藉助多型協議規範匯入各端第三方元件庫，你可以自由定製。

原有專案整合 CML 跨端方案

CML 已釋出一款 webpack plugin ———— easy-chameleon，可直接在原有專案中整合 CML 。

接入方式非常簡單，你只需要安裝 easy-chameleon，按照指引簡單配置，就能使用 CML 強大的語法和編譯能力，以及使用和開發 CML 元件。 具體接入文件參考：cmljs.org/doc/example…

藍圖：未來規劃

端品類擴充套件

基於 CML SDK 可以：

• 擴充套件更多底層介面
• 擴充套件更多 MVVM 標準終端（Flutter、React Native)

X-Editor 編輯器

XEditor 目標是成為一個能快速製作、釋出上線跨多端頁面（微信小程式、支付寶小程式、百度小程式、位元組跳動小程式、web、 快應用、native-weex）的平臺。目前 XEditor 已釋出上萬頁面。通過整合 CML 的跨端能力，減少簡單需求的開發投入，可降低多端介面開發 60% 的工作量。

完整視訊如上

備註：如果客戶端無法開啟，複製地址到瀏覽器觀看 pt-starfile.didistatic.com/static/star…

CML 雲開發平臺 && serverless

從跨端到中臺，打造統一雲服務平臺。面向中小企業，開放 CML 雲開發平臺，提供多端統一雲服務介面，如分享、支付、訊息推送。

CML1.0 活動

參與 CML1.0 活動，贏取 CML限量T恤 和 滴滴開源貢獻獎狀

你可以通過以下兩種途徑參與活動，活動截止9月08日：

• 在Github issue 活動貼發表實質性建議或想法
• 向CML pulls提交 Pull Request

獲獎規則：

• 計算總分 = 發表的建議正面點贊star數*0.3 + 回覆數*0.7，總分排序前 30 位，獲得 CML限量T恤一件（後 n 位排序一樣時由主辦方評委判斷內容價值）
• 提交 PR 被採納者 獲得 CML限量T恤一件，並且在 PR 貢獻者中評選三位，將有機會獲得由滴滴開源委員會頒發的滴滴開源貢獻獎狀！

詳情請點選：github.com/didi/chamel…

活動最終解釋權歸CML團隊所有。

非常感謝滴滴開源團隊為本次活動提供的獎品，以及對開源的大力支援~

特別感謝對開源的貢獻

CML團隊受邀參加各大公司的技術分享(58同城、快手、深圳騰訊、快應用、百度、w3c 標準會議、Oscar 開源峰會)，收到許多優秀工程師的有效建議，包括來自芒果 TV、阿里影業、快應用官方的工程師共建 CML 生態。芒果 TV 和阿里影業以及公司內普惠出行小夥伴獨立擴充套件了頭條小程式，快應用官方研發團隊獨立為 CML 擴充套件了快應用。同時，非常優秀的普惠技術泛前端團隊，正在孵化 c-design 元件庫(一期進度 70%)，以及 CML DoKit、滴滴雲 for XEditor等等。在此感謝他們~

注：排名不分先後

團隊	備註
RIDEA團隊	貢獻 CML官網設計
普惠技術泛前端	貢獻 CML for Dokit、CML for Nativejs、c-design元件庫、ts擴充套件，參與擴充套件頭條、快應用
快應用官方團隊	貢獻 CML for 快應用
芒果TV	參與貢獻 CML for 頭條小程式api
阿里影業	參與貢獻 CML for 頭條小程式runtime、ui

這次，CML 官網全新改版升級 1.0，為開發者帶來更多令人期待的新特性，敬請關注：cmljs.org/ 。