App下載

APICloud多端開發(fā)原理

猿友 2021-04-01 17:48:26 瀏覽數(shù) (3152)
反饋

在兼容和繼承 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ù)的工作原理


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ā)者無需學(xué)習(xí)新的技術(shù)即可開發(fā) APP。該方向代表技術(shù)為 Cordova、AppMobi、Ionic 等。
  2. 中間語言(DSL)編譯方向:開發(fā)過程要求使用特定的語法編寫 APP 代碼,通過編譯環(huán)境將代碼編譯為 AndroidiOS 原生 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 提供完全原生的體驗和性能。


APICloud DeepEngine 3


跨端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、MacLinux 系統(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)》。


1 人點(diǎn)贊