React Native 使用分享 - 五年小回顧

Medium Post :https://revteltech.pse.is/react-native-5yrs-medium

---
忻旅科技：https://www.revtel.tech
開發分享：https://medium.com/revtel-tech
---
在移動裝置已經變成最重要入口的今天，APP 在商業模式中的重要性不言可喻。考慮到資源佈局及知識累積，APP 的開發方式在不同的團隊中作法大不相同。甚至涉及到 APP 和 Web 間的關係管理。

React Native 為 facebook 提出之 APP 開發方案，幾年下來變得成熟但也出現了許多新的挑戰者（如 Flutter）。我們團隊自 2016 年起導入 RN 使用至今，感受到這個技術的方便之處也踩到了許多的坑。

在這裡我們會分享一下過往的使用經驗。除此之外也會聊聊 RN 對在公司發展過程中帶來的一些文化改變。

Transcript

1. React Native 使用分享 五年小回顧 RevtelTech Sam 五載復相逢，軟體二三事
2. 五載復相逢，軟體二三事 - 以分享來試著替自己的一些過往經驗做個小結 - 上次的題材：印刷電商 + GatsbyJS - 投影片：https://revteltech.pse.is/lixiang-hiprint-sharing - Medium：https://revteltech.pse.is/hiprint-sharing 重點比較不完全在技術上 - 比較想聊聊 技術 / 管理 / 領域 / 商業 上的平衡 - 只是一家之言，也未必是最佳解 活動緣起
3. React Native React Native Learn once, write anywhere.
4. Agenda 03 背景介紹 公司 / 個人 01 02 04 05 React Native 技術介紹 技術選型 公司技術架構 導入經驗 過往甘苦及經驗分享 總結 簡單結論
5. 背景介紹 01
6. 專注在系統的規劃跟開發，跟各種領域對接做商務的探索 ( https://www.revtel.tech ) - 自身領域 - 好咖嚴選 Hecafe - https://hecafe.com.tw/ - 區塊鏈 x IoT NFC solution - 台製NFC冷錢包「Inigma」 - 奕果雲端數位 HiPrint https://www.eculture.tech/ - 客戶協作 - 電商、醫療、金融及旅宿等超過十個業態 - 提供「顧問諮詢」「開發執行」「維運協力」 - Web / APP / IoT / BlockChain - 產品 ( https://revtel.app/ ) - FreeStay / RevCertCard / RevLearning / RevBackend Open Source - ReactConf.TV - video collection by React https://reactconf.tv/ - NFC on React Native - react-native-nfc-manager / react-native-nfc-rewriter 忻旅科技 RevtelTech
7. 忻旅科技共同創辦人 - 工程師 / 技術管理 / 公司營運 - 嵌入式系統 / Web / App / BlockChain - 開放式嵌入式課程 - Firmware Development - Linux / Android Platform - Android Native APP - Angular / React - Cordova / React Native - BlockChain - 近年比較常協助技術規劃及 產品設計 (有些分享在 https://medium.com/revtel-tech ) Sam Huang
8. React Native 02
9. Facebook 推出之跨平台框架 - Create native apps for Android and iOS using React - Written in JavaScript—rendered with native code - Truly Native Development For Everyone - Seamless Cross-Platform 具有 React 的所有良好性質 - Declarative programing - Component-Based - React Hook React Native 介紹
10. 以跨平台來說你在意什麼？ - 跨平台 → 無平台 - Java / Cordova / Flutter - React Native 的嘗試 - 以畫面為出發點 視覺及互動的抽象化 - 大前端 / Headless / Figma / ... Another Cross-Platform Solution ?
11. 有限資源下的效率最大化 - 公司開發資源的收束 - 個人技能樹的累積 但 React Native 的效能是極好的 也很好的乘載應用複雜度 資源的平衡
12. 技術選型 03
13. Revtel 技術選型 節奏：持續試用新技術但導入要小心 - GatsbyJS - 投影片：https://revteltech.pse.is/lixiang-hiprint-sharing - Medium：https://revteltech.pse.is/hiprint-sharing 情境 - 從不同領域裡頭中做商業嘗試 - 追求可控 - 追求平衡 橫向擴充 - 降低資訊分享的困難 縱向擴充 - 分工清晰並易於組合 → 後端上一定程度的容器化及微服務架構，前端挑 React / React Native
14. 導入經驗 04
15. 案例：精品電商 - 迭代快 / 商務邏輯特殊 / UI/UX 一致化 藉邏輯復用降低開發難度！ 思考：UI Logic / Biz (Domain) Logic / General Logic 和 Web 的協同合作
16. 案例：股票看盤軟體 - 線圖互動及畫面複雜且有其他應用場景 以 Web 形式開發，並整合 webview 做資料互動 思考：Wevbiew 可延伸多遠？ Web 開發先行
17. 案例：AI fintech 公司 - 有大量基礎 API 是由該公司自行開發 本質是資料管理問題 - Redux - RenderProps 資料管理一直是至關重要的議題 - Redux 的 reducer 思考！ 善用一些 pattern 和外部的協作
18. 案例：電子鎖開發 - HW / Firmware / APP / Cloud 的一站式開發 以 test case 確保開發及溝通是順暢的 思考： - 什麼東西該進到 native module - 升版 ? React Native + IoT
19. 案例：NFC 應用開發 - NFC 相關應用 - 區塊鏈 APP + 冷錢包 藉由開源練習一些協作的技巧 以 Web 開發角度看 IoT - 重新思考錢包的抽象層 NFC 該如何使用？寫在 iphone 終於完整支援 NFC 讀寫的今天 - https://pse.is/revteltech-nfc 區塊鏈實體化的技術隨想 — Blockchain + NFC - https://revteltech.pse.is/nfc_and_nft react-native-nfc-manager
20. 總結 05
21. 產品 技能樹的規劃 個人 Web 生態系的加持 公司 資源配置的角度 總結
22. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, and infographics & images by Freepik. Please keep this slide for attribution. THANKS Does anyone have any questions? https://www.revtel.tech https://www.facebook.com/RevtelTech