作為一個前端使用 React Native 開發新產品的半年小心得

Standard

本文大綱

  1. 前言
  2. 團隊組成
  3. React Native
    1. 跨界踩坑
    2. 從 Web 到 App
    3. 升級 – 停看聽
    4. 團隊使用的工具與套件
  4. 其他:專案流程

前言

最近滿忙碌的,租屋約到期搬家、恢復長途通勤的日子,而工作上的話,則是團隊終於釋出新增社交元素的新版 App。雖不是什麼劃時代的產品,這個階段也只增加了一些留言討論、按讚等功能(接下來還是有其他新的功能的 :P),不過仍算是個小里程碑,忙碌的事情也暫時告一段落了,便想藉本文記錄一下這半年多*來使用 React Native 開發新產品的心得。

*半年多:實際上,新產品的開發期、基礎建設等約在三個月內,而前三個月是我輪調至 App Team 進行既有的 App 功能開發與維護

歡迎有興趣的朋友歡迎下載試玩看看!



我對投資沒什麼涉獵,也沒閒錢投資 😭 因此本文僅作為一名前端開發者的角度來記錄心得~

團隊組成

App team 團隊組成是 1 Director(也有參與前端開發)、3 名前端 (其中 1 名是 0.5 DevOps + 0.5 前端)、3 名後端、1 名設計、1 名 PM。

沒有 QA,也沒有原生 Mobile App 工程師。

前端的部份是純寫 JavaScript(React Native),不涉及後端開發。前端們原本都有用 React 開發 web 專案經驗。

另外有專門負責 Web 產品的團隊,配置有同等人數的前、後端工程師。

React Native

跨界踩坑

雖然沒那麼美好,但越來越好了

記得剛輪調去 App team 的時候,才剛要把專案跑起來就遇到很多問題,例如環境問題啦(node 套件、ruby 之類的)、Xcode 的設定問題、Apple Developer 的憑證等等的。

雖說現在要寫一個 Web 的前端專案,使用的工具、事前的準備也越來越複雜,但作為一個 Frontend,初接觸到 React Native 的專案真是頗挫折的,當時面對 Xcode 的 IDE 嘗試了兩天,當時的 OS 是 「…連要跑起一個專案都跑不起來,人生好難…」 ,結果發現是一個很蠢的步驟問題而已 😂

記得聽已經接觸半年的同事說,這時候其實 React Native 的專案開發已經不像更早期的「蠻荒時代」了。坑是越走越少,一些常踩的雷也因為前人的踩坑心得筆記累積而能夠避開。嗯,為此我也補了很多血淚筆記到專案的 README 中 😆

不過這些問題對原生 App 工程師來說應該是小菜一碟,如果團隊內有可以請教的 App 工程師那應該能少走上不少冤枉路 😆 若要更能隨心所欲地開發,也許還是得要補上原生開發的相關知識/人力吧。

現在若問我覺得用 React Native 專案的開發感想如何呢?以一個前端工程師來說,半年過去了,我覺得雖然開發體驗沒那麼美好,也的確會遇到意想不到的坑,但比起一年前,React Native 的確越來越好了,生態圈也越來越成熟。

繼續閱讀…

淺談使用 Appium 進行 React Native 雙平台(iOS & Android)App 的 E2E 自動化測試

Standard

前言

先前在公司的產品流程中導入了單元測試的部份,而最近手上的任務是為 App 產品導入 E2E 測試(End-to-End Test)。由於目前的公司團隊沒有 QA 人員,因此每次產品新版 release 前都必須仰賴工程師自己與產品 Owner 等成員自行手動測試(Manual Testing),隨著產品功能越來越龐大,這個過程越來越曠日費時,也無法確保每次都能測到所有的項目,因此才會有導入 E2E 測試的想法。

本篇文章視角是給像我一樣的非 App 工程師(例如從沒接觸過原生 App 開發、準備踏入 React Native 開發的前端工程師)的經驗分享,又因公司 App 產品是用 React Native 寫的,所以也會提到一些 React Native 在搭配 Appium 測試時需要注意的一些部分(一點點啦)。這也是我首次嘗試 E2E 的測試,著墨不深,有不精確或誤導之處,一樣請偷偷告訴我以便修正文章囉 :)

自動化測試中的 E2E 測試與比重

自動化測試(Unit test、Integration Test、E2E Test)能為產品的品質帶來更多信心,E2E 測試更是貼近真實使用者的情境下進行整體性的操作測試,「專注在真實使用者情境」--嗯,聽起來 E2E 是很值得投資的事情!不過 Google Testing Blog 曾在 2015 年的 Just Say No to More End-to-End Tests 中提出一些不同的思路。

繼續閱讀…