用 React Native 開發鉅亨網 App 的經驗分享

React Native 讓前端工程師可以站在巨人的肩膀上更快速的開發,雖然到目前為止在實作中還是有許多地雷,但相信在 Open Source 的基礎下會更加的茁壯,若您在開發的 App 功能都沒有跳脫 UI Explorer 的範例,相信要用 React Native 來開發可以相對的降低開發的時間與成本。
評論
評論

作者為 Bingo Yang,一位在前端打滾十年以上,曾任 UrMap、HTC 前端工程師,目前在鉅亨網服務。 本文 獲作者授權轉載。

身為一個 Frontend Developer,在看到 React Native 問世之後,一直對 React Native 很有興趣,最近終於有機會可以碰到了,也因此才有這篇  勸世文 心得。本文主要想記錄一下開發到目前為止所踩過的坑,為還在 Survey 技術的團隊開路。

適合用 React Native 開發嗎?

在接觸 React Native 之前,其實我們對開發 App 是還沒有信心的,一來這東西太新,二來我們也沒有實際開發過 App 的經驗,很多 UI 效果都要 Survey 才知道到底做不做的到,就算 Native Support 也不知道 React Native 有沒有 Support?一直到我們真的把 App 上架之後,才覺得比較有一點信心。但在開始之前,先確認一下是否有對 React Native 誤解:

不是 Write once, run everywhere,而是 Learn once, write anywhere

在大多數的情況下,你可以讓 Android / iOS 共用同一份 code,但這不代表你可以爽爽的不管平台問題就可以實作出功能。兩個平台畢竟還是有一些不樣的 user experience,例如 iPhone 沒有 back button,所以你需要為了 Android 多處理 back button 的 behavior(BackAndroid)。也因此在程式裡頭還是免不了得判斷 Platform

例如:

const styles = StyleSheet.create({
height: (Platform.OS === ‘ios') ? 200 : 100,
});

不過很方便的地方在於因為 React 本身就是個 View 的 Engine,因此要將 Component 拆開是輕而易舉的事情,而 React Native 可以讓你很輕鬆的將程式分開。

例如原本我們有一隻 NewsDetailPagger.js 的 component,但由於在實作上 Android 和 iOS 上面的行為遇到不同的問題。後來就將這個 component 拆成:

  • NewsDetailPagger.android.js
  • NewsDetailPagger.ios.js

就可以讓兩種平台在 compile 時就只 build 相對應的程式,也許之後也會有:

  • NewsDetailPagger.ms.js
  • NewsDetailPagger.tizen.js

註:Facebook’s React Native gets backing from Microsoft and Samsung

總之,用 React Native 開發也是得考慮不同 platform 的問題,雖然 React Native 官方已經解決大多數的繁瑣的部分,但你仍須思考不同平台是否適合同一套 UI / 邏輯。

React Native 不是 Webview

不要以為你原本就用 React 開發行動版網站之後就可以移植到 React Native, 基本上可共用的部分可能只有 Pure 的商業邏輯,跟 View 有關的部分都會需要重寫。

React Native 的優點

整理一下用 React Native 開發的優點:

1. Debug 非常方便:

基本上如果只是 View 的 update,React Native 都已經做好 hot reload 了,只要程式碼修改就會局部 rerender。

2. React 大幅降低學習成本

如果你原本就熟悉 React 的開發流程,從 React 跳進 React Native 很快,因為原本的經驗是可以繼續累積的,包含 React, Flux, Redux, 各種 React performance 調效的經驗都是有用的。

3. 感受不到跟寫 Web 有太大的差別

一開始最讓我驚喜的其實是用 React Native 開發我真的不覺得我在開發 App,反而就像是多了一種特異的瀏覽器而已,而且 debug 也是用熟悉的 console 在 debug。react-native-debugger 也可以看到 jsx 的 tree。

debugger

4. 專心寫你的商業邏輯

基本上 React Native 已經處理掉大部分的效能問題,例如 listView 已經處理了大量列表只會顯示使用者看到的部份而已。這讓開發者可以專注於產品功能的實現,不用花費太多心力在調整 UI 上的效能。

5. React Native 的生態圈非常完整

awesome-react-native 有整理了幾乎目前有的 resource ,包含教學,components 等等,看也看不完的東西。開源的世界就是這麼迷人,based on 全世界工程師的開發與回饋造就健壯的社群。

6. Frontend resource

藉由 React Native,自此前端工程師可以支援 App 的開發,開發 UI 上的經驗可以共用,對於組織內人力的配置也可以更加靈活彈性。

7. UI Explorer

UI Explorer 列出了幾乎所有 React Native 支援的 component 與範例,看 UIExplorer 有時比文件寫得更完整。

react-native 的缺點

雖然開發到現在覺得很滿意,不過還是得列一下缺點。

1. 掰咖的 style

React Native 用 javascript 來實現 css 的設計 (style),但並不是支援所有的屬性,例如 z-index (0.29 之後支援 ios)。

沒有 image-background,沒有 background-repeat 等等。不過雖然少了這些東西,大部分的需求還是可以想辦法實現的,也可以藉由 react-native-svg 做到很多漂亮的 UI。

2. 各種踩坑

一開始在用 navigator 時用了 NavigationExperimental,但由於是 experimental,每次 React Native 更新都有 API change,因此每次都要隨著更新。

像是這個新聞內頁左右翻動的功能,看似很簡單,但因為資料是動態的,所以嘗試了好幾種 pagger 的實作,最後是用 react-native-viewpager

newsflip

3. 升級總是很痛苦

React Native 每兩週就會 realease 一個版本,這使得我們在開發到第一次上架成功之間就升級了無數次,第一個版本是 0.21,到目前為止已經是 0.30,中間有幾次升級是非常重大的更新,很多相依的 package 也要跟著更新才能順利更新上去。

小結

React Native 讓前端工程師可以站在巨人的肩膀上更快速的開發,雖然到目前為止在實作中還是有許多地雷,但相信在 Open Source 的基礎下會更加的茁壯,若您在開發的 App 功能都沒有跳脫 UI Explorer 的範例,相信要用 React Native 來開發可以相對的降低開發的時間與成本。最後,鉅亨網的前端團隊目前也在徵 資深前端開發者 喔!


精選熱門好工作

樂趣買Web Designer(Rakuma)

台灣樂天市場
臺北市.台灣

獎勵 NT$15,000

品類管理企劃 Category Management Planner

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$15,000

Campaign Manager 活動企劃經理

樂購蝦皮股份有限公司
臺北市.台灣

獎勵 NT$15,000

評論