本文分享自華為云社區(qū)《DTSE Tech Talk 第21期丨從原生邁向混合，小而美團(tuán)隊(duì)如何搞定APP高效定制？》，作者：華為云社區(qū)精選 。原文詳情：https://bbs.huaweicloud.com/blogs/393888?utm_source=jinritoutiao&utm_medium=bbs-ex&utm_campaign=other&utm_content=content

令開發(fā)者們心動(dòng)的App端開發(fā)神器究竟長什么樣？小而美的團(tuán)隊(duì)如何精準(zhǔn)拿捏客戶多元化定制需求，實(shí)現(xiàn)高效開發(fā)？在企業(yè)通用服務(wù)類App中，如何瞄準(zhǔn)團(tuán)隊(duì)定位，快速engage客戶？

近日，華為云DTSE技術(shù)布道師徐意帶來了《揭秘華為云數(shù)字化差旅：如何用混合開發(fā)玩轉(zhuǎn)高效定制》（https://bbs.huaweicloud.com/live/DTT_live/202303011600.html）的主題分享。徐意與開發(fā)者們交流了華為云數(shù)字化差旅移動(dòng)端APP從原生框架到混合開發(fā)的演進(jìn)過程，以及如何通過React Native及Hybrid混合開發(fā)框架去提升開發(fā)效率，解決企業(yè)客戶多樣的定制化訴求，讓開發(fā)者對(duì)混合框架的選擇及可能解決的場景有一定的了解和認(rèn)識(shí)。此外，針對(duì)中小企業(yè)混合開發(fā)實(shí)踐，徐意也從團(tuán)隊(duì)定位、研發(fā)投入及生態(tài)構(gòu)建等視角給予了專業(yè)的建議。

華為云數(shù)字化差旅，源于華為18年差旅管理實(shí)踐，定位于企業(yè)差旅管理市場。依托“全場景、全流程、全數(shù)據(jù)”的建設(shè)思路，通過搭建一體化的數(shù)字化差旅管理平臺(tái)，為客戶提供從差旅申請(qǐng)、審批、預(yù)訂、行中保障、報(bào)銷及差旅分析的一站式出行服務(wù)，助力其實(shí)現(xiàn)精益管理、提質(zhì)增效、安全合規(guī)，不斷提升員工出行體驗(yàn)，使能企業(yè)數(shù)字化轉(zhuǎn)型成功。截止目前，華為云數(shù)字化差旅服務(wù)范圍已經(jīng)涉及170 國家和地區(qū)，向全球480w 企業(yè)客戶提供高品質(zhì)服務(wù)，最終把數(shù)字化差旅帶入每個(gè)企業(yè)、每個(gè)員工。

從原生到混合：緊貼業(yè)務(wù)需求，選擇高效合適的混合框架

APP原生框架以性能高、體驗(yàn)好、功能豐富、穩(wěn)定性高等特點(diǎn)而著稱。但是由于其也存在開發(fā)成本高、移植性差、發(fā)布節(jié)奏慢等劣勢，在現(xiàn)今越來越敏捷的交付節(jié)奏下，逐漸難以滿足開發(fā)者及企業(yè)的訴求。

華為云數(shù)字化差旅在市場拓展過程中，隨著企業(yè)客戶的不斷增加，多層面的差異性逐漸顯現(xiàn)，差旅業(yè)務(wù)開發(fā)面臨著諸多挑戰(zhàn)：對(duì)接模式的差異、企業(yè)白牌定制、企業(yè)業(yè)務(wù)及個(gè)性化模塊定制、企業(yè)差旅管理政策差異、企業(yè)緊急政策要求、多團(tuán)隊(duì)版本配合、特殊場景需求保障等等。在高頻的項(xiàng)目交付中，“體驗(yàn)要好、交付要快、功能穩(wěn)定、成本要低”成為客戶的一致訴求。如何在持續(xù)滿足客戶需求的同時(shí)推進(jìn)技術(shù)升級(jí)，也是當(dāng)前差旅團(tuán)隊(duì)亟待思考的點(diǎn)。

從框架訴求、開發(fā)能力模型、維護(hù)成本3個(gè)維度出發(fā)，華為云數(shù)字化差旅開發(fā)團(tuán)隊(duì)綜合評(píng)估了市面上主流成熟的混合開發(fā)框架，通過分析Hybrid、React Native、Flutter、Uni-app等框架的優(yōu)缺點(diǎn)，結(jié)合實(shí)際業(yè)務(wù)訴求，先引入React Native框架去嘗試解決業(yè)務(wù)交付難題。

React Native能力探索及演進(jìn)

差旅團(tuán)隊(duì)在項(xiàng)目中首先嘗試通過相對(duì)簡單直接的單RN包的方式引入React Native框架能力，之后嘗試使用配套的熱更新能力，實(shí)現(xiàn)整RN包熱更新。通過前期的嘗試，在一個(gè)新業(yè)務(wù)開發(fā)中，團(tuán)隊(duì)逐步體驗(yàn)到Android與iOS代碼合一、效率提升、問題修復(fù)效率高等框架優(yōu)勢：

效率方面：實(shí)現(xiàn)兩端一套代碼的訴求，業(yè)務(wù)開發(fā)、調(diào)試效率顯著提升；

性能方面：整體交互性能稍有下降，但綜合體驗(yàn)符合預(yù)期；

難度方面：業(yè)務(wù)開發(fā)技能JavaScript，上手更快；

熱更新方面：具備熱更新能力，提升靈活性。

在引入React Native框架后，團(tuán)隊(duì)之前面臨的種種客戶交付跳轉(zhuǎn)看似也有了可行的解決方案。但團(tuán)隊(duì)逐步在做去割接其他業(yè)務(wù)時(shí)，也浮現(xiàn)出一些新的框架問題：

o 單RN包模式下，隨著業(yè)務(wù)逐漸增多，bundle變大，初始化時(shí)間較長，內(nèi)存消耗大；

o 整包熱更新模式導(dǎo)致熱更新文件大，下載等待時(shí)間長，生效慢；

o 隨著客戶增多，不同的客戶包、不同版本需要不同的補(bǔ)丁包，導(dǎo)致手工管理困難。

基于這些問題，團(tuán)隊(duì)開始思考和尋找對(duì)應(yīng)的解決方案，隨后采取如下措施：

o 使用Facebook metro構(gòu)建工具進(jìn)行進(jìn)行分包能力開發(fā)，實(shí)現(xiàn)基本包與業(yè)務(wù)包分解，各業(yè)務(wù)包代碼與功能獨(dú)立，相互隔離，業(yè)務(wù)按需加載，按需釋放。

o APP端熱更新同步分包機(jī)制，按業(yè)務(wù)包實(shí)現(xiàn)獨(dú)補(bǔ)丁包隔離。同時(shí)研究熱更新生效策略并嘗試啟動(dòng)等待生效，再啟動(dòng)生效，實(shí)時(shí)生效等多種策略。

o 基于華為云強(qiáng)大的平臺(tái)能力，構(gòu)建服務(wù)端補(bǔ)丁包管理體系：

? 使用google diff-match-patch text算法自動(dòng)化實(shí)現(xiàn)代碼差異對(duì)比，流水線構(gòu)建增量補(bǔ)丁包，顯著降低補(bǔ)丁包大小。

? 自建熱更新管理系統(tǒng)，實(shí)現(xiàn)多產(chǎn)品、多版本、多渠道補(bǔ)丁分發(fā)管理以及灰度發(fā)布能力。

? 使用華為云OBS安全存儲(chǔ)，CDN分發(fā)等服務(wù)提升補(bǔ)丁包下載速率及穩(wěn)定性，同時(shí)根據(jù)針對(duì)補(bǔ)丁包進(jìn)行安全校驗(yàn)防篡改以及補(bǔ)丁包密碼加密等能力。

除了以上框架問題之外，團(tuán)隊(duì)通過持續(xù)構(gòu)建RN能力生態(tài)，不斷提升客戶個(gè)性化訴求的場景覆蓋及交付效率：

o 建設(shè)并持續(xù)完善RN組件庫，快速構(gòu)建企業(yè)UI頁面；

o 通過字體庫圖標(biāo)、插畫系統(tǒng)，實(shí)現(xiàn)圖片素材的可定制化；

o 設(shè)計(jì)個(gè)性化主題配置能力，實(shí)現(xiàn)配套主題切換；

o 持續(xù)RN版本升級(jí)，提升性能、引入新功能；

o 提供真機(jī)調(diào)測包；多環(huán)境切換能力，提升開發(fā)測試效率；

o 嘗試構(gòu)建自動(dòng)化測試能力。

從4類應(yīng)用場景探索WebView能力建設(shè)

差旅APP內(nèi)應(yīng)用場景的復(fù)雜多樣性使得框架層面在一些場景上需要使用到webview模塊的使用，即通過APP內(nèi)置瀏覽器打開web頁面給用戶提供一些服務(wù)能力，團(tuán)隊(duì)總結(jié)為如下4類場景：

o 企業(yè)專屬模塊

o 多端共用模塊

o 新增/高變化性模塊

o 運(yùn)營活動(dòng)類模塊

基于以上各類應(yīng)用場景，差旅APP首先通過Android及iOS原生功能的開發(fā)及配置滿足如支付等三方應(yīng)用跳轉(zhuǎn)場景及電話、郵件、相冊(cè)、文件、定位、多媒體等能力場景，同時(shí)又進(jìn)一步構(gòu)建一套較完備的JSBridge方法庫，將web頁面所需的原生能力封裝成API，包括界面交互類（如返回、刷新、導(dǎo)航欄等）、登錄類（登錄信息獲取、實(shí)時(shí)登錄等）、系統(tǒng)信息類(系統(tǒng)、版本、安全區(qū)域、設(shè)備id、暗黑、字體等)及其他功能類（分享、定位、跳轉(zhuǎn)、業(yè)務(wù)功能等）。

在提供各類方法能力的同時(shí)，團(tuán)隊(duì)注意到web端的能力訴求涉及一定的敏感信息類，故在提供這類能力的同時(shí)，設(shè)計(jì)并構(gòu)建了一套webview安全加固策略：域名白名單管控；JSBridge 方法管控；業(yè)務(wù)Token權(quán)限管控。

3大階段規(guī)劃，了解差旅App未來演進(jìn)方向

為持續(xù)支撐業(yè)務(wù)發(fā)展、提升用戶體驗(yàn)、沿襲“全場景、全流程、全數(shù)據(jù)”的建設(shè)思路，華為云數(shù)字化差旅團(tuán)隊(duì)基于自身技能及業(yè)務(wù)特點(diǎn)，會(huì)始終保持研究投入。對(duì)于差旅App未來發(fā)展，給出了三個(gè)階段的規(guī)劃：

? 短期內(nèi)，主要著眼于RN版本可信、熱更新能力的提升；

? 中期內(nèi)，計(jì)劃構(gòu)建起RN H5的融合方案，打造原子化、場景化的服務(wù)能力；

? 長期發(fā)展來看，會(huì)依托低代碼等先進(jìn)技術(shù)，打造多框架共建及配置化能力成為預(yù)研方向。

在最后的分享環(huán)節(jié)，針對(duì)中小企業(yè)在面臨繁重、多元定制的交付需求等問題，講師也從團(tuán)隊(duì)定位、APP框架選型、研發(fā)投入、生態(tài)構(gòu)建、網(wǎng)絡(luò)安全意識(shí)提升等方面給出了可行性的建議，希望開發(fā)者們能夠依托混合開發(fā)玩轉(zhuǎn)高效定制，快速響應(yīng)客戶需求，實(shí)現(xiàn)自身技術(shù)的迭代升級(jí)。

關(guān)注#華為云開發(fā)者聯(lián)盟#，第一時(shí)間了解華為云新鮮技術(shù)~