在兼容和繼承 APICloud 所有 API、模塊、技術(shù)棧以及用戶體驗的基礎(chǔ)上,APICloud 定義了一套新的代碼編寫標(biāo)準(zhǔn)(DSL):基于標(biāo)準(zhǔn) Web Components 組件化思想,兼容 Vue / React 語法特性,通過一次編碼,分別編譯為 APP、小程序代碼,實現(xiàn)多端開發(fā)。
APP 代碼使用 DeepEngine3.0 運(yùn)行,全翻譯式的運(yùn)行原理提供完全原生的體驗和性能。
APICloud 整個多端技術(shù)的工作原理
開發(fā)者在開發(fā)工具中編寫代碼并形成一個虛擬 dom,通過 webpack、rollup 等編譯工具分別編譯到 app、H5 以及小程序平臺。在編譯到 app 平臺時整個運(yùn)行基于 V8JavaScript 的引擎去運(yùn)行,加上 avm.js 的共同作用去渲染或者執(zhí)行開發(fā)者編寫的代碼,基于瀏覽器或者系統(tǒng)自帶的 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ù)分離出兩個主要方向:
- 混合方向:即 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ā)者無需學(xué)習(xí)新的技術(shù)即可開發(fā) APP。該方向代表技術(shù)為 Cordova、AppMobi、Ionic 等。 - 中間語言(DSL)編譯方向:開發(fā)過程要求使用特定的語法編寫 APP 代碼,通過編譯環(huán)境將代碼編譯為 Android / iOS 原生 APP。開發(fā)者無需學(xué)習(xí) Android & iOS 原生技術(shù)以及 Java、Object-C、C/C++ 等復(fù)雜的開發(fā)語言即可完成 APP 開發(fā)。
該模式的 APP 引擎不依賴 Webview,而是借助Virtual Machine,比如 V8 / JSCore 引擎,通過 JS-Runtime 實現(xiàn)更為復(fù)雜的代碼邏輯來滿足交互處理、通信和狀態(tài)管理,同時擴(kuò)展和完善 JS / Native 的通信機(jī)制、封裝完善的組件和系統(tǒng)能力等,實現(xiàn)完全原生的渲染。該方向既延續(xù)了前端開發(fā)體系,又最大限度保證了渲染的性能,代表技術(shù)為 React Native、Weex。
APICloud DeepEngine 3.0 同時支持以上兩種技術(shù)模式,允許開發(fā)者在同一個APP中自由選擇使用其中一種方式進(jìn)行開發(fā)。
DeepEngine 使用全翻譯式原理,將 Javascript 編譯為 Native API,為 APP 提供完全原生的體驗和性能。
跨端JS架構(gòu)
在大前端技術(shù)領(lǐng)域,當(dāng)我們遇到了需要解決重復(fù)性的問題時,通常會考慮設(shè)計一個 DSL(Domain-Specific Language)或者抽象出一個框架層,專門來解決這些類似的問題。使用 DSL 我們并不需要為特定終端編寫多套代碼,還可以利用宿主語言的抽象能力,確保各終端渲染效果的一致性以及對開發(fā)者友好。
常見的 DSL 有:React 支持的 JSX 語法、Vue 定義的 SFC 結(jié)構(gòu)和 ?v-*
? 指令集、微信小程序的 WXML/WXS 語法等。這些 DSL 最終被編譯為目標(biāo)代碼,直接發(fā)布于小程序平臺,或者借助 JS-Runtime 運(yùn)行于 APP 和 Web 瀏覽器。
APICloud 視圖模型框架是基于標(biāo)準(zhǔn) H5 子集設(shè)計的 DSL 中間語言編程框架,目前具備如下能力:
- Virtual DOM:通過虛擬 DOM,渲染到不同終端,充分尊重系統(tǒng)特性,為不同終端執(zhí)行差異處理,實現(xiàn)高效渲染;
- 組件化:高可重用性、可組合性、可維護(hù)性的架構(gòu)設(shè)計,隱藏了復(fù)雜的 DOM 結(jié)構(gòu)和行為,讓開發(fā)者專注于應(yīng)用的功能和外觀;
- 數(shù)據(jù)綁定:輕松將數(shù)據(jù)源綁定到應(yīng)用用戶界面,降低邏輯復(fù)雜性和開發(fā)難度;
- 狀態(tài)管理和路由:有效分離用戶界面和數(shù)據(jù)處理,實現(xiàn)項目的工程化管理;
- 類 Vue 語法和兼容 React JSX,兼具 Vue 的輕巧和 React 的靈活性。
APICloud DSL 最終可編譯為標(biāo)準(zhǔn) JS,通過 DeepEngine 渲染到 APP 端和 Web 端,或者編譯為微信小程序代碼,用于微信小程序平臺發(fā)布。
全流程開發(fā)工具
開發(fā)工具作為開發(fā)者的“靈魂伴侶”,伴隨在開發(fā)者的整個職業(yè)生涯里。市面上有很多流行且成熟的工具可供多端開發(fā)進(jìn)行使用,例如 VSCode、Sublime、WebStorm 等。因多端技術(shù) DSL 的個性化,如果能夠提供“標(biāo)準(zhǔn)化 + 行業(yè)化 + 定制化”的全流程開發(fā)工具,包含完備的編碼、調(diào)試、和發(fā)布功能,則能讓多端開發(fā)工作事半功倍,因此諸如微信和支付寶的小程序開發(fā)流程中,均提供了符合自己業(yè)務(wù)特色的 IDE。
以 APICloud Studio3 多端開發(fā)工具為例,它是基于業(yè)界領(lǐng)先的代碼編輯器 -VSCode 深度定制,支持在 Windows、Mac 和 Linux 系統(tǒng)上運(yùn)行,在兼容 VSCode 所有能力的基礎(chǔ)上:
- 提供舒適的高亮標(biāo)記以及完善的智能幫助提示和自動完成功能,支持 APICloud 定義的 DSL 編寫;
- 提供實時預(yù)覽和真機(jī)調(diào)試能力,可直接在工具中調(diào)試代碼和預(yù)覽效果,或者使用 Wi-Fi、USB 鏈接真實的手機(jī)進(jìn)行調(diào)試和功能驗證;
- 提供簡單高效的代碼管理,支持 Git 方式的代碼管理,同時內(nèi)置 SVN,簡化了復(fù)雜的 Git 操作;
- 云端一體,同 APICloud 業(yè)務(wù)緊密銜接,保持和云端打通,在本地即可實現(xiàn)創(chuàng)建/導(dǎo)入項目,云編譯,自定義 Loader,以及模塊管理等操作。
統(tǒng)一編譯環(huán)境
多終端統(tǒng)一編譯環(huán)境,是一系列代碼解析,語法分析,翻譯,重構(gòu)等工具的集合,負(fù)責(zé)將 DSL 編譯為目標(biāo)編程語言,例如將 Less 編譯為 CSS。在多端技術(shù)領(lǐng)域,多端編譯環(huán)境則負(fù)責(zé)將 DSL 編譯為可在 JS 引擎或者 Web 瀏覽器中執(zhí)行的標(biāo)準(zhǔn) JS 和 Html 代碼,以及編譯為符合微信或者支付寶等小程序技術(shù)標(biāo)準(zhǔn)的代碼。
編譯成功的標(biāo)準(zhǔn) JS 代碼運(yùn)行于跨平臺 APP 引擎中,實現(xiàn) APP 端功能;小程序代碼可直接用于發(fā)布到微信或者支付寶小程序平臺,實現(xiàn)小程序端功能;Html 代碼則可作為 Web 端發(fā)布。由此達(dá)到一套代碼,可同時部署到 APP、小程序、H5 端的目的。
目前常見的多終端編譯環(huán)境有:
- Mpvue(美團(tuán)):支持將 Vue 語法編譯為小程序和 H5,支持微信、支付寶等小程序
- Taro(京東):支持將 React 語法編譯為小程序和 H5,支持微信、支付寶等小程序,同時支持生成 React Native APP
- Hippy(騰訊):同時支持將 Vue 和 React 語法編譯為微信小程序和 H5
- Chameleon(滴滴):支持將其 CML 語法編譯到 Web、小程序、Weex APP 等多種終端
APICloud 多終端編譯環(huán)境目前支持使用類 Html5 技術(shù)實現(xiàn)多終端開發(fā),無需搭建特定的終端編譯環(huán)境,一鍵云端編譯即可生成高質(zhì)量目標(biāo)終端代碼,可用性高,有利于二次開發(fā)。支持編譯為 Android / iOS APP、微信小程序以及標(biāo)準(zhǔn) H5。
以上內(nèi)容由低代碼開發(fā)平臺 APICloud 提供,想要了解更多推薦學(xué)習(xí)編程獅(w3cschool.cn)免費(fèi)課程《APICloud(3.0)-APP&小程序?qū)崙?zhàn)開發(fā)培訓(xùn)》。