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

Sam Huang (sailplaneTW)

July 22, 2021
Tweet

More Decks by Sam Huang (sailplaneTW)

Other Decks in Programming

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