Slide 1

Slide 1 text

React Native 使用分享 五年小回顧 RevtelTech Sam 五載復相逢,軟體二三事

Slide 2

Slide 2 text

五載復相逢,軟體二三事 - 以分享來試著替自己的一些過往經驗做個小結 - 上次的題材:印刷電商 + GatsbyJS - 投影片:https://revteltech.pse.is/lixiang-hiprint-sharing - Medium:https://revteltech.pse.is/hiprint-sharing 重點比較不完全在技術上 - 比較想聊聊 技術 / 管理 / 領域 / 商業 上的平衡 - 只是一家之言,也未必是最佳解 活動緣起

Slide 3

Slide 3 text

React Native React Native Learn once, write anywhere.

Slide 4

Slide 4 text

Agenda 03 背景介紹 公司 / 個人 01 02 04 05 React Native 技術介紹 技術選型 公司技術架構 導入經驗 過往甘苦及經驗分享 總結 簡單結論

Slide 5

Slide 5 text

背景介紹 01

Slide 6

Slide 6 text

專注在系統的規劃跟開發,跟各種領域對接做商務的探索 ( 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

Slide 7

Slide 7 text

忻旅科技共同創辦人 - 工程師 / 技術管理 / 公司營運 - 嵌入式系統 / Web / App / BlockChain - 開放式嵌入式課程 - Firmware Development - Linux / Android Platform - Android Native APP - Angular / React - Cordova / React Native - BlockChain - 近年比較常協助技術規劃及 產品設計 (有些分享在 https://medium.com/revtel-tech ) Sam Huang

Slide 8

Slide 8 text

React Native 02

Slide 9

Slide 9 text

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 介紹

Slide 10

Slide 10 text

以跨平台來說你在意什麼? - 跨平台 → 無平台 - Java / Cordova / Flutter - React Native 的嘗試 - 以畫面為出發點 視覺及互動的抽象化 - 大前端 / Headless / Figma / ... Another Cross-Platform Solution ?

Slide 11

Slide 11 text

有限資源下的效率最大化 - 公司開發資源的收束 - 個人技能樹的累積 但 React Native 的效能是極好的 也很好的乘載應用複雜度 資源的平衡

Slide 12

Slide 12 text

技術選型 03

Slide 13

Slide 13 text

Revtel 技術選型 節奏:持續試用新技術但導入要小心 - GatsbyJS - 投影片:https://revteltech.pse.is/lixiang-hiprint-sharing - Medium:https://revteltech.pse.is/hiprint-sharing 情境 - 從不同領域裡頭中做商業嘗試 - 追求可控 - 追求平衡 橫向擴充 - 降低資訊分享的困難 縱向擴充 - 分工清晰並易於組合 → 後端上一定程度的容器化及微服務架構,前端挑 React / React Native

Slide 14

Slide 14 text

導入經驗 04

Slide 15

Slide 15 text

案例:精品電商 - 迭代快 / 商務邏輯特殊 / UI/UX 一致化 藉邏輯復用降低開發難度! 思考:UI Logic / Biz (Domain) Logic / General Logic 和 Web 的協同合作

Slide 16

Slide 16 text

案例:股票看盤軟體 - 線圖互動及畫面複雜且有其他應用場景 以 Web 形式開發,並整合 webview 做資料互動 思考:Wevbiew 可延伸多遠? Web 開發先行

Slide 17

Slide 17 text

案例:AI fintech 公司 - 有大量基礎 API 是由該公司自行開發 本質是資料管理問題 - Redux - RenderProps 資料管理一直是至關重要的議題 - Redux 的 reducer 思考! 善用一些 pattern 和外部的協作

Slide 18

Slide 18 text

案例:電子鎖開發 - HW / Firmware / APP / Cloud 的一站式開發 以 test case 確保開發及溝通是順暢的 思考: - 什麼東西該進到 native module - 升版 ? React Native + IoT

Slide 19

Slide 19 text

案例: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

Slide 20

Slide 20 text

總結 05

Slide 21

Slide 21 text

產品 技能樹的規劃 個人 Web 生態系的加持 公司 資源配置的角度 總結

Slide 22

Slide 22 text

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