Chameleon滴滴跨端解決方案
研發(fā)同學在端內既追求 H5 的靈活性，也要追求性能趨近于原生。 面對入口擴張，主端、獨立端、微信小程序、支付寶小程序、百度小程序、安卓廠商聯(lián)盟快應用，單一功能在各平臺都要重復實現(xiàn)，開發(fā)和維護成本成倍增加。迫切需要維護一套代碼可以構建多入口的解決方案，歷經近 20 個月打磨，滴滴跨端解決方案 Chameleon 終于發(fā)布。真正專注于讓一套代碼運行多端。
設計理念
軟件架構設計里面最基礎的概念“拆分”和“合并”，拆分的意義是“分而治之”，將復雜問題拆分成單一問題解決，比如后端業(yè)務系統(tǒng)的”微服務化“設計；“合并”的意義是將同樣的業(yè)務需求抽象收斂到一塊，達成高效率高質量的目的，例如后端業(yè)務系統(tǒng)中的“中臺服務”設計。
而 Chameleon 屬于后者，通過定義統(tǒng)一的語言框架統(tǒng)一多態(tài)協(xié)議，從多端（對應多個獨立服務）業(yè)務中抽離出自成體系、連續(xù)性強、可維護強的“前端中臺服務”。
跨端目標
雖然不同各端環(huán)境千變萬化，但萬變不離其宗的是 MVVM 架構思想，Chameleon 目標是讓 MVVM 跨端環(huán)境大統(tǒng)一。
學習全景圖
開發(fā)語言
從事過網頁編程的人知道，網頁編程采用的是 HTML + CSS + JS 這樣的組合，同樣道理，chameleon 中采用的是 CML + CMSS + JS。
JS 語法用于處理頁面的邏輯層，與普通網頁編程相比，本項目目標定義標準 MVVM 框架，擁有完整的生命周期，watch，computed，數(shù)據雙向綁定等優(yōu)秀的特性，能夠快速提高開發(fā)速度、降低維護成本。
CML（Chameleon Markup Language）用于描述頁面的結構，我們知道 HTML 是有一套標準的語義化標簽，例如文本是<span> 按鈕是<button>。CML 同樣具有一套標準的標簽，我們將標簽定義為組件，CML 為用戶提供了一系列組件。同時CML中還支持模板語法，例如條件渲染、列表渲染，數(shù)據綁定等等。同時，CML 支持使用類VUE語法，讓你更快入手。
CMSS (Chameleon Style Sheets)用于描述 CML 頁面結構的樣式語言，其具有大部分 CSS 的特性，并且還可以支持各種 css 的預處語言 less stylus。
通過以上對于開發(fā)語言的介紹，相信你看到只要是有過網頁編程知識的人都可以快速的上手chameleon的開發(fā)。
豐富的組件
在用 CML 寫頁面時，chameleon 提供了豐富的組件供開發(fā)者使用，內置的有 button switch radio checkbox 等組件，擴展的有 c-picker c-dialog c-loading等等,覆蓋了開發(fā)工作中常用的組件。
豐富的API
為了方便開發(fā)者的高效開發(fā)，chameleon 提供了豐富的API庫,發(fā)布為 npm 包 chameleon-api，里面包括了網絡請求、數(shù)據存儲、地理位置、系統(tǒng)信息、動畫等方法。
自由定制API和組件
基于強大的多態(tài)協(xié)議，可自由擴展任意 API 和組件，不強依賴框架的更新。各端原始項目中已積累大量組件，也能直接引入到跨端項目中使用。
智能規(guī)范校驗
代碼規(guī)范校驗，當出現(xiàn)不符合規(guī)范要求的代碼時，編輯器會展示智能提示，不用挨個調試各端代碼，同時命令行啟動窗口也會提示代碼的錯誤位置。
漸進式跨端
既想一套代碼運行多端，又不用大刀闊斧的重構項目，可以將多端重用組件用 Chameleon 開發(fā)，直接在原有項目里面調用。
先進前端開發(fā)體驗
Chameleon 不僅僅是跨端解決方案。基于優(yōu)秀的前端打包工具 Webpack，吸收了業(yè)內多年來積累的最有用的工程化設計，提供了前端基礎開發(fā)腳手架命令工具，幫助端開發(fā)者從開發(fā)、聯(lián)調、測試、上線等全流程高效的完成業(yè)務開發(fā)。