在兼容和繼承APICloud所有API、模塊、技術(shù)棧以及用戶體驗的基礎(chǔ)上,APICloud定義了一套新的代碼編寫標準(DSL):基于標準Web Components組件化思想,兼容Vue / React語法特性,通過一次編碼,分別編譯為APP、小程序、Webapp代碼,實現(xiàn)多端開發(fā)。
APP代碼使用DeepEngine3.0運行,全翻譯式的運行原理提供完全原生的體驗和性能。
APICloud多端技術(shù)的工作原理
開發(fā)者通過開發(fā)工具基于avm語法標準編寫的代碼,通過webpack、rollup等編譯工具分別編譯到app、H5以及小程序端。其中,編譯到app端時,app基于V8引擎執(zhí)行,avm.js作為runtime,二者實時協(xié)作完成UI的原生渲染以及業(yè)務(wù)邏輯代碼的執(zhí)行;編譯到標準H5端,基于瀏覽器或者webview運行時,代碼則借助于avm.js直接渲染到瀏覽器或者webview的真實dom上;編譯為小程序端,則對應(yīng)小程序代碼,直接生成小程序語法。
APICloud在多端技術(shù)的4個核心能力:
跨平臺引擎
歷經(jīng)近十年的發(fā)展,跨平臺技術(shù)和生態(tài)如今趨于穩(wěn)定,企業(yè)和開發(fā)者對跨平臺技術(shù)已形成共識,并大規(guī)模的應(yīng)用到各種業(yè)務(wù)場景中。
在此期間,跨平臺技術(shù)分離出兩個主要方向:
1.混合方向:即HTML5 + Native混合,也就是我們通常說的混合開發(fā):通過HTML5快速實現(xiàn)APP的UI布局、業(yè)務(wù)邏輯,在開發(fā)過程中涉及HTML5無法實現(xiàn)或者體驗不好的功能,則借助Native模塊來實現(xiàn)。
該模式的APP引擎整體基于Webview架構(gòu),對前端開發(fā)者友好,背靠前端龐大的JavaScript生態(tài),前端開發(fā)者無需學習新的技術(shù)即可開發(fā)APP。該方向代表技術(shù)為Cordova、AppMobi、Ionic等。
2.中間語言(DSL)編譯方向:開發(fā)過程要求使用特定的語法編寫APP代碼,通過編譯環(huán)境將代碼編譯為Android / iOS原生APP。開發(fā)者無需學習Android & iOS原生技術(shù)以及Java、Object-C、C/C++等復雜的開發(fā)語言即可完成APP開發(fā)。
該模式的APP引擎不依賴Webview,而是借助Virtual Machine,比如V8 / JSCore引擎,通過JS-Runtime實現(xiàn)更為復雜的代碼邏輯來滿足交互處理、通信和狀態(tài)管理,同時擴展和完善 JS / Native 的通信機制、封裝完善的組件和系統(tǒng)能力等,實現(xiàn)完全原生的渲染。該方向既延續(xù)了前端開發(fā)體系,又最大限度保證了渲染的性能,代表技術(shù)為React Native、Weex。
APICloud DeepEngine 3.0同時支持以上兩種技術(shù)模式,允許開發(fā)者在同一個APP中自由選擇使用其中一種方式進行開發(fā)。
DeepEngine使用全翻譯式原理,將Javascript編譯為Native API,為APP提供完全原生的體驗和性能。
跨端JS架構(gòu)
在大前端技術(shù)領(lǐng)域,當我們遇到了需要解決重復性的問題時,通常會考慮設(shè)計一個DSL(Domain-Specific Language)或者抽象出一個框架層,專門來解決這些類似的問題。使用DSL我們并不需要為特定終端編寫多套代碼,還可以利用宿主語言的抽象能力,確保各終端渲染效果的一致性以及對開發(fā)者友好。
常見的DSL有:React支持的JSX語法、Vue定義的SFC結(jié)構(gòu)和v-*指令集、微信小程序的WXML/WXS語法等。這些DSL最終被編譯為目標代碼,直接發(fā)布于小程序平臺,或者借助JS-Runtime運行于APP和Web瀏覽器。
APICloud視圖模型框架是基于標準H5子集設(shè)計的DSL中間語言編程框架,目前具備如下能力:
1.Virtual DOM:通過虛擬DOM,渲染到不同終端,充分尊重系統(tǒng)特性,為不同終端執(zhí)行差異處理,實現(xiàn)高效渲染;
2.組件化:高可重用性、可組合性、可維護性的架構(gòu)設(shè)計,隱藏了復雜的DOM結(jié)構(gòu)和行為,讓開發(fā)者專注于應(yīng)用的功能和外觀;
3.數(shù)據(jù)綁定:輕松將數(shù)據(jù)源綁定到應(yīng)用用戶界面,降低邏輯復雜性和開發(fā)難度;
4.狀態(tài)管理和路由:有效分離用戶界面和數(shù)據(jù)處理,實現(xiàn)項目的工程化管理;
5.類Vue語法和兼容React JSX,兼具Vue的輕巧和React的靈活性。
APICloud DSL最終可編譯為標準JS,通過DeepEngine渲染到APP端和Web端,或者編譯為微信小程序代碼,用于微信小程序平臺發(fā)布。
全流程開發(fā)工具
開發(fā)工具作為開發(fā)者的“靈魂伴侶”,伴隨在開發(fā)者的整個職業(yè)生涯里。市面上有很多流行且成熟的工具可供多端開發(fā)進行使用,例如VSCode、Sublime、WebStorm等。因多端技術(shù)DSL的個性化,如果能夠提供“標準化 + 行業(yè)化 + 定制化”的全流程開發(fā)工具,包含完備的編碼、調(diào)試、和發(fā)布功能,則能讓多端開發(fā)工作事半功倍,因此諸如微信和支付寶的小程序開發(fā)流程中,均提供了符合自己業(yè)務(wù)特色的IDE。
以APICloud Studio3多端開發(fā)工具為例,它是基于業(yè)界領(lǐng)先的代碼編輯器-VSCode深度定制,支持在Windows、Mac和Linux系統(tǒng)上運行,在兼容VSCode所有能力的基礎(chǔ)上:
1.提供舒適的高亮標記以及完善的智能幫助提示和自動完成功能,支持APICloud定義的DSL編寫;
2.提供實時預覽和真機調(diào)試能力,可直接在工具中調(diào)試代碼和預覽效果,或者使用Wi-Fi、USB鏈接真實的手機進行調(diào)試和功能驗證;
3.提供簡單高效的代碼管理,支持Git方式的代碼管理,同時內(nèi)置SVN,簡化了復雜的Git操作;
4.云端一體,同APICloud業(yè)務(wù)緊密銜接,保持和云端打通,在本地即可實現(xiàn)創(chuàng)建/導入項目,云編譯,自定義Loader,以及模塊管理等操作。
統(tǒng)一編譯環(huán)境
多終端統(tǒng)一編譯環(huán)境,是一系列代碼解析,語法分析,翻譯,重構(gòu)等工具的集合,負責將DSL編譯為目標編程語言,例如將Less編譯為CSS。在多端技術(shù)領(lǐng)域,多端編譯環(huán)境則負責將DSL編譯為可在JS引擎或者Web瀏覽器中執(zhí)行的標準JS和Html代碼,以及編譯為符合微信或者支付寶等小程序技術(shù)標準的代碼。
編譯成功的標準JS代碼運行于跨平臺APP引擎中,實現(xiàn)APP端功能;小程序代碼可直接用于發(fā)布到微信或者支付寶小程序平臺,實現(xiàn)小程序端功能;Html代碼則可作為Web端發(fā)布。由此達到一套代碼,可同時部署到APP、小程序、H5端的目的。
目前常見的多終端編譯環(huán)境有:
1.Mpvue(美團):支持將Vue語法編譯為小程序和H5,支持微信、支付寶等小程序
2.Taro(京東):支持將React語法編譯為小程序和H5,支持微信、支付寶等小程序,同時支持生成React Native APP
3.Hippy(騰訊):同時支持將Vue和React語法編譯為微信小程序和H5
4.Chameleon(滴滴):支持將其CML語法編譯到Web、小程序、Weex APP等多種終端
APICloud多終端編譯環(huán)境目前支持使用類Html5技術(shù)實現(xiàn)多終端開發(fā),無需搭建特定的終端編譯環(huán)境,一鍵云端編譯即可生成高質(zhì)量目標終端代碼,可用性高,有利于二次開發(fā)。支持編譯為Android / iOS APP、微信小程序以及標準H5。
avm.js
Avm(APICloud-View-Model)是一個移動優(yōu)先的高性能跨端JavaScript框架,支持一次編寫多端渲染。它提供更趨近于原生的編程體驗,通過簡潔的模型來分離應(yīng)用的用戶界面、業(yè)務(wù)邏輯和數(shù)據(jù)模型,適合高度定制的應(yīng)用開發(fā)。
軟件名稱:avm.js
最近更新時間:2020年1月20日
軟件語言:JavaScript
開發(fā)商:APICloud
軟件授權(quán):未開源
簡介
Avm核心庫只關(guān)注終端差異、虛擬DOM、組件化和數(shù)據(jù)綁定,與其他重量級框架不同的是,Avm不需要太多的外部依賴,僅需要組件化、數(shù)據(jù)驅(qū)動等更現(xiàn)代化框架的能力。Avm提供類Vue語法并兼容 React JSX,非常容易學習,如果您是Vue、React的用戶,將更易上手Avm,幾乎不需要學習成本。
Avm專注于移動端,提供簡潔的代碼書寫模式,編碼一次,可同時生成Android & iOS原生App、小程序和WebApp。
特點
易用
有Vue、React基礎(chǔ),可快速上手。配套專用的開發(fā)工具APICloud Studio3。
多端
一次開發(fā),多端渲染,一個技術(shù)棧搞定移動端開發(fā)。
功能API豐富
提供1千+模塊和2萬+API可直接調(diào)用,面向行業(yè)和場景無限制。
項目結(jié)構(gòu)
參考
Avm.js 的 API 參考了 VueJS、ReactJS、Omi.js。
