Andy

手民

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

發布於

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

上個圖:

左:華爲MATE20,右:iPhone SE

第一步:數據接口研究

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

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沒任意文件上傳的功能,那就算了吧,反正目前也是簡陋得很。

編程自學指南一・你的第一行代碼

🔗 真正去中心媒體的第一步:做一個 Matters 的第三方網站

你想要的 Matters 文章 ipfs 地址

發布評論

看不過癮?

一鍵登入,即可加入全球最優質中文創作社區