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

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

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

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

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

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

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

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

React Native能力探索及演進

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

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

性能方面：整體交互性能稍有下降，但綜合體驗符合預期；

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

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

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

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

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

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

基于這些問題，團隊開始思考和尋找對應的解決方案，隨后采取如下措施：

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

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

o 基于華為云強大的平臺能力，構建服務端補丁包管理體系：

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

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

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

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

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

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

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

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

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

o 嘗試構建自動化測試能力。

從4類應用場景探索WebView能力建設

差旅APP內應用場景的復雜多樣性使得框架層面在一些場景上需要使用到webview模塊的使用，即通過APP內置瀏覽器打開web頁面給用戶提供一些服務能力，團隊總結為如下4類場景：

o 企業(yè)專屬模塊

o 多端共用模塊

o 新增/高變化性模塊

o 運營活動類模塊

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

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

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

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

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

? 中期內，計劃構建起RN H5的融合方案，打造原子化、場景化的服務能力；

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

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

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