摘要:跨端框架壹個理想主義團隊的開源作品歷經近個月打磨,滴滴跨端方案終于開源了真正專注于一套代碼運行多端。這時候我們專門成立了一個人的小項目組,完成一個名為的項目,一期目標是不影響用戶發揮,不依賴框架方的原則性實現一套代碼運行和微信小程序。
Chameleon跨端框架——壹個理想主義團隊的開源作品
歷經近20個月打磨,滴滴跨端方案chameleon終于開源了https://github.com/didi/chameleon,
真正專注于一套代碼運行多端。
微信月活10億月活(超過網民數量,用戶多個賬號?)、支付寶4億月活、百度3.3億月活;2018 Q3中國Android手機占智能手機市場超過80%;無論BAT還是Android快應用都是中國互聯網用戶的真正用戶入口,作為小型互聯網公司都希望能搭上小程序的風口,從而蹭一波流量。
計算機技術歷史發展告訴我們,每一種新技術出現都會經歷"各自為政"的階段,小程序技術也不例外。微信小程序作為首創者,雖然其他小程序都在技術實現原理、接口設計刻意模仿,但是作為一線開發者面對同樣的應用實現往往需要重復開發、測試,從前1單位的工作量變成了N單位的工作量。
滴滴的研發工程師是其中最顯著的"受害者"之一,滴滴出行在微信錢包、支付寶、Android快應用都有相關入口,用戶流量占比不低。
各類小程序已經能覆蓋中國所有網民,從Facebook在2013年開源react,這個項目本身越滾越大。從最早的WebUI引擎衍生的ReactNative項目,目標更是宏偉。
Vue.js于2014年左右發布,逆流而上占據了大量用戶群體,2016年阿里巴巴也基于vue發布了weex項目,可以用vue編寫NativeAPP。
Google在2018年末正式發布了面向未來的跨Andoid、IOS端Flutter1.0.0,作為面向未來的跨端框架,前景一片光明。
解決方案雖然不同各端框架環境千變萬化,無論各類小程序、Weex、React-Native、Flutter、快應用,它們萬變不離其宗的是MVVM架構設計思想。Chameleon希望既能用一套代碼完成所有端需求,將相同的業務邏輯完成收斂到同一層系統里面,又不會因為項目的抽象一致導致可維護性變差。
讓MVVM跨端環境大統一:以各個跨端技術(Weex、React-Native、WebView瀏覽器、Flutter)和產品業務(微信小程序、快應用、支付寶小程序、百度智能小程序、今日頭條小程序、其他各類小程序)的共同技術特點——MVVM架構設計, 以統一MVVM跨端架構平臺為目標的程序語言框架Chameleon(任意使用MVVM架構設計的終端,都能以Chameleon開發并運行)。
ChameleonSDK包括各類小程序、web端、客戶端(React-Native、Weex、Flutter),目前支持微信小程序、Web、Weex三類,后續支持更多MVVM為標準的端。
CML(Chameleon MarkupLanguage)是框架設計的一套標簽語言,結合基礎組件、事件系統、數據綁定,可以構建出頁面的結構。同時為了降低學習成本支持類VueTemplate。
原理 久經考驗2017年時微信小程序發布,滴滴作為白名單用戶首先開始嘗試接入。這時候我們專門成立了一個1、2人的小項目組,完成一個名為MPV的項目,一期目標是“不影響用戶發揮,不依賴框架方的原則性實現一套代碼運行web和微信小程序”。MPV研發完成后,在多個項目實踐中,確實完成了超過90%代碼重用,總體上開發效率和測試效率都有了明顯提升,同時暴露出更多問題,在MPV的實踐積累下,有了一定的底氣和把握,后續的規劃更加明確。
可維護性問題,沒有隔離公用代碼和各端差異代碼。
方向選擇錯誤,MPV使用了小程序語法標準(小程序的生命周期、API接口等),導致用戶使用上無法清晰理解使用規范。
各端周邊小型差異點太多。
模板DSL語法不規范。
兩端界面效果不一致。
多端調試成本高。
工程化建設落后。
不能直接使用各端已有生態組件,即缺乏標準規范接入某個端已有開源組件。
2018年4月我們把跨端項目規模進一步擴大,跨N端的解決方案命名為Chameleon/kmiln/,簡寫CML,中文名卡梅龍;中文意思多帶帶飛,意味著就像變 色龍一樣能適應不同環境的跨端整體解決方案。
Chameleon在MPV的實踐積累下,不僅解決了遇到的各種可維護性問題,后續的規劃更加明確,目標真正專注于讓一套代碼運行多端,提供標準的MVV M模式統一各類終端。
經過一年數十位前端開發人員在上百頁面中的實踐經驗積累,在本周正式開源:https://github.com/didi/chameleon。
生產應用舉例 易用性好一套代碼運行多端理念,被人挑戰最多的如何保證易用性。
開發快,整體開發流程要高效。
簡潔性,各端開發定制化空間大,且公用代碼不會混雜某端代碼。
性能好,不能增加產出文件包大小。
一致性,多端實現效果一致。
多態協議多端合并后各端差異化實現在所難免,一開始是差異化代碼和業務邏輯混雜在一起。這就尷尬了,如果你覺得以上不復雜,假設有4、5個端呢,業務邏輯摻雜跨端邏輯,產品邏輯別打斷,可讀性差,需求變更,牽一發動全身,每個端都要測試,跨端代碼效率變得適得其反。
下圖各端差異化代碼也和邏輯混合在一起
-7b1535c36a260b577f497853d62268cb.png)
多態協議設計的靈感來自于Apache Thrift - 可伸縮的跨語言服務開發框架,本質上跨端也屬于跨語言。
它能讓Chameleon開發者快速接入各個客戶端底層功能或者差異化業務實現,避免可讀性差、可維護性差的問題。
多態協議通過定義標準接口(interface),各端模塊各自獨立實現,編譯時和運行時對實現的接口輸入輸出做檢查。
主要2個目標:
保障多端可維護性
編譯時拆分多端代碼
當用戶按照標準規范擴展個別產品效果多端不一致或特定底層能力多端不一致的的功能時,多態協議可以有效隔離公用代碼和各端差異代碼,保證”河水不犯井水“。
舉例:當你像開發一個圖表功能組件時,可能用到 echarts :產出包里面只包含該組件其中一端的代碼;因輸入輸出的限制,該組件調用上完全一致,不用根據某端做特殊邏輯處理。你可以將該echart多態組件多帶帶放置在一個倉庫里面多帶帶維護并發布;其他人無需關系內部細節,直接npm install echart即可使用。
學習成本低VM層的CML語法是關聯視圖層和邏輯層的抽象DSL,其有學習成本問題是被熱心很多幫助我們的同學提的最多建議,本身其CML學習成本已經非常低,無非是數據雙向綁定、事件綁定、組件樹、條件語句、循環遍歷等等。一開始我們是拒絕的,后來綜合考慮之下,還是妥協支持了類vue語法,讓開發者更快上手CML。
漸進式接入很多人已經開發小程序了,又不愿意大多闊斧重新改造,也希望使用CML?當然可以,兩種方式使用CML:
業內對比業內其他框架和我們的目標不一樣,我們是希望真正一套代碼運行多端,而其他框架無非是“某個小程序語法增強”或者“推廣某個框架寫小程序 ”,但卻是有重合點,列舉一下功能對比:
快速開始:https://cmljs.org/doc/quick_start/quick_start.html
常見問題: https://cmljs.org/doc/framework/faq.html
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/101505.html
摘要:中國互聯網絡信息中心發布的中國互聯網絡發展狀況統計報告顯示,截至年月,我國網民規模達億人,微信月活億支付寶月活億百度月活億另一方面,中國手機占智能手機整體的比例超過,月活約億。在年末正式發布了面向未來的跨端的。 開源中國專訪:Chameleon原理首發,其它跨多端統一框架都是假的? 原創: 嘉賓-張楠 開源中國 以往我們說某一功能跨多端,往往是指在諸如 PC、移動等不同類型的設備之...
摘要:基于對跨端工作的積累,規范了一套跨端標準,稱之為協議開發者只需要按照標準擴展流程,即可快速擴展任意架構模式的終端。實現了微信端的基本擴展,用戶可以以此為模板進行開發。新框架太多?學不動啦?有這一套跨端標準,今后再也不用學習新框架了。各個小程序按自己喜好各自為政?有了這套標準,再也不用重復開發各種新平臺啦。如今前端比較流行的 React Native、Weex、Flutter 等跨平臺開發框架...
摘要:但是從年微信推出小程序,到至今各大廠商都推出自己的小程序,跨端開發就不僅僅是技術的問題了。實現了微信端的基本擴展,用戶可以以此為模板進行開發。 新框架太多?學不動啦?有這一套跨端標準,今后再也不用學習新框架了。 各個小程序按自己喜好各自為政?有了這套標準,再也不用重復開發各種新平臺啦。 如今前端比較流行的 React Native、Weex、Flutter 等跨平臺開發框架,對于開發來...
摘要:在編寫跨端組件的正確姿勢上篇中,我們介紹了如何使用第三方庫封裝跨端組件,但是絕大多數組件并不需要那樣差異化實現,絕大多數情況下我們推薦使用語法統一實現跨端組件。 在chameleon項目中我們實現一個跨端組件一般有兩種思路:使用第三方組件封裝與基于chameleon語法統一實現。在《編寫chameleon跨端組件的正確姿勢(上篇)》中, 我們介紹了如何使用第三方庫封裝跨端組件,但是絕大...
閱讀 2428·2021-11-25 09:43
閱讀 1203·2021-09-07 10:16
閱讀 2623·2021-08-20 09:38
閱讀 2947·2019-08-30 15:55
閱讀 1467·2019-08-30 13:21
閱讀 897·2019-08-29 15:37
閱讀 1450·2019-08-27 10:56
閱讀 2100·2019-08-26 13:45