
Tango 是一個(gè)用于快速構(gòu)建低代碼平臺(tái)的低代碼設(shè)計(jì)器框架,并以源代碼為中心,執(zhí)行和渲染前端視圖,并為用戶提供低代碼可視化搭建能力,用戶的搭建操作會(huì)轉(zhuǎn)為對(duì)源代碼的修改。借助于 Tango 構(gòu)建的低代碼工具或平臺(tái),可以實(shí)現(xiàn) 源碼進(jìn),源碼出的效果,無(wú)縫與企業(yè)內(nèi)部現(xiàn)有的研發(fā)體系進(jìn)行集成。
開(kāi)源情況
目前 Tango 設(shè)計(jì)器引擎部分已經(jīng)開(kāi)源,正在積極推進(jìn)中,可以通過(guò)如下的信息了解最新進(jìn)展:
- Github 倉(cāng)庫(kù):https://github.com/NetEase/tango
- 文檔站點(diǎn):https://netease.github.io/tango/
本文主要探討基于 Tango 低代碼在 RN 場(chǎng)景如何打造一套標(biāo)準(zhǔn)低碼研發(fā)體系。
為什么選擇 RN 作為跨端方案
主流的跨端方案,建全的社區(qū)生態(tài)
RN(React Native)是 Facebook 開(kāi)發(fā)的一種基于React框架的移動(dòng)應(yīng)用開(kāi)發(fā)框架。它可以用于同時(shí)開(kāi)發(fā) iOS 和 Android 平臺(tái)的跨平臺(tái)移動(dòng)應(yīng)用程序。

在 npm trends 上可以看到,RN 每周的下載次數(shù),穩(wěn)固上升,相比5年前,下載量已經(jīng)翻了接近10倍之多,Github Star 數(shù)量也來(lái)到了 110K 之多,擁有非常龐大的社區(qū)生態(tài)。
React 生態(tài)圈,支持動(dòng)態(tài)更新
RN 上手成本較低,對(duì)于前端開(kāi)發(fā)同學(xué),React 技術(shù)??梢詿o(wú)縫遷移,學(xué)習(xí)成本較低,對(duì)于客戶端同學(xué),RN 方案省去了大量編譯的時(shí)間,相比于傳統(tǒng)的原生開(kāi)發(fā),RN 可以大大減少代碼重復(fù),提高開(kāi)發(fā)效率。此外提供了豐富的組件庫(kù)和API,開(kāi)發(fā)者可以使用這些組件和API快速構(gòu)建用戶界面和實(shí)現(xiàn)各種功能。同時(shí),RN還具有良好的性能表現(xiàn),可以輕松實(shí)現(xiàn)原生應(yīng)用的用戶體驗(yàn)。
在國(guó)內(nèi),無(wú)論大公司、小公司都鐘情于應(yīng)用的動(dòng)態(tài)更新。因?yàn)閯?dòng)態(tài)更新能降低產(chǎn)品的試錯(cuò)成本。如果產(chǎn)品策略有調(diào)整,可以立馬上線,線上有小問(wèn)題也可以快速修復(fù)。但能夠既滿足動(dòng)態(tài)更新,又能跨端,還能滿足復(fù)雜業(yè)務(wù)需求的只有 JavaScript 語(yǔ)言。
新架構(gòu)開(kāi)啟全新時(shí)代
2022 年,對(duì)于 React Native 來(lái)說(shuō)是一個(gè)大年,因?yàn)橹貥?gòu)已久的 React Native 新架構(gòu)已經(jīng)確定會(huì)在今年正式推出,相對(duì)于老架構(gòu),新架構(gòu)在最關(guān)鍵的性能問(wèn)題上有了非常大的提升,這將會(huì)為 React Native 開(kāi)啟一個(gè)全新的階段。

React Native 新架構(gòu)默認(rèn)用的 JavaScript 引擎是 Hermes 引擎。Hermes 是一款專為移動(dòng)端打造的 JavaScript 引擎,它支持 JavaScript 的 AOT 預(yù)編譯。帶來(lái)了更好的啟動(dòng)性能,此外在渲染機(jī)制,通信性能上均有成倍的提升,云音樂(lè)也第一時(shí)間進(jìn)行了“嘗鮮”,詳細(xì)遷移過(guò)程見(jiàn):網(wǎng)易云音樂(lè) RN 新架構(gòu)升級(jí)實(shí)踐。
云音樂(lè) RN 研發(fā)現(xiàn)狀
RN 有著眾多優(yōu)勢(shì),云音樂(lè)也有相當(dāng)多的 RN 需求,在需求不斷地迭代,研發(fā)不斷地投入過(guò)程中,還是暴露了一些問(wèn)題?;仡櫼幌?C 端場(chǎng)景的特點(diǎn),往往是
重視覺(jué),重交互
,我們來(lái)看一下目前 介入一個(gè) RN 需求開(kāi)發(fā)并最終交付上線的核心過(guò)程:
研發(fā)過(guò)程
準(zhǔn)備開(kāi)發(fā)環(huán)境
- Mac 電腦 / 手機(jī)設(shè)備 (依賴物理設(shè)備)
- App 測(cè)試包 (依賴客戶端打包)
- 模擬器 & XCode & ... (依賴運(yùn)行環(huán)境)
- RN Debugger (依賴調(diào)試工具)
- RN 開(kāi)發(fā)相關(guān)文檔 & 平臺(tái) (依賴多個(gè)平臺(tái)跳轉(zhuǎn))
- 編輯器 IDE
靜態(tài)頁(yè)面開(kāi)發(fā) & 還原視覺(jué)(交互)稿

如圖所示,開(kāi)發(fā)第一階段,還原設(shè)計(jì)稿,這個(gè)過(guò)程其實(shí)可以追溯到需求評(píng)審階段:設(shè)計(jì)稿的頁(yè)面構(gòu)成,哪些已有現(xiàn)成組件,哪些需要定制開(kāi)發(fā),樣式部分的代碼如何編寫等。
進(jìn)入業(yè)務(wù)開(kāi)發(fā)階段
不同場(chǎng)景的 RN 需求對(duì)應(yīng)的實(shí)際業(yè)務(wù)開(kāi)發(fā)有所不同,以下三種是最為常見(jiàn)的業(yè)務(wù)開(kāi)發(fā)類型。
- 埋點(diǎn)開(kāi)發(fā): 頁(yè)面曝光埋點(diǎn),點(diǎn)擊播放埋點(diǎn)等,需要開(kāi)發(fā)者手動(dòng)注入埋點(diǎn),進(jìn)行上報(bào)。
- 數(shù)據(jù)獲取: 例如獲取歌曲列表接口,編寫代碼獲取數(shù)據(jù),組件消費(fèi)數(shù)據(jù)。其實(shí)這個(gè)過(guò)程往往是會(huì)被開(kāi)發(fā)者忽略的環(huán)節(jié),假設(shè)某個(gè)業(yè)務(wù)場(chǎng)景消費(fèi)的是相同的數(shù)據(jù)和邏輯,那么這時(shí)候我們可能有兩個(gè)選項(xiàng):復(fù)制之前的代碼,或是將其封裝為工具包或者耦合至組件進(jìn)行復(fù)用。
- 協(xié)議調(diào)用: 音視頻播放等客戶端協(xié)議調(diào)用聯(lián)調(diào),需查閱相關(guān)協(xié)議文檔或工具組件文檔。
項(xiàng)目驗(yàn)收/測(cè)試
- 視覺(jué)反復(fù)修改驗(yàn)證,多主題驗(yàn)證,多機(jī)型驗(yàn)證 (開(kāi)發(fā))
- 雙端兼容性,多主題適配性 (開(kāi)發(fā) / 視覺(jué))
- 視覺(jué)驗(yàn)收頁(yè)面還原度 (視覺(jué) / 策劃)
- 業(yè)務(wù)方驗(yàn)收整體功能(QA / 策劃)
較高的研發(fā)成本

- 相對(duì) H5 應(yīng)用,RN 應(yīng)用本地開(kāi)發(fā)環(huán)境較重,依賴較多。
- 頁(yè)面靈活度高,需要熟悉現(xiàn)有組件體系,識(shí)別組件,還原視覺(jué)。
- 研發(fā)鏈路周邊生態(tài)零散,未整合,開(kāi)發(fā)時(shí)平臺(tái)跳轉(zhuǎn)重,鏈路長(zhǎng)。
- 相同業(yè)務(wù)邏輯代碼跨項(xiàng)目復(fù)用率低,未得到有效處理。
- ...
我們期望構(gòu)建一套為低碼為中心的在線研發(fā)體系,通過(guò)整套體系標(biāo)準(zhǔn)化來(lái)解決目前的問(wèn)題,降低研發(fā)成本和門檻,提高效能
。
標(biāo)準(zhǔn)化的低碼研發(fā)體系
研發(fā)鏈路前后對(duì)比
RN 迭代從需求到交付涉及到多個(gè)核心環(huán)節(jié),以下是目前開(kāi)發(fā)現(xiàn)狀和低碼研發(fā)體系的對(duì)比。

Tango 將提供以源碼為中心的 RN 在線搭建能力,支持 RN 應(yīng)用快速交付,并提供標(biāo)準(zhǔn)化的線上研發(fā)流程

傳統(tǒng)移動(dòng)端搭建的問(wèn)題和瓶頸
云音樂(lè)在移動(dòng)端傳統(tǒng)搭建上已經(jīng)有了一些實(shí)踐,但是在實(shí)際使用過(guò)程中遇到了一系列的問(wèn)題。
DSL 方案局限性
首先傳統(tǒng)搭建平臺(tái)大多基于 DSL 驅(qū)動(dòng),再交由 DSL 解析器進(jìn)行渲染,映射到對(duì)應(yīng)的組件。DSL 本質(zhì)上其實(shí)就是對(duì)代碼的一種抽象,描述為一種 Schema 的形式進(jìn)行可視化編排,
最終還是要映射到真實(shí)的組件,組件消費(fèi) DSL 中攜帶的信息
。
如果面向
業(yè)務(wù)模式穩(wěn)定的固化場(chǎng)景,進(jìn)行深度垂直定制
,在這個(gè)前提下一套 DSL 確實(shí)可以解決大部分場(chǎng)景,剩下的場(chǎng)景可以直接放棄(交由開(kāi)發(fā)介入)。
但是移動(dòng)端場(chǎng)景的特點(diǎn)就是
靈活性高
,而此類產(chǎn)品的特點(diǎn)往往
面向運(yùn)營(yíng)等非開(kāi)發(fā)角色進(jìn)行無(wú)碼搭建,快速交付。
在實(shí)際使用過(guò)程中,會(huì)遇到
DSL無(wú)法滿足業(yè)務(wù)需求,需要開(kāi)發(fā)介入定制DSL,升級(jí)組件
的情況。
這個(gè)過(guò)程中其實(shí)帶來(lái)了較大的成本:
- 搭建平臺(tái)基于 DSL 驅(qū)動(dòng),隨著業(yè)務(wù)的迭代,DSL 需要不斷升級(jí)以滿足需求的變化。
- DSL 的版本迭代和規(guī)范需要嚴(yán)格遵守,對(duì)應(yīng)組件庫(kù)和解析器等中間件的維護(hù)仍需要投入開(kāi)發(fā)資源。
- DSL 映射為客戶端組件時(shí),DSL 的變更依賴客戶端迭代,存在隱形風(fēng)險(xiǎn),且容易出現(xiàn)。RN 對(duì)應(yīng)一套標(biāo)準(zhǔn)客戶端組件庫(kù),DSL 對(duì)應(yīng)另一套客戶端組件庫(kù)的情況,維護(hù)成本非常高,侵入性強(qiáng)。
- 面向運(yùn)營(yíng),最后很大概率是研發(fā)進(jìn)行兜底開(kāi)發(fā),逐漸降低使用意愿。
基于 AST 驅(qū)動(dòng)
Tango 通過(guò) AST 驅(qū)動(dòng),可視化的修改實(shí)際上就是對(duì)源碼進(jìn)行修改,對(duì)源碼的直接修改其實(shí)就跳過(guò)了 DSL 映射到源碼的過(guò)程,這樣做的好處是,沒(méi)有中間產(chǎn)物的形成,不需要額外的開(kāi)發(fā)資源維護(hù),也不會(huì)耦合至其他環(huán)境,可以跟現(xiàn)有的 云音樂(lè) RN 研發(fā)生態(tài)較好的融合。所以
Tango 主要面向研發(fā)同學(xué),解決靈活場(chǎng)景下的 RN 開(kāi)發(fā),側(cè)重對(duì)研發(fā)環(huán)節(jié)進(jìn)行提效
。
在一些輕量場(chǎng)景,也可以作為 NoCode 平臺(tái),提供運(yùn)營(yíng)同學(xué)可視化搭建的能力。

從上圖可以看出:無(wú)論 DSL 還是 AST,最終都是映射到實(shí)際的組件,
組件能力的強(qiáng)大與否會(huì)直接影響整個(gè)低碼體系,以及需求交付的效率。組件,是非常重要的!
構(gòu)建在線真機(jī)預(yù)覽調(diào)試環(huán)境
RN 和 Web 應(yīng)用在線開(kāi)發(fā)最大的區(qū)別在于
運(yùn)行環(huán)境的不同
,Web 場(chǎng)景可以基于 CodeSandbox 實(shí)時(shí)預(yù)覽,RN 場(chǎng)景依賴 App 物理環(huán)境。
常見(jiàn)的 RN 應(yīng)用調(diào)試環(huán)境:

目前云音樂(lè) RN 研發(fā)主要使用模擬器 + 真機(jī)掃碼兩種形式進(jìn)行開(kāi)發(fā),起步我們考慮了相對(duì)輕量的方案:RN
目前云音樂(lè) RN 研發(fā)主要使用模擬器 + 真機(jī)掃碼兩種形式進(jìn)行開(kāi)發(fā),起步我們考慮了相對(duì)輕量的方案:
RN For Web 進(jìn)行初步搭建及預(yù)覽,再結(jié)合真機(jī)掃碼進(jìn)行實(shí)際聯(lián)調(diào)
,這樣做的好處是在設(shè)計(jì)器運(yùn)行沙箱上可以復(fù)用現(xiàn)有 CodeSandbox 能力,不需要做定制,但該方案馬上
暴露了一系列問(wèn)題
:
- 現(xiàn)有組件并非均兼容 RN Web,接入存在較大適配成本,收益低
- Web 環(huán)境無(wú)法模擬真機(jī)環(huán)境,協(xié)議無(wú)法調(diào)用,無(wú)法滿足實(shí)際開(kāi)發(fā)場(chǎng)景
- RN Web 與真機(jī)視覺(jué)還原度存在一定差異,視覺(jué)存在二次回歸成本
- ...
綜上,選用 Mac IOS 模擬器作為
真機(jī)運(yùn)行環(huán)境,完美貼合本地開(kāi)發(fā)體驗(yàn)
。也帶來(lái)了更大的挑戰(zhàn),我們需要
模擬一套在線開(kāi)發(fā)環(huán)境(遠(yuǎn)程本地開(kāi)發(fā))
:
- 代碼在哪里運(yùn)行 ?
- 模擬器在哪里運(yùn)行 ?
- 頁(yè)面如何獲取模擬器界面 ?
- 多人使用模擬器如何分配調(diào)度 ?
- 頁(yè)面如何與模擬器通信交互 ?
- App 內(nèi)置的聯(lián)調(diào)工具如何使用 ?
- RN 運(yùn)行日志如何透出 ?
- 與低代碼平臺(tái)怎么結(jié)合 ?
下面我們來(lái)具體看一下如何解決這些問(wèn)題。
Metro 遠(yuǎn)端構(gòu)建服務(wù)
首先我們來(lái)解決第一個(gè)問(wèn)題,回顧一下本地開(kāi)發(fā)過(guò)程:?jiǎn)?dòng) RN 項(xiàng)目,通過(guò)模擬器或者真機(jī) App 訪問(wèn) RN bundleUrl 進(jìn)行調(diào)試預(yù)覽,本地啟動(dòng)的 dev server 其實(shí)就是打包服務(wù)(metro dev server),產(chǎn)物為:
xx://10.10.10.10:8081/index.ios.bundle
那么遠(yuǎn)端構(gòu)建其實(shí)就是將本地流程容器化:拉取項(xiàng)目代碼,構(gòu)建打包,輸出產(chǎn)物。如圖所示:
那么遠(yuǎn)端構(gòu)建其實(shí)就是將本地流程容器化:拉取項(xiàng)目代碼,構(gòu)建打包,輸出產(chǎn)物。如圖所示:

在低碼平臺(tái)初始化時(shí)將完整的代碼推送至構(gòu)建服務(wù),構(gòu)建服務(wù)分配一個(gè)實(shí)例進(jìn)行上述構(gòu)建過(guò)程,平臺(tái)或者手機(jī)訪問(wèn)打包產(chǎn)物即可,代碼變更時(shí) patch 最新代碼,觸發(fā) HMR 熱更新即可。
基于直播流的模擬器投屏方案
模擬器運(yùn)行環(huán)境
接下來(lái)第二個(gè)問(wèn)題,模擬器運(yùn)行環(huán)境可以使用 Mac 系列設(shè)備,包括不限于 Mbp,Mac mini,Mac Studio 等均可,在 Mac 物理機(jī)上對(duì)模擬器進(jìn)行多開(kāi),實(shí)際可以并發(fā)啟動(dòng)的數(shù)量與設(shè)備性能正相關(guān),相同規(guī)格的設(shè)備,推薦使用 ARM 架構(gòu)的設(shè)備,性能會(huì)更加好。接下來(lái)對(duì)應(yīng)第三個(gè)問(wèn)題就是如何將模擬器的畫面?zhèn)鬏斨另?yè)面。
圖傳方案/投屏方案對(duì)比
社區(qū)方案,Expo Snack dev,支持真機(jī)預(yù)覽 & Web 兩種形式。

Expo 真機(jī)界面通過(guò)實(shí)時(shí)圖傳的方式進(jìn)行返回 (如下圖所示),我們也進(jìn)行了類似方案的實(shí)踐,實(shí)踐結(jié)果是
在 20 ~ 30FPS 幀率下實(shí)時(shí)截屏圖傳返回至 Web 再顯示,Socket 存在時(shí)序和堆積問(wèn)題,造成畫面時(shí)序不一致且閃爍嚴(yán)重
。

其實(shí)還有一種方式可以獲取到屏幕的實(shí)時(shí)畫面,**通過(guò)直播推流的形式,將物理屏幕進(jìn)行捕獲推流,網(wǎng)頁(yè)拉流播放即可,也就是傳統(tǒng)意義上的"直播"**。
起初使用 ffmpeg 進(jìn)行畫面捕獲并推流,但由于同一臺(tái)物理機(jī)上會(huì)多開(kāi)模擬器,并且存在遮擋問(wèn)題,模擬器窗口的定位,寬高的識(shí)別成本較高
ffmpeg -f x11grab -video_size 1280x720 -i :0.0+100,200 -f alsa -i default -c:v libx264 -preset ultrafast -pix_fmt yuv420p -c:a aac -f flv rtmp://your-streaming-server-url/your-stream-key
最終采用 OBS 進(jìn)行窗口捕獲及推流,OBS 優(yōu)勢(shì):自帶窗口捕獲,畫布調(diào)整,完整的推流參數(shù)配置,以及內(nèi)置 Web Socket 服務(wù)器可以進(jìn)行直播控制。
OBS 低延遲直播方案
常見(jiàn)的直播方案如下:

由于云手機(jī)交互時(shí)效性要求,需要一套
低延遲直播方案
,經(jīng)過(guò)綜合對(duì)比:
選用 SRS 流媒體服務(wù)器進(jìn)行轉(zhuǎn)碼,使用 OBS RTMP 進(jìn)行推流,Web 使用 WebRTC 進(jìn)行拉流得到云手機(jī)實(shí)時(shí)畫面。
SRS 服務(wù)器
SRS是一個(gè)開(kāi)源的(MIT協(xié)議)簡(jiǎn)單高效的實(shí)時(shí)視頻服務(wù)器,支持RTMP、WebRTC、HLS、HTTP-FLV、SRT、MPEG-DASH和GB28181等協(xié)議。SRS媒體服務(wù)器和FFmpeg、OBS、VLC、 WebRTC等客戶端配合使用,提供流的接收和分發(fā)的能力,是一個(gè)典型的發(fā)布 (推流)和訂閱(播放)服務(wù)器模型。SRS支持互聯(lián)網(wǎng)廣泛應(yīng)用的音視頻協(xié)議轉(zhuǎn)換,比如可以將RTMP或SRT, 轉(zhuǎn)成HLS或HTTP-FLV或WebRTC等協(xié)議。

使用官方 Docker 鏡像,一鍵啟動(dòng)。詳見(jiàn) SRS 官方文檔。
CANDIDATE="192.168.1.10"
docker run --rm -it -p 1935:1935 -p 1985:1985 -p 8080:8080 \
--env CANDIDATE=$CANDIDATE -p 8000:8000/udp \
registry.cn-hangzhou.aliyuncs.com/ossrs/srs:5 ./objs/srs -c conf/rtmp2rtc.conf
OBS 推流與拉流
接下來(lái)對(duì) OBS 進(jìn)行一定的配置,Mac 設(shè)備優(yōu)先選用 H264 硬件編碼進(jìn)行推流,碼率和幀數(shù)控制在一定范圍,推流地址設(shè)置為 rtmp://{your_ip}/live/{your_livestream_key} 即可。
網(wǎng)頁(yè)端使用 WebRTC 播放器進(jìn)行拉流,
WebRTC(Web Real-Time Communications)是一項(xiàng)實(shí)時(shí)通訊技術(shù),它允許網(wǎng)絡(luò)應(yīng)用或者站點(diǎn),在不借助中間媒介的情況下,建立瀏覽器之間點(diǎn)對(duì)點(diǎn)(Peer-to-Peer)的連接,實(shí)現(xiàn)視頻流和(或)音頻流或者其他任意數(shù)據(jù)的傳輸。
對(duì) WebRTC 還不太熟悉的同學(xué)可以詳細(xì)閱讀一下 Web RTC API。
效果如圖所示,
平均響應(yīng)速度在 0.5s 至 2s 內(nèi)
:

至此,我們已經(jīng)獲取到實(shí)時(shí)畫面,模擬器搖身一變成為
云手機(jī)
,接下來(lái)的核心問(wèn)題:
解決云手機(jī)的通信和交互,以及多臺(tái)云手機(jī)如何調(diào)度分配的問(wèn)題
。
基于 Socket 網(wǎng)關(guān)的云手機(jī)調(diào)度 & 通信交互方案
基于調(diào)度中心的通信機(jī)制
首先解決如何分配的問(wèn)題,場(chǎng)景是:用戶訪問(wèn)低碼平臺(tái)時(shí),需要使用一臺(tái)云手機(jī),而一臺(tái)物理機(jī)上可以啟動(dòng)多臺(tái)云手機(jī),并可以同時(shí)有多臺(tái)物理機(jī),需要正確的分配到一臺(tái)設(shè)備。
有同學(xué)可能發(fā)現(xiàn)了,這個(gè)模式非常像"反向代理",那么順著這個(gè)思路,我們需要實(shí)現(xiàn)一個(gè)
虛擬網(wǎng)關(guān),負(fù)責(zé)通信和調(diào)度
,我們來(lái)看一下大致過(guò)程:
- 將物理機(jī)中的設(shè)備主動(dòng)上報(bào)到調(diào)度中心,并建立 Socket A,上報(bào)的設(shè)備存儲(chǔ)在一個(gè)"虛擬設(shè)備池"中。
- 調(diào)度中心對(duì)低碼平臺(tái)暴露一個(gè) /lock 接口,從設(shè)備池中獲取可用設(shè)備并占用,返回占用的設(shè)備信息,同步設(shè)備池狀態(tài),完成分配。
- 低碼平臺(tái)與云手機(jī)建立 WebRTC 連接,獲取到屏幕實(shí)時(shí)畫面。
這里還有一個(gè)問(wèn)題,
如何保證高并發(fā)下云手機(jī)與用戶的一致性
(不會(huì)出現(xiàn)同一個(gè)設(shè)備被重復(fù)分配的問(wèn)題), 服務(wù)端的同學(xué)應(yīng)該非常熟悉這個(gè)場(chǎng)景,關(guān)鍵詞如:"庫(kù)存","超賣","秒殺",”搶票“,“下單”,“抽獎(jiǎng)”等場(chǎng)景均會(huì)涉及到這個(gè)問(wèn)題,
我們可以通過(guò)加鎖來(lái)保證資源訪問(wèn)的單一
,如 Redis 分布式鎖,感興趣的同學(xué)可以自行查閱一下相關(guān)資料。
此時(shí)用戶已經(jīng)分配到云手機(jī),且可以看到實(shí)時(shí)畫面。接下來(lái)就要解決如何通訊的問(wèn)題,既然是通訊那么肯定首選長(zhǎng)連接,我們需要與云手機(jī)建立
Socket B
,該 Socket 可以將頁(yè)面的消息發(fā)送至云手機(jī) App 并將 App 中的數(shù)據(jù)返回至平臺(tái)。上述流程如圖所示:

此時(shí)云手機(jī)通訊機(jī)制已經(jīng)建立,我們可以請(qǐng)求云手機(jī)加載某個(gè) RN 頁(yè)面,但此時(shí)云手機(jī)無(wú)法"使用",云手機(jī)需要支持基本的
點(diǎn)擊/滑動(dòng)
交互:

在線調(diào)試能力
基于已經(jīng)建立的通訊連接,我們可以遠(yuǎn)程"操控"云手機(jī)并獲取到 App 中運(yùn)行的信息以及日志,在平臺(tái)側(cè)進(jìn)行展示,為在線聯(lián)調(diào)提供了
通道
,目前主要開(kāi)放了以下幾個(gè)能力:

快捷工具欄:
為了還原本地開(kāi)發(fā)體驗(yàn),我們將調(diào)試工具中常用的能力進(jìn)行了可視化,在云手機(jī)一側(cè)提供了工具欄,進(jìn)行快速使用。
運(yùn)行狀態(tài)欄:
在底部狀態(tài)欄的左側(cè)顯示了目前云手機(jī)的設(shè)備信息以及當(dāng)前 App 的信息。
日志信息欄: 顯示當(dāng)前
warning
,
error
的數(shù)量,點(diǎn)擊后展開(kāi) Console 面板,查看當(dāng)前 Metro 日志信息,對(duì)齊 Chrome Console 體驗(yàn)。
- 至此,前文提到在線開(kāi)發(fā)的7個(gè)問(wèn)題均已解決,我們來(lái)看最后一個(gè)問(wèn)題,如何與低碼進(jìn)行結(jié)合
多維度的可視化搭建
模擬節(jié)點(diǎn)選中效果,結(jié)構(gòu)樹(shù)可視化編排
在 C 端場(chǎng)景 Tango 也保持了社區(qū)常見(jiàn)的交互形式,通過(guò)頁(yè)面結(jié)構(gòu)樹(shù)面板可以對(duì)頁(yè)面中的節(jié)點(diǎn)進(jìn)行增刪改查,調(diào)整位置等操作。
常見(jiàn)交互為大綱樹(shù)和設(shè)計(jì)器都需要在點(diǎn)擊后回顯選中的節(jié)點(diǎn),由于 RN 代碼實(shí)際運(yùn)行在客戶端中,此處就帶來(lái)了另一個(gè)問(wèn)題:
靜態(tài)的 RN 代碼節(jié)點(diǎn)與客戶端運(yùn)行時(shí)的節(jié)點(diǎn)如何映射
,確實(shí)是一個(gè)比較有趣的問(wèn)題,我們可以延續(xù)之前模擬點(diǎn)擊交互傳的思路,大致如下:

通過(guò)標(biāo)記節(jié)點(diǎn),客戶端計(jì)算返回選中的節(jié)點(diǎn)坐標(biāo)寬高信息,模擬選中框覆蓋在云手機(jī)上,達(dá)到選中的效果。
雙模式切換,源碼模式左看右寫快速開(kāi)發(fā)
對(duì)于專業(yè) RN 開(kāi)發(fā)同學(xué),或復(fù)雜場(chǎng)景需切換至源碼進(jìn)行開(kāi)發(fā),我們也對(duì)源碼模式下的開(kāi)發(fā)體驗(yàn)進(jìn)行了增強(qiáng),提供"左看右寫"的模式,結(jié)合完善的在線調(diào)試工具,典型場(chǎng)景下,
可以完全脫離本地開(kāi)發(fā)環(huán)境,使用線上進(jìn)行開(kāi)發(fā)。

多形式的代碼生成

Tango 本質(zhì)上基于
源碼驅(qū)動(dòng)
,在 CMS B 端場(chǎng)景,CRUD 類型的頁(yè)面可以通過(guò)數(shù)據(jù)模型驅(qū)動(dòng)來(lái)快速初始化一個(gè)可用頁(yè)面。
由于 C 端場(chǎng)景的高靈活度,開(kāi)發(fā)時(shí)大部分時(shí)間是在還原樣式,實(shí)現(xiàn)靜態(tài)頁(yè)面。通過(guò) D2C AIGC 模板市場(chǎng)等能力可以對(duì)設(shè)計(jì)稿,典型場(chǎng)景進(jìn)行快速還原并得到初始代碼,再結(jié)合低碼平臺(tái)進(jìn)行二次搭建,來(lái)降低從 0 搭建成本。
低碼生態(tài)建設(shè)
Tango 低碼的理念不僅限于"在線","可視化搭建",
旨在構(gòu)建一個(gè)以源碼為中心,完整的低碼研發(fā)生態(tài)體系
。
運(yùn)行時(shí)框架 & 組件
低碼接入的組件能力完善與否也直接
影響開(kāi)發(fā)搭建效率
,我們針對(duì)典型場(chǎng)景使用的高頻組件進(jìn)行細(xì)分,對(duì)此類組件進(jìn)行"低碼化"增強(qiáng),減少原子組件重復(fù)低效使用的問(wèn)題。
此外 Tango RN 也延續(xù)了 Tango Boot 的應(yīng)用架構(gòu)推崇 View-Model-Service 三層模型,演化為 Tango RN Boot 應(yīng)用框架,其中模型層定義了 Observable States,視圖層觀察 Model 的變化而進(jìn)行自動(dòng)更新,服務(wù)層用來(lái)創(chuàng)建一組服務(wù)函數(shù),供視圖層和模型層消費(fèi)。基于 Tango MVVM 理念,Tango RN Boot 在 Stores & Services 以外,對(duì) RN 常見(jiàn)開(kāi)發(fā)能力進(jìn)行封裝,讓開(kāi)發(fā)者可以快速構(gòu)建 RN 應(yīng)用。

數(shù)據(jù)資產(chǎn)沉淀與可視化編排
- 這里先挖個(gè)坑,后續(xù)會(huì)有專門的文章詳細(xì)介紹。
云手機(jī)還能做什么
云手機(jī)顧名思義就是取代了物理手機(jī),目前依賴物理手機(jī)的場(chǎng)景大部分都可以通過(guò)云手機(jī)進(jìn)行平替,并且由于云手機(jī)擁有建全的
通信機(jī)制,交互能力
,可以暢享更多的可能性,以下羅列了一些比較常見(jiàn)的應(yīng)用場(chǎng)景:
- 掃碼場(chǎng)景
所有掃碼類的場(chǎng)景都可以接入云手機(jī)進(jìn)行效果預(yù)覽,通過(guò)云手機(jī)代替真實(shí)手機(jī)訪問(wèn)掃碼結(jié)果。
- 協(xié)議調(diào)用/服務(wù)化
客戶端協(xié)議可以通過(guò)云手機(jī)進(jìn)行遠(yuǎn)程聯(lián)調(diào)調(diào)用,測(cè)試協(xié)議調(diào)用情況,可以借助云手機(jī)作為運(yùn)行容器將協(xié)議的調(diào)用服務(wù)化,包裝為 API 接口供三方平臺(tái)使用。
- 視覺(jué)驗(yàn)收
可以使用云手機(jī)來(lái)查看應(yīng)用程序在不同設(shè)備和屏幕尺寸上的顯示效果,并確保界面元素的布局、顏色和交互行為的一致性。
- 測(cè)試回歸
可以用于測(cè)試回歸,測(cè)試團(tuán)隊(duì)可以使用云手機(jī)來(lái)運(yùn)行自動(dòng)化測(cè)試腳本,執(zhí)行一些特定的任務(wù)。
低碼的天平問(wèn)題
篇幅較長(zhǎng),如果您看到這里了,非常感謝,希望能給各位帶來(lái)一些收獲。最后還是想聊一點(diǎn)題外話,市面上大大小小的"低碼"產(chǎn)品非常多,包括不限于各種
可視化搭建平臺(tái),(X)aaS平臺(tái),代碼插件工具
等。
低碼理念的出現(xiàn)本質(zhì)上是為了解決某個(gè)(類)問(wèn)題或某個(gè)(些)場(chǎng)景。在近幾年社區(qū)低碼概念的發(fā)展以及業(yè)務(wù)實(shí)踐經(jīng)驗(yàn)來(lái)看:
- 過(guò)于通用的方案: 不夠貼合業(yè)務(wù),無(wú)法開(kāi)箱即用,接入成本高,門檻高,拓展性強(qiáng)。
- 過(guò)于垂直的方案: 貼合業(yè)務(wù)場(chǎng)景,可以開(kāi)箱即用,接入成本低,門檻低,拓展性差。
這就是一個(gè) "天平" 問(wèn)題,如何尋找到平衡點(diǎn)是一個(gè)值得持續(xù)探討的問(wèn)題,低碼的本質(zhì)是提效,是解決問(wèn)題,在這個(gè)大前提下,如何做到
高內(nèi)聚,低耦合的 T 型架構(gòu)
,是值得低碼從業(yè)者持續(xù)思考和實(shí)踐的 ~ 共勉 ~
總結(jié)
目前 RN 低代碼研發(fā)體系建設(shè)正在持續(xù)進(jìn)行,相關(guān)周邊生態(tài)的能力正在不斷完善,后續(xù)會(huì)將云手機(jī)能力下沉服務(wù)化,并逐步支持覆安卓云手機(jī),以中臺(tái)的形式開(kāi)放給更多有需要的同學(xué)快速使用。之后會(huì)對(duì)核心模塊的技術(shù)細(xì)節(jié),以及可視化數(shù)據(jù)編排等進(jìn)行更為詳細(xì)的介紹,請(qǐng)持續(xù)關(guān)注我們的低碼系列文章,感謝 ~
參考鏈接
https://time.geekbang.org/column/article/499434
- END -
未經(jīng)允許不得轉(zhuǎn)載:RPA中國(guó) | RPA全球生態(tài) | 數(shù)字化勞動(dòng)力 | RPA新聞 | 推動(dòng)中國(guó)RPA生態(tài)發(fā)展 | 流 > 網(wǎng)易云音樂(lè) RN 低代碼體系建設(shè)思考與實(shí)踐
熱門信息
閱讀 (14728)
1 2023第三屆中國(guó)RPA+AI開(kāi)發(fā)者大賽圓滿收官&獲獎(jiǎng)名單公示閱讀 (13753)
2 《Market Insight:中國(guó)RPA市場(chǎng)發(fā)展洞察(2022)》報(bào)告正式發(fā)布 | RPA中國(guó)閱讀 (13055)
3 「RPA中國(guó)杯 · 第五屆RPA極客挑戰(zhàn)賽」成功舉辦及獲獎(jiǎng)名單公示閱讀 (12964)
4 與科技共贏,與產(chǎn)業(yè)共進(jìn),第四屆ISIG中國(guó)產(chǎn)業(yè)智能大會(huì)成功召開(kāi)閱讀 (11567)
5 《2022年中國(guó)流程挖掘行業(yè)研究報(bào)告》正式發(fā)布 | RPA中國(guó)