【于希哲】React Native 三端同構在雪球的實踐.pdf

《【于希哲】React Native 三端同構在雪球的實踐.pdf》由會員分享，可在線閱讀，更多相關《【于希哲】React Native 三端同構在雪球的實踐.pdf（50頁珍藏版）》請在三個皮匠報告上搜索。

1、R Re ea ac ct t N Na at ti iv ve e 三三端端同同構構在在雪雪球球的的實實踐踐于于希希哲哲雪球前端專家雪球前端專家10 年從業經驗私募前端負責人多個等開源項目貢獻者專注于多端同構、研發效能提升等于于希希哲哲contents效效果果 :R RN N 三三端端同同構構在在雪雪球球的的效效果果01落落地地：怎怎么么把把同同構構方方案案應應用用到到我我的的業業務務中中？04原原理理：R RN N 三三端端同同構構的的原原理理03優優勢勢：跟跟其其他他跨跨端端方方案案對對比比的的優優勢勢02展展望望：不不足足和和未未來來方方向向發發現現投投資資好好機機會會5700 萬聰明

2、的投資者與雪球專業投研能力，幫用戶發現投資好機會基基金金、私私募募、股股票票全全都都有有完整及獨特的全品類市場標的，一站式滿足用戶的投資需求緩緩解解投投資資焦焦慮慮用戶、主理人、專業機構、雪球團隊，為你提供多元的陪伴體系安安全全、可可信信、低低費費率率證監會核準的持牌基金銷售機構、銀行全程資金監管多多端端同同構構的的趨趨勢勢私私域域開開發發現現狀狀需求1需求2需求3iOS 開發安卓開發私域 H5 開發全全球球趨趨勢勢COMPETITION IN THE MOBILE APPLICATION ECOSYSTEM美國商務部 移動應用生態中的競爭白皮書 2023 年 2 月“E En nc co o

3、u ur ra ag ge e t to oo ol ls s a an nd d s st ta an nd da ar rd ds s t to o i in nc cr re ea as se e i in nt te er ro op pe er ra ab bi il li it ty y a an nd d r re ed du uc ce e d de ev ve el lo op pe er r c co os st ts s.”R RN N 三三端端同同構構是是什什么么？有有哪哪些些能能力力？一一套套代代碼碼三三端端原原生生體體驗驗iOS/安卓/H5業務代碼一致，原生體驗 顯

4、顯著著改改善善開開發發體體驗驗將客戶端開發門檻降低到 Web 開發實實現現三三端端通通用用組組件件庫庫告別三端組件的單獨封裝抹平三端差異iOS安卓HR RN N 三三端端同同構構在在雪雪球球的的實實踐踐應應用用雪雪球球基基金金業業務務頁頁面面 R RN N 三三端端同同構構 9 90 0%R RN N 三三端端同同構構在在雪雪球球應應用用的的例例子子私私募募基基金金商商品品頁頁頁面復雜 20+復雜模塊 6 個二級頁工期緊張 同同構構效效果果：開發人效相比于傳統開發 提提升升一一倍倍 以上APP 中 打打開開速速度度媲媲美美原原生生，支持線上熱更新頁面啟動 P50 5 50 0ms P95 20

5、0ms帶接口全加載完 4 40 00 0ms 以內三三端端一一致致性性展展示示微微信信內內H H5 5 跟app功能一樣lighthouse跑分80，頁面js R RN N 三三端端同同構構的的效效率率提提升升分分析析業務需求iOS 開發安卓開發H5 開發業務需求同構開發安卓開發 1 10 0 天開發+3 3 天聯調ios 開發 1 10 0 天開發+3 3 天聯調H5 開發 7 7 天開發 +2 2 天聯調3 3 人 共 3 35 5 人天 崗位限制不能替換大前端開發8 8 天開發（同web開發）+2 2 天聯調（調試方便）2 2 天適配（客戶端 UI 微調）1 1 人 共 1 12 2 人

6、天三個崗位都能開發常常規規開開發發同同構構開開發發同同構構后后的的反反饋饋UI 樣式寫起來方便，調試也容易，跟 web 開發體驗差不多使用同構，改動能馬上看到效果。習慣后再用原生開發都覺得不方便了需求開發非?？?，測試和后端有時跟不上我們的節奏之前需求排期的瓶頸都在大前端，如今好多了需求評審會不用拉一堆人了。業務流程，多端完全一致。還能不發版熱更新組件封裝很好推進，樣式規范現在 RN 包幾分鐘就能打包完成，不用像之前客戶端重新打包要等一個小時可以直接在微信中發給客戶，在微信里完成基金交易全流程，頁面內容跟 app 中一樣豐富前前端端開開發發安安卓卓開開發發i iO OS S開開發發P PMMO

7、O產產品品經經理理設設計計師師測測試試運運營營contents優優勢勢：跟跟其其他他跨跨端端方方案案對對比比的的優優勢勢0 02 22.1 跨端方案對比2.2 同構方案優勢2.3 與純 RN 方案對比2.4 同構 UI 開發的優勢2 2.1 1 跨跨端端方方案案對對比比效率、體驗、成本、通用性上取得最大化的平衡2 2.2 2 R RN N 同同構構方方案案優優勢勢 -客客戶戶端端方方面面熱熱更更新新j js s 語語言言門門檻檻低低生生態態好好蘋果 3.3.2 條款The o on nl ly y e ex xc ce ep pt ti io on n to the foregoing is

8、scripts and code downloaded and run by Apples built-in WWe eb bK Ki it t f fr ra amme ew wo or rk k o or r J Ja av va as sc cr ri ip pt tC Co or re e微微軟軟T Twwi it tt te er rS Sh ho op pi if fy yF Fa ac ce eb bo oo ok k5 58 8React Native for macOSReact Native WindowsReact Native WebReact Native SkiaR

9、eact VR(React Native)React NativeReact Native E2 2.2 2 R RN N 同同構構方方案案優優勢勢 -H H5 5 方方面面頁面性能相比于純 web 開發頁面基本持平，在代碼分割按需加載方面也沒有劣勢，不像 Flutter web 那樣動輒幾 MB 的 js 資源，完全可以在生產環境使用。支支持持拆拆包包、按按需需加加載載、各各種種瀏瀏覽覽器器插插件件私域側重在手機中的 H5，對 js 包體積及 H5 性能更敏感 頁頁面面 j js s 資資源源l li ig gh ht th ho ou us se e 跑跑分分2 2.3 3 與與純純 R

10、RN N 開開發發對對比比 RN 開發痛點R RN N 開開發發調調試試不不方方便便 效效率率低低不不支支持持豐豐富富的的瀏瀏覽覽器器調調試試插插件件想看效果起碼需要模擬器或者真機，成本高。RN 的樣式開發、元素審查要一直盯著手機屏幕。RN 的配套工具遠不如web端豐富。頁面狀狀態態管管理理、網網絡絡請請求求查查看看、接接口口聯聯調調沒有方便的官方工具，甚至沒有最佳實踐，大大部部分分是是通通過過打打 l lo og g。2 2.3 3 與與純純 R RN N 開開發發對對比比 -體體驗驗提提升升在實現 RN/H5 同構后，大幅改善了 RN 的開發體驗用用瀏瀏覽覽器器開開發發 R RN N樣樣式

11、式初初步步chrome 選擇 iphone se 寬度 375，可直接與設計稿 1：1 對照。頁頁面面狀狀態態數數據據查查看看可通過 React Devtool 查看頁面內部 state、hooks、store 數據查看。接接口口調調試試直接在 chrome 網絡調試 tab 進行接口聯調開發，簡單高效。2 2.4 4 前端 UI 樣式開發的痛點要給每個元素想一個有意義的 classnamecss js 兩個文件要來回切換css 樣式需隔離css 樣式冗余屬性重復定義css 體積不斷增大RN 跟 css 寫法有差異，寫不好容易崩潰RN 樣式寫法繁瑣冗余每個元素都要重復設置日夜間主題顏色、布局方

12、式、文字大小、屏幕適配RN 雙端樣式有細微差異痛痛點點2 2.4 4 同同構構方方案案 U UI I 開開發發的的優優勢勢S St ty yl le ed d S Sy ys st te emm雪雪球球定定制制化化的的樣樣式式組組件件系系統統編程思路順暢，無需絞盡腦汁給樣式起名代碼精簡，減低 90%的樣式代碼量 實現 Design Token 自帶主題切換、屏幕適配、三端差異編譯出原子化 CSS，解決 CSS 歷史問題contents原原理理：R RN N 三三端端同同構構的的方方案案及及原原理理0 03 33.1 同構方案3.2 React Native Web 原理3.3 Styled S

13、ystem 實現原理3.4 同構組件庫實現原理3.5 同構的服務端渲染原理3 3.1 1 三三端端同同構構的的整整體體方方案案客客戶戶端端部部分分通過 React Native 生成雙端代碼，并為 App 提供動態化能力。同時借助 RN/H5 同構，改善 RN 開發方式，提高開發體驗。H H5 5 部部分分通過 React Native Web 將 RN 代碼編譯為 H5，并實現服務端渲染，將雪球客戶端里的 RN 功能和體驗完整復刻同步到微信體系。S Sn no owwB Bo ox x 同同構構組組件件庫庫實現樣式組件系統，封裝組件，抹平三端差異3 3.2 2 同同構構原原理理 -R Re

14、ea ac ct t N Na at ti iv ve e WWe eb 3 3.2 2 R Re ea ac ct t N Na at ti iv ve e WWe eb b 實實現現原原理理樣樣式式系系統統手手勢勢系系統統組組件件映映射射原子化 CSS 7 年前已經在 React Native Web 中實現提供一層抽象，使得開發者可以使用 React Native 的組件模型和開發方式來構建 Web 應用通過統一的事件系統來處理用戶輸入和交互，開發者可以使用相同的手勢系統將 React Native 的組件映射到對應的 Web 組件上3 3.2 2 R RN NWW 實實現現原原理理 -

15、樣樣式式系系統統 -原原子子化化 C CS SS S解決CSS樣式冗余重復、樣式無法隔離、無法按需加載等問題?？蛻舳瞬恢С?CSS，去除CSS后Web 能跟客戶端樣式代碼完全一致，實現跨端組件封裝。頁面數量CSS 體積原子化函數，遍歷樣式對象的屬性，根據屬性和值生成唯一的類名，并將類名和對應的規則添加到compiledStyle 和 compiledRules 中。如果屬性或值在緩存中已存在，則直接使用緩存的類名和規則。優優勢勢實實現現原原理理3 3.2 2 R RN NWW 實實現現原原理理 -樣樣式式系系統統 -原原子子化化 C CS SS SS St ty yl le eX XReact

16、 后續的樣式處理方式重構后 413 kB-74 kB(包括深色模式)3 3.2 2 R RN NWW 實實現現原原理理 -組組件件映映射射V Vi ie eww C Co ommp po on ne en nt ts s R Re ea ac ct t N Na at ti iv ve eR Re ea ac ct t在 react native web 的處理中，react native 像是 react 的一個組件庫所以能復用 react 前端生態T Te ex xt tI Imma ag ge es s C Co ommp po on ne en nt ts s基基礎礎組組件件組件映射處

17、理props屬性轉發3 3.3 3 S St ty yl le ed d S Sy ys st te emm 的的實實現現原原理理同同構構基基礎礎組組件件B Bo ox xComponentsT Tx xt t同構組件庫React NativeReact Native WebiOSAndroidWebRN中間層三端B Bo ox x 盒盒子子組組件件實現樣式屬性簡寫，顏色系統，主題切換，屏幕大小自適應等T Tx xt t 文文字字組組件件 支持字號、字重、顏色、雪球常用 DIN 字體等，封裝行內占位等3 3.3 3 S St ty yl le ed d S Sy ys st te emm 的的

18、實實現現原原理理 屏屏幕幕適適配配 i ip ph ho on ne e8 8i ip ph ho on ne e X Xr ri ip ph ho on ne e 8 8i ip ph ho on ne e 1 12 2i ip ph ho on ne e 1 13 3 P Pr ro o MMa ax x#3 3.4 4 同同構構組組件件庫庫及及實實現現原原理理代碼 全全部部由由 T TS S 實實現現 告別多端單獨封裝除了在 RN 開發中使用外，同構組件庫也可在純前端 CRA、vite、next 等項目中使用，實現了真正意義上的跨端組件封裝。樣樣式式組組件件系系統統 和和 5 50 0+

19、同同構構組組件件一套組件庫，三端運行，抹平三端差異OS:iOS|android|windows|macos|web|node由 Metro 及 Next.js 打包工具實現代代碼碼區區分分文文件件區區分分3 3.4 4 同同構構組組件件庫庫及及實實現現原原理理import request from“JsBridge”.JsBridge index.native.js index.android.js index.ios.js index.web.js如何在組件庫封裝抹平三端的差異項項目目服服務務端端渲渲染染非非服服務務端端私募新商品頁 li ig gh ht th ho ou us se e跑

20、跑分分l li ig gh ht th ho ou us se e跑跑分分對對比比3 3.5 5 同同構構的的服服務務端端渲渲染染3 3.5 5 同同構構的的服服務務端端渲渲染染原原理理容容器器封封裝裝服服務務端端樣樣式式提提取取服服務務端端屏屏幕幕適適配配變變量量封封裝裝RN 使用 A Ap pp pR Re eg gi is st tr ry y.g ge et tA Ap pp pl li ic ca at ti io on n g ge et tS St ty yl le eE El le emme en nt t 方法，獲取頁面所需style樣式。輸出到html里：在next.js中

21、設置 _document.web.tsx 中 getInitialProps React Native中D Di imme en ns si io on ns s.g ge et t(wwi in nd do oww).wwi id dt th h 獲取寬度，動態計算大小。而在服務端渲染時失效。服務端渲染采取兩種措施：1.rem+vw布局，替代RN中動態計算。2.默認375 比如SVGO OS S封封裝裝import O OS S from snowboxO OS S:ios|android|windows|macos|web|n no od de e WWi in nd do oww封封裝裝

22、window.location.hrefwindow.navigator.userAgent在node中會報錯，RN中會白屏import WWi in nd do oww from snowbox;WWi in nd do oww.location.hrefWWi in nd do oww.navigator.userAgent服務端渲染改造contents落落地地：怎怎么么把把同同構構方方案案應應用用到到我我的的業業務務中中？0 04 44.1 項目結構4.2 開發流程4.3 定制同構組件庫4.4 CI/CD 流程 4.5 開發、測試、上線流程4.6 監控報警4.7 同構遷移策略4 4.1

23、1 同同構構的的項項目目結結構構建建立立R RN N項項目目同同構構項項目目 pages demo components button.tsx modal.tsx index.tsx metro.config.js index.js babel.config.js rn_routers.json pages _app.web.tsx _document.web.tsx demo components button.tsx modal.tsx index.tsx index.web.tsx metro.config.js index.js babel.config.js rn_routers.j

24、son server.js next.config.jsi in nd de ex x.wwe eb b.t ts sx x項項目目結結構構 -開發流程-同構組件庫-CICD-測試上線流程-監控報警-遷移策略4 4.1 1 同同構構的的路路由由設設計計每個 RN 頁面有一個 URL 路由。同構 H5 跟 RN 的路由注冊保持一致，實現同一 URL 在客戶端內能打開 RN 頁面，在微信中打開 H5，方便運營配置。這樣做還有一個優勢，H5 還會為客戶端 RN 頁做兜底，比如 RN 未覆蓋到的低版本客戶端或者 RN 包出問題時，點擊 URL 會打開對應的同構 H5 頁面做降級。同時建議支持通過配置控

25、制 RN、H5、原生的優先級邏輯。h ht tt tp ps s:/x xu ue eq qi iu u.c co omm/r rn n雪雪球球客客戶戶端端微微信信、wwe eb bR RN N頁頁面面同同構構的的 H H5 5 頁頁面面項項目目結結構構 -開發流程-同構組件庫-CICD-測試上線流程-監控報警-遷移策略4 4.2 2 同同構構的的開開發發流流程程2 2.同同時時連連接接三三端端U UI I微微調調1 1.在在瀏瀏覽覽器器初初步步開開發發樣式初步頁面狀態數據調試接口調試項目結構-開開發發流流程程 -同構組件庫-CICD-測試上線流程-監控報警-遷移策略同時連接 web andr

26、oid iOS一次改動三端同步熱更新進行三端 UI 微調4 4.3 3 定定制制同同構構組組件件庫庫建議開發定制化的同構組件庫實現樣式組件系統，封裝三端差異，提高開發效率，規范UI組件封裝可參考 雪球s sn no ow wb bo ox x.j js s.o or rg g后續也會開源項目結構-開發流程-同同構構組組件件庫庫 -CICD-測試上線流程-監控報警-遷移策略4 4.4 4 同同構構的的 C CI I雪球三端同構的 CI 由 Gitlab CI 實現，包含 commit 校驗、代碼 lint 校驗、單元測試、RN 打包上傳等等。項目結構-開發流程-同構組件庫-C CI IC CD

27、D-測試上線流程-監控報警-遷移策略4 4.4 4 同同構構的的 C CI I -單單元元測測試試組組件件庫庫測測試試工工具具及及類類庫庫React NativeJest react-test-rendererReact Native ElementsJest React Native Testing LibraryTamaguiJestNativeBaseJest jest-expoJest+React Native Testing Library：測試庫（基于 react-test-renderer 和 React Testing Library）優優點點 允許測試常規 React Nat

28、ive 程序的大部分邏輯 允許在 Jest 或其他測試運行器支持的任何操作系統上運行測試，比如 CI 使用的資源比完整的運行時模擬器少得多 可以使用 Jest 模擬計時器選選用用方方案案因為涉及到客戶端，所以同構代碼的測試與以往前端測試有所不同項目結構-開發流程-同構組件庫-C CI IC CD D-測試上線流程-監控報警-遷移策略4 4.4 4 同同構構的的 C CD D端端側側 R RN N 發發布布&下下發發采用 Gitlab CI+自研 mPaaS 實現WWe eb b 服服務務編編譯譯&部部署署采用 Drone CI+自研 Rolling Docker 部署一套代碼庫，多端部署所有

29、feature 分支 PR 合并后自動 CI 觸發打 RN 包由自研 mPaaS 實現 RN 發布客戶端版本控制、多階段控制、代碼上傳、分包下發等功能由 sit、sep、staging、prod 四個特定分支來承載 Web 服務的分環境部署。PR 合并后觸發 Drone CI 的 Docker 鏡像構建，隨后通過 Rolling Docker 部署前端 node 服務項目結構-開發流程-同構組件庫-C CI IC CD D-測試上線流程-監控報警-遷移策略4 4.5 5 業業務務開開發發測測試試上上線線流流程程上上線線非非常常靈靈活活，可可以以先先發發布布 R RN N，也也可可以以先先發發布

30、布 H H5 5項目結構-開發流程-同構組件庫-CICD-測測試試上上線線流流程程 -監控報警-遷移策略4 4.6 6 同同構構的的監監控控報報警警E ES S 監監控控A AP PMMS Se en nt tr ry y報報警警包下載、安裝、啟動統計監控鏈路監控報錯&性能監控監控報警 報錯報警業務轉化率報警項目結構-開發流程-同構組件庫-CICD-測試上線流程-監監控控報報警警 -遷移策略4 4.7 7 同同構構后后的的頁頁面面遷遷移移策策略略如何進行頁面遷移呢？為了避免風險、規范流程、提高效率，需要一個完整的遷移計劃方案，從頁面選型、遷移策略、遷移流程機制等多方位系統性地保障跨端技術遷移的

31、有效平穩落地。遷遷移移策策略略遷遷移移流流程程機機制制舊頁面 從從易易到到難難 遷移，分四個角度技技術術實實現現 業業務務類類型型頁頁面面交交互互業業務務鏈鏈路路從H5開始到原生從相對獨立的業務到復雜業務從展示類頁面到交易類頁面從弱交互到強交互頁面頁頁面面選選型型新頁面推薦用同構開發，強交互的才用原生開發項目結構-開發流程-同構組件庫-CICD-測試上線流程-監控報警-遷遷移移策策略略contents展展望望：不不足足與與未未來來方方向向？0 05 55.1 同構方案的不足5.2 React Native 發展5.3 同構小程序5.4 同構的D2C代碼智能生成5.5 基于大模型的同構助手5 5

32、.1 1 同同構構方方案案的的不不足足技技術術棧棧業業務務場場景景生生態態適合以 React技術棧為主的公司資源需求：有些底層功能需要客戶端開發資源的支持適合需要三端一致的適合以 App 為主的，需要同步到微信私域的業務場景拋棄了 CSS不支持常規 UI 庫同構組件庫較少，snowbox 在開源準備中5 5.2 2 R Re ea ac ct t N Na at ti iv ve e 發發展展微微軟軟T Twwi it tt te er rReact Native for macOSS Sh ho op pi if fy yReact Native WindowsReact Native We

33、bReact Native SkiaR Re ea ac ct t V VR R (R Re ea ac ct t N Na at ti iv ve e)React NativeF Fa ac ce eb bo oo ok k5 58 8React Native E5 5.3 3 同同構構小小程程序序s sn no owwb bo ox x 組組件件庫庫 +小小程程序序 R Re ea ac ct t 中中間間層層引入小程序React中間層框架 Taro/remax/kbone/alita/自研 實現小程序版的樣式組件系統 styled system snowbox同構組件適配小程序React

34、中間層 Taro-snowbox 基于snowbox同構組件的業務代碼能四端同構同構生成小程序代碼，實現四端同構5 5.4 4 同同構構的的 D D2 2C C 智智能能生生成成2 20 01 17 7 年年Pix2Code 論文 提出根據圖像生成代碼2 20 01 18 8 年年微軟 AI Lab 開源了草圖轉代碼 工具 Sketch2Code2 20 01 19 9 年年阿里發布 imgcook 在雙 11 大促中自動生成了 79.34%的前端代碼2 20 02 21 1 年年京東 Deco、codefun、58 Picasso、DhiWise等設計稿轉代碼相繼推出2 20 02 23 3

35、 年年chatGPT 4.0 展示草圖轉代碼目目前前 D D2 2C C 大大部部分分是是應應用用于于 H H5 5，如如果果能能和和同同構構結結合合，將將會會創創造造出出更更高高的的價價值值。同同構構組組件件對對 U UI I 進進行行了了高高度度的的抽抽象象，有有助助于于 D D2 2C C 代代碼碼智智能能生生成成的的實實現現，同同構構生生成成三三端端。5 5.5 5 基基于于大大模模型型的的同同構構助助手手讓 ChatGPT 等大模型掌握同構寫法和同構組件庫總總結結0 01 10 02 20 03 30 04 40 05 5效果:RN三端同構在雪球的效果優勢：跟其他跨端方案對比優勢原理：RN三端同構的原理落地：怎么把同構方案應用到我的業務中展望：不足和未來方向T TH HA AN NK KS S