編程自學指南番外・給Matters寫個App吧

最近有些業務涉及移動端開發，於是今天下午抽了半天來摸摸移動開發的近況，乾脆就給Matters寫個小App吧，跟大家講講開發過程，順便聊聊進階的軟件工程知識。

上個圖：

第一步：數據接口研究

編程，好像「代碼」最重要，其實更重要的是數據的形態與關係。

Matters選了Facebook的GraphQL，GraphQL有個核心功能，說服務器發數據只發「客戶端需要的數據」，故此GraphQL體系裏的數據類型高度動態，即使是同樣名字的數據類型，比方說「Article」，在不同的接口拿到的形態也是不一樣的，有時候缺項目，有時候又加上額外的內容，需要仔細區分。

先用Chrome開matters，去Debugger的Network頁面看，所有的數據來往都會在這裏。

首先確認通訊渠道。瀏覽器通訊渠道主要有三條：HTTP、WebSocket、WebRTC，此外還有小衆的Server Sent Events。HTTP又分同步的下載（就是「頁面」本身）和異步的XHR（XMLHttpRequest，後面的fetch也算）。

我先看了一下WebSocket（在Network頁面的WS標籤下）。可以看到沒什麼通訊。

然後看XHR，做一些瀏覽操作，讓頁面加載新數據，把返回的JSON數據抄出來，用Node.js解開，一層層檢查，可以確定中獎了。

第三步：選型

「選型」好像是中文纔有的說法，英語有時候叫「choosing stacks」，還是欠一點味道。

選型是什麼呢？就是在多種技術方案中，衡量利弊，根據需求和自選，選出最優的技術方案。

選型是中高層工程師的核心能力，選型選得對，事半功倍；選錯了，可就不是事倍功半，而是事百功零了，甚至事百功負了（比如引入了新bug、拖慢了性能等等）。

分析選項：我們現在寫移動端的App——

兩個平臺，語言上，iOS可以用Swift，可以用Objective-C；Android可以用Java，也可以用Kotlin。

跨平臺方案，有Flutter，有React Native，有Vue Native，有Ionic，有Xamarin。

分析選型目標：是爲之後的我們移動端開發做技術探索。

如此，選型方向就很清晰了：

(1) 選團隊有經驗的方案；

(2) 選技術成熟，生態完善的方案。

用（1）排除Objective-C、Kotlin、Xamarin（C#）、Flutter（Dart），Ionic；

用（2）再排除Vue Native。

如此，剩下Swift for iOS、Java for Android、React Native。

在這三者之中，我們之後要做的項目對客戶端性能要求不高，因此優先探索React Native，因爲一份代碼可以兼顧iOS和Android。

大的選型做完，要做選型的細化。

React Native現在有兩套建構工具（我16年寫的時候還只有一套），expo和react-native-cli。官方主推Expo，所以我們也優先嘗試。

用React Native自然用React。React 16.8出了React Hooks，在React工程師中風評不錯，那就優先試用Hooks，不用Class語法。

React Native又可以用JavaScript或TypeScript語言，對於這個小項目，其實兩個都可以，但是稍微大點的項目還是有TypeScript更好，於是優先驗證TypeScript與React Native體系的整合度。（說起來，我還給React Native的TypeScript包定義貢獻過2000行代碼呢。）

第四步：開發

這部分反而是最沒什麼可說的，就是寫代碼、拆模塊、寫代碼、拆模塊的循環。

Expo確實很給力，比以前的建構工具爽多了，自帶構建模板，甚至出廠就支持TypeScript。開發中在本機調試、在實際機器上調試、開發完成後打包，都很流暢。

React Hooks真好用，比Class的寫法真是簡單多了。而且還可以搭配TypeScript強類型，之前我曾經擔心過Hooks好像和TypeScript不對口，現在看來也是操心操多了，真香。

TypeScript真好用，還是熟悉的配方，還是熟悉的味道。之前寫Rust覺得Rust好麻煩，每天跟編譯器鬥志鬥勇，寫寬鬆的TypeScript反而有點不適應這種自由了，反而是在想怎樣可以把類型卡得更死，真香×2。

Matters的API接口都挺繞的，在研究URL結構和返回數據上摸索了很久，可能GraphQL就是這樣吧。我其實一直是反REST派的，但有時候真的是離開了REST才知道REST對我真好……真香×3。

總結

整體來看，這次試驗很成功，找到了一個不錯的移動端開發方案。開發過程基本無難點，都很順利，成果也不錯。一個人花一個下午，即可從零開始，搭出一個能同時在iOS和Android上運行的App，包括網絡加載數據、渲染圖片文字的功能。

代碼：https://github.com/blaesus/mobilematt

普通用戶現在恐怕裝不了這個App：iOS那邊我懶得弄Apple Store；Android那邊我倒是編出了apk，但是Matters沒任意文件上傳的功能，那就算了吧，反正目前也是簡陋得很。