Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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 對在公司發展過程中帶來的一些文化改變。

845fae80ed8b704a88b32500b3db4c53?s=128

Sam Huang (sailplaneTW)

July 22, 2021
Tweet

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