2019 與個人技術之路

文章首發於個人博客 https://github.com/mcuking/bl...

回首 2019

2019 年主要都是在用 Web 前端技術來寫 Hybrid 應用，因此技術上的積累大部分都是和 Hybrid 有關的。上面這張圖就是今年的總體技術探索路線圖。下面我就一一闡述下其中每項具體內容：

3 月 JSBridge

成果：https://github.com/mcuking/JS...

在開發 Hybrid 過程當中由於有感於客戶端提供給前端的接口過於難用，主要有兩點：1. 安卓 和 iOS 兩端接口調用方式不一樣；2. H5 端沒法傳入回調函數來接收 Native 的方法執行結果。因而乎我準備突破一個純前端開發的定位，開始涉足 Native， 固然主要是 Native 和 Web 融合的部分。

第一步就是開始研究 H5 和 Native 通訊橋樑—JSBridge，經過在掘金上閱讀了大量關於 JSBridge 底層實現原理的文章，最終本身實現了一個安卓平臺的教學版 JSBridge：https://github.com/mcuking/JS...

不過最終在實際項目中使用的是安卓和 iOS 雙平臺均支持的 DSBridge:
DSBridge-Android
DSBridge-IOS

6 月 React Native 和 H5 融合

成果：成功融合了兩個不一樣技術棧的 App，對 React Native 有必定實戰經驗

公司決定將原來基於 Vue 的純 H5 開發的 App 和一個基於 React Native 的開源 IM 客戶端 mattermost-mobile 融合成一個 App。主要經過 React Native WebView 加載了 H5 頁面，而且統一了兩個 App 的鑑權，定義了二者互相跳轉調用的機制，另外改造了 RN 部分的交互（從安卓的 Material Design 風格改爲 iOS 風格）。

7 月 Vue to React

成果：https://github.com/mcuking/vu...

由於 6 月的融合過程當中須要將一些原來寫好的 Vue 組件，用 React Native 再來實現一遍，再加上當時也正在瞭解 taro、chameleon 這種 寫一套代碼運行多端的框架，因而以爲不如也寫一個 Vue 組件代碼轉 React 組件代碼的工具。

接着就開始收集了各類相似的工具，研究其中具體的實現方式，最終肯定了實現的思路：先經過 vue-template-compiler 工具的 parseComponent 方法將 Vue 單文件組件分解成 template、script、style 三部分，針對 template 再使用 vue-template-compiler 工具的 compile 方法轉化成 AST，script 部分則使用 @babel/parser 工具轉化成 AST，而後提取 data、 props、 computed、 methods 等參數，根據 vue 和 react 屬性和方法的映射關係，調整 AST 樹，最終再經過工具生成 react 組件代碼。

後面將其封裝成 npm 包，能夠經過 cli 方式或者可視化頁面工具方式來使用。不過由於因 Vue 和 React 這種庫的 API 更新比較頻繁，React 主流寫法又轉向了 hooks 的方式，以及不一樣人的代碼風格迥異，以爲這類工具侷限性較大，全部後續並無持續開發，甚是遺憾。

8 月 移動 web 最佳實踐

成果：https://github.com/mcuking/mo...

這段時間其餘部門也要採用 H5 + Native 方式開發模式，所以過來諮詢了一些相關問題。後來以爲爲何不把在這方面的一些積累整理成一個最佳實踐模板呢？這樣的話後面的人就能少踩不少坑。因而乎就建立了這個倉庫：mobile-web-best-practice。其中涵蓋了 web 在移動開發中的大部分方面：mobile 組件庫、JSBridge、虛擬路由棧、樣式適配、手勢庫、webpack 優化、異常監控、客戶端上 H5 常見問題等等。

10 月 前端分層架構

成果：前端分層架構實踐心得

一直以來咱們都是用 Vue 同時開發 Mobile 和 PC 兩端，兩位前端分別負責一端，不少業務邏輯都是單獨在兩端實現的，當產品須要修改部分業務時，時常會漏掉某一個端；另一個問題是，項目沒有按照必定思想分層，致使不少業務邏輯堆積在 View 層或者 Utils 公用方法中。

爲了解決這兩個問題，筆者研究了 DDD/Clean Architecture 等思想以及在前端的一些實踐經驗，將前端項目按照分層架構思想，分紅了 Services 層（包含 Request 層、Translator 層）、Entities 層、Interactors 層、View 層，以實現關注度分離，使得業務邏輯的分佈有了必定思想指導。另外將前面除了 View 層以外的 PC 和 Mobile 兩端可共用的層抽離出了單獨的一個 npm 包，從而實現除了視圖層以外的改動，只須要一次便可（除非某個業務邏輯在不一樣平臺有不一樣要求）。

11 月 離線包

成果：Hybrid App 離線包方案實踐

從剛開始開發這個 App 的時候，H5 部分就是經過遠程 Url 進行加載的，加載速度一直備受詬病。首次加載時過於依賴用戶當時所處的網絡環境，弱網狀況下加載白屏時間可達 5 到 6 s 甚至更久。雖然第二次加載會有 Http 緩存，可是實際上這種緩存並不穩定，常常會有丟失現象。

爲了保證頁面加載速度是由開發者可控的，筆者開始收集不少互聯網公司在這方面的解決方案，發現主流方式都是採用離線包方案，經過結合目前我司的前端部署實際狀況（經過 Jenkins 打包成 Docker 鏡像），最終造成了一套可行的離線包方案，迭代完成後又將全部端（前端 webpack 插件、離線包平臺先後端、安卓離線包庫）代碼都開源在個人 GitHub 上了，但願可以幫助到其餘人。下面是這個方案的技術架構圖，更多細節就不在這裏贅述了，感興趣的能夠查閱上面的文章。

在這個過程當中，在將整個方案提到項目組裏進行開發以前，須要驗證方案的可行性。因而筆者購買了本身的雲服務器，並部署了 Jenkins，Docker 等工具，跑通了整個離線包方案，並將這個過程記錄成了一篇文章：

Github + Jenkins + Docker 實現自動化部署