重磅！滴滴跨端框架Chameleon 1.0正式發佈

時間 2020-12-18

標籤 css html 前端 vue webpack git github web npm 小程序欄目 CSS 简体版

原文原文鏈接

重磅！滴滴跨端框架Chameleon 1.0正式發佈

做者 | Chameleon 團隊編輯 | 張之棟、Yonie滴滴在 GitHub 上開源的跨端解決方案 Chameleon（簡寫 CML）正式發佈 1.0 版本，中文名卡梅龍；中文意思變色龍，意味着就像變色龍同樣能適應不一樣環境的企業級跨端總體解決方案，具備易用、輕量、面向將來等特色。下文將詳細介紹 Chameleon 項目的研發背景和性能特色。css

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

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

前言

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

一經開源，CML 備受業界關注，長期佔領 github tending 榜單，開發理念和框架設計獲得了普遍開發者的承認。webpack

但因爲對部分細節缺少充分思考，致使開源期間受到一些質疑。爲此，咱們深刻調研業內的跨端框架，積極接納開源社區的建議，通過 6 個月 180 次開發迭代，腳手架 tool 累計發佈 70+ 平常版本，5090 次代碼 commit；運行時框架 runtime 累計發佈 40+ 平常版本，900 次代碼 commit；Github issues 解決率達 83%，單測覆蓋率超過 85%，PR 次數 70+ ，CML 的穩定性和功能有了質的飛躍。因此，咱們有信心發佈全新穩定的 1.0 版本，新增的特性主要包含：

端品類擴展
- 首次提出 MVVM+ 跨端擴展標準協議，提供開發者擴展新端的能力。
- 全面支持業內全部平臺小程序（微信、支付寶、百度、頭條、qq）。
- 多態協議重載能力。
- 提供漸進式接入能力，支持導入導出各端組件。
易用性增強
- 更加豐富的 DSL 模板語法，支持 50% 以上的 vue 模板語法能力。
- 提供編輯器插件 —— vscode 插件，支持語法高亮、指令補全等等。
- 全面語法檢查，覆蓋程度達 93%。
框架優化
- 多端界面一致性加強，基礎樣式自由配置。
- 包體積優化，較最第一版本減小近 40% 體積。
- 支持 mock 多域名請求。
- 新增支持生命週期多態、樣式多態。
- 支持 mixins 能力。
- 支持事件冒泡。
- 動態組件支持事件。
- 頁面生命週期支持 onShow、onHide。
- 小程序 setData 優化。git
端能力擴展
- 支持微信小程序 wxs、支付寶小程序 sjs、百度小程序 filter.js。
- 支持小程序分包加載。
- 新增原生能力的支持，包括自定義 tabbar 等。
組件擴展
- 新增更多跨端組件和接口，包括 richtext、audio 等等。
- 即將發佈更豐富的組件庫：c-design、light-ui、chameleon-ui-miniapp。github

關於被吐槽「通用性」犧牲了「豐富性」：CML 被反饋最多的問題是小程序組件豐富度不夠，雖然提供跨全部端的組件和 API 功能，但沒有封裝部分小程序特有定製化能力，因此，咱們即將發佈chameleon-ui-miniapp和chameleon-api-miniapp，只爲各種小程序服務，全面支持各種小程序組件和接口，同時用戶能夠基於多態協議的重載能力定製其餘端（例如 web 和 weex）的功能實現，指望能兼顧組件豐富度和統一性。web

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

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

CML 基於對跨端工做的積累，規範了一套跨端標準，稱之爲 MVVM+ 協議。小程序

基於 MVVM+ 跨端標準協議，你能夠自由擴展新端，快速支持任意 MVVM 架構模式的終端，如淘寶小程序、React Native 等等，具體參考: https://cmljs.org/doc/extend/extend.html。

你只須要基於 CML 開發項目，就可讓已有項目無縫運行新端，不再用學習新平臺框架啦！

以不變（項目代碼）應萬變（多端），從「各自爲政」到真正大統一。

得益於多態協議中對各層代碼進行了接口的定義，CML 可以實現標準化的擴展新端.

對上圖各層定義以下：

API 接口協議（Library)：定義基礎接口能力標準。
內置組件協議（Library)：定義基礎 Ui 組件標準。
框架協議（Framework)：定義生命週期、事件、路由等框架標準。
DSL 協議（Language)：定義視圖和邏輯層的語法標準。
多態實現協議（Interface)：定義容許用戶使用差別化能力標準。

全面：支持全部小程序、H5和客戶端

CML1.0 支持了業內全部小程序平臺 ( 微信、支付寶、百度、頭條、qq )、H5和客戶端，而且，快應用官方研發團隊 也正基於 MVVM+ 跨端標準協議擴展快應用程序，進度 100%，開發完成，如今測試中。

特別強調的是，CML 擴展頭條小程序（阿里和芒果 TV）和快應用端（快應用官方團隊）徹底由開源社區優秀的開發者貢獻實現。

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

CML1.0 實現了一套代碼運行多端，而且高度一致。

一致性

一致性和差別化一直是跨端裏面的難題，CML 在這方面作了許多努力，包括生命週期的統1、事件系統、尺寸單位、佈局外觀一致、組件化方案、數據管理等等。特別強調的是，組件化和界面一致性是最容易忽視，也是最影響開發體驗的很是重要的點。

CML 的組件化方案，依託於各端原有的組件化能力，儘量減小因爲框架帶來的性能問題。

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

各個小程序的組件化模型不一致，例如支付寶小程序組件化基於 React Web，使用上有諸多限制，包括組件無樣式做用域、數據傳遞、事件通訊等問題，CML 基於支付寶原有組件化能力，抹平與微信間的各類差別，在保證原有運行性能的狀況下，實現多端一致性和提升易用性。

另外一方面，經過引入了統一各端的一致性基礎樣式，解決各端呈現效果不一的問題。同時，CM L1.0 增強了跨端樣式校驗規範，在開發模式下，會嚴格檢查 CMSS 語法，只容許書寫通用的 CMSS 規則（跨 H五、各種小程序、客戶端）。定製性CML 既有統一性又能夠定製差別化，提供了針對工程級別、項目、組件、方法、樣式等各類類型的定製化能力。

工程、項目定製化:
https://cmljs.org/doc/framework/settings.html
組件定製化:
https://cmljs.org/doc/example/poly.html
方法定製化:
https://cmljs.org/doc/example/chameleon-api.html
樣式定製化:
https://cmljs.org/doc/view/cmss/css_diff.html

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

特別強調的是 1.0 版本還支持了多態協議重載能力，能夠重載某一個端的實現，基於這樣的能力咱們將會推出面向各種小程序特有的組件庫，解決小程序開發者吐槽最多的小程序組件不夠豐富的問題。好比，利用多態協議重載能力，重載<share>組件在 web 端用戶的實現，提示用戶右上角分享。

我開發微信小程序時官方庫<picker>組件不夠靈活？好說，重載在微信小程序端的實現便可！

性能：極致體驗

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

包體積優化

代碼包大小直接影響到下載速度，從而影響用戶的首次打開體驗。CML 一套代碼運行 N+ 端，可能讓人以爲框架很大，影響性能問題，CML 首創的多態協議，貫穿整個框架，包括 Language、Framework、Library , 不只具備很好的可維護性，並且在工程構建階段只保留一端代碼，保障代碼產出包足夠單純足夠小。

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

將公用模塊進行代碼分割，避免出現單文件體積過大現象。
按需加載內置組件和內置 api，大大減少包體積。
工程層面直接支持小程序分包加載，常規的代碼壓縮。
工程支持把小程序圖片資源變成網絡加載，配置 publicPath，將打包出的 static/img 發佈到服務器。

微信小程序提供分包加載方案, 以頁面爲入口進行分包。能夠優化小程序首次啓動的下載時間，以及在多團隊共同開發時能夠更好的解耦協做。

CML1.0 支持小程序分包加載，你只須要經過很是簡單的配置，就能夠在編譯時精準查找資源、輸出主包、分包。具體參考：https://cmljs.org/doc/example/subpage.html?h=%E5%88%86%E5%8C%85

小程序端性能優化

小程序端的渲染性能也是咱們重要優化方向之一。

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 個包版本，能夠在各類小程序、快應用、H五、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 資源提高首次加載速度，利用緩存提高二次加載速度，同時對資源採起增量更新策略。

預加載是將下載 JSBundle 動做提早完成，在須要用到的時候直接從本地讀取並渲染。實際項目使用中，能夠將須要預加載的 url 地址列表在 app 啓動時提早從服務端獲取，經過 Chameleon SDK 提供的預加載能力提早下載下來。
下載完 JSBundle 後 Chameleon SDK 會緩存此 JSBundle，下次渲染時，若是此 JSBundle 沒有更新則不會下載新的，達到節省時間和流量提高渲染速度的目的。

具體參考: https://cmljs.org/doc/chameleon_client/js_cache.html

另外一方面，計劃 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」安裝便可。編輯器插件: https://cmljs.org/doc/framework/edit-plugin.html

目前該插件支持瞭如下能力：

文件關聯。
語法高亮。
內置、擴展、自定義組件及屬性補全和類型默認值提示。
指令補全。
css、less 支持。
linter 校驗及提示。
api 補全。
文件 format。

更多功能的支持正在開發中，後續還將支持 Sublime text 插件，敬請期待。強大的語法檢查

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

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

分爲：

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

CML for DoKitCML 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 開發的組件：https://cmljs.org/doc/terminal/io.html。

以 web 和小程序爲例，在正常開發模式下，你須要維護 4 套代碼 (web、wx、alipay、baidu)。經過漸進式方案接入 CML 框架，開發 cml 通用組件，再導出各端給原有項目使用，只須要維護一套組件代碼，徹底利用了 CML 的跨端優點，大大下降了代碼開發維護成本。

同時，CML1.0 藉助多態協議規範導入各端第三方組件庫，你能夠自由定製。

原有項目集成 CML 跨端方案

CML 已發佈一款 webpack plugin：easy-chameleon，可直接在原有項目中集成 CML 。

接入方式很是簡單，你只須要安裝 easy-chameleon，按照指引簡單配置，就能使用 CML 強大的語法和編譯能力，以及使用和開發 CML 組件。具體接入文檔參考: https://cmljs.org/doc/example/webpack_plugin.html

藍圖：將來規劃端品類擴展基於 CML SDK 能夠：

擴展更多底層接口。
擴展更多 MVVM 標準終端（Flutter、React Native)。

X-Editor 編輯器 XEditor 目標是成爲一個能快速製做、發佈上線跨多端頁面（微信小程序、支付寶小程序、百度小程序、qq小程序、字節跳動小程序、web、快應用、native-weex）的平臺。目前 XEditor 已發佈上萬頁面。經過集成 CML 的跨端能力，減小簡單需求的開發投入，可下降多端界面開發 60% 的工做量。

完整視頻如上，簡易視圖以下：

CML 雲開發平臺 && Serverless

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

CML1.0 活動

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

你能夠經過如下兩種途徑參與活動，活動截止 9 月 8 日：

在 Github issue 活動貼發表實質性建議或想法:
https://github.com/didi/chameleon/issues
向 CML pulls 提交 Pull Request:
https://github.com/didi/chameleon/pulls

獲獎規則：

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

活動最終解釋權歸 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，爲開發者帶來更多使人期待的新特性，敬請關注：https://cmljs.org/ 。

活動推薦

09 月 07 日（週六 13:00-17:30），由騰訊雲主辦 K8s & 雲原生技術開放日深圳站將和你們見面，本次沙龍圍繞 K8s、harbor、GPU 虛擬化等雲原生相關技術，由技術專家講解 AI 場景下的技術選型、企業級最佳實踐以及技術發展趨勢，與深圳的開發者共同探討雲原生的技術實踐與思考。

這次沙龍活動免費，點擊「閱讀原文」或者識別圖中二維碼進行報名，有任何問題歡迎聯繫沙龍小助手 SherryWX：sherryia01