2023 鐵人賽回顧與完賽感想

Ashley Hsueh
6 min readOct 7, 2023

回顧

透過這一系列的文章一一介紹了使用 React Native Cli 開發的各個面向以及其背後的原理,我將這 30 天的文章做以下幾個分類:

認識與學習 React Native 和 React Native Cli 的開發成本。

DAY 1 — 前言&React Native 簡介
DAY 2 — React Native 開發的成本與學習的管道

  • React Native 的原理,深入瞭解為什麼 React Native 開發團隊要重構現行的架構,還有 React Native 面臨了什麼樣的效能問題。

DAY20 解析 React Native 現行架構(Current Architecture)原理
DAY 21 解析 React Native 新架構(New Architecture) 原理
DAY 22 React Native Fabric 渲染器的 Render Pipeline

如何快速掌握前人的 React Native Cli 專案架構,基本上 React Native 的版本就決定了 60 %的難易度了!

DAY 3 接手 React Native CLI 專案應該知道的事 — React Native CLI 篇
DAY 4 接手 React Native CLI 專案應該知道的事 — React Native 版本
DAY 5 接手 React Native CLI 專案應該知道的事 — React 狀態管理工具 & React Navigation &應用程式上架憑證及金鑰

  • React Native Debug 工具介紹,包含像是 Metro 如何使用與背後的原理、Logo box 、使用 Flipper 更有效的幫助我們開發 React Native 。

DAY 6 React Native Debug 工具 — Metro (上)
DAY 7 — React Native Debug 工具 — Metro (下)
DAY 8 React Native Debug 工具 — Logo box & Flipper

  • 升級 React Native 版本很痛苦嗎?在這裡分享筆者在升級踩坑的過程與填坑的思路。

DAY 4 接手 React Native CLI 專案應該知道的事 — React Native 版本
Day 9 修改 npm 套件的好幫手 — patch-package
DAY 30 React Native 版本升級實戰 : 填坑之旅

  • 環境變數建置,透過教學協助你在 React Native 專案中設定好 Android 跟 iOS 的環境變數。

DAY 10 React Native 環境變數設定 — Android
DAY 11 React Native 環境變數設定 — iOS

  • 開發應用程式一定會遇到的問題 — 打包,透過這兩篇文章將筆者處理打包應用程式的方法說明。

DAY 12 React Native Android 打包 — APK & AAB
DAY 13 React Native iOS 打包 — IPA

結合前幾篇的環境建置,發佈不同環境的測試版應用程式。

DAY 14 使用 Firebase 發佈 React Native 測試版 APP — 多種環境配置
DAY 15 使用 Firebase 發佈 React Native 測試版 APP — 發佈應用程式
DAY 16 React Native Android 上架前哨戰 — 使用 Google Play 商店發布測試 [DAY 18 React Native iOS 上架前哨戰 — 使用 Apple Test Flight 發布測試]

  • 上架應用程式,教你如何解決上架的疑難雜症,順利把你的應用程式放上的 Google Play 與 Apple Store。

DAY 17 上架 Android 應用程式到 Google Play Store
DAY 19 上架 iOS 應用程式到 Apple Store 與審查被拒絕處理經驗談

  • React Native 的效能衡量以及如何透過工具去優化加速你的應用程式。

DAY 23 React Native 效能優化:衡量效能的關鍵指標
DAY 24 React Native 效能優化: 使用 Flashlight 衡量應用程式效能
DAY 25 React Native 效能優化:使用 Firebase Crashlytics 追蹤應用程式 Crash]
DAY 26 React Native 效能優化:使用 Firebase Performance Monitoring 監控應用程式效能
DAY 27 React Native 效能優化:提升效能實戰 (一)
DAY 28 React Native 效能優化:提升效能實戰(二)
DAY 29 React Native 效能優化:提升效能實戰(三)& 效能優化總結

這次分享的內容很多看似很雜,但如果以新手的角度出發的話,相信這系列的文章會是除了官方文件以外,可以幫助你減少踩坑或是面對坑可以有方向有勇氣去解決時的利器。

完賽感想

參賽的初衷

這是我第一次參加鐵人賽,對我來說這次的參加,最重要的事就是把自己過去的開發經驗做一個系統性的整理,經歷過最初接觸 React Native 時,光是環境就建不出來,整個程式碼 run 不起來,而且終端機也是都是爆錯的 log,滿滿毫無頭緒的痛苦與無力感,所以希望在這次藉由分享我曾經走過的路,讓其他人也可以在遇到問題時後至少可以有些方向。

決定參賽的關鍵因素

不是很喜歡社交但我很慶幸剛好這半年鼓起勇氣參加了曼陀號的工程師學習社群,在這認識很多優秀的工程師,還有這次一起參賽的隊友。從他們身上我體悟到兩件事:就是練習持續的輸出理解原理,原來我從前學習的方法是有盲點的,在學習上應該盡可能的去理解背後的脈絡與原理,將自己所學習到的知識轉輸出成文章。因此秉持著這樣的想法,不管寫的好或是壞,這次的參賽都是一個難能可貴的經驗。

過程中的收穫

除了重新整理的過去的經驗,藉著這次的機會我也在花了蠻長的時間在深入 React Native 的原理,過去可能只會用,但對原理卻是一知半解,導致在專案上遇到某些 bug ,在我理解了原理後,一切豁然開朗。

特別感謝隊友

老實說在決定參加團賽前我真的超級猶豫,猶豫的原因在於想要參加但又怕意志不夠堅定半途而廢害到隊友,我甚至提前寫了十篇才有把握跟團,非常感謝我的隊友 Phoebe、Lana、Emily,還好有大家一起參加,我才可以完成這項不容易的挑戰 ,更棒的是我們全員都挑戰成功了!

參賽的感受

原本以為寫的過程會很痛苦,結果發現越寫越有幹勁,完全出乎我的意料,在過程中挑戰自我是一件多麽令人振奮的事情。本來以為 30 天會不知道寫什麼,結果在寫的過程中,就不斷的發想出新的題材,導致最後很多本來想分享的東西還沒提到就快 30 天了,之後如果有時間的話再慢慢補吧,但也可能不會補了(x。希望有明年還有時間可以參加,屆時我應該提前囤更多的文,讓文章的品質更好。

--

--