React Native 帶來的跨平台 mobile app 開發典範轉移

81bf9a5ec95c07c4884b334456025095?s=47 Jeremy Lu
October 31, 2015

React Native 帶來的跨平台 mobile app 開發典範轉移

Nov. 01, 2015 於高雄 MOPCON 2015 的簡報

81bf9a5ec95c07c4884b334456025095?s=128

Jeremy Lu

October 31, 2015
Tweet

Transcript

  1. React Native 帶來的 跨平台開發典範轉移

  2. Jeremy Lu @thecat | jeremy@pubulous.com Founder, builder and instructor, FullStackRocks.com

  3. 2015 ⼀一⽉月於加州 Facebook 總部發表

  4. None
  5. None
  6. - 業界難題 - Hybrid 的問題 - ⾼高層次概念 - 特⾊色 -

    運作原理 - 效益 - 挑戰 - 應⽤用實例
  7. 難題

  8. - 原⽣生 app 開發技術⾨門檻⾼高⼀一般⼈人不易⼿手上遑論精通 - 優良開發⼈人才難尋 - 需同時維護 ios, android

    等多套程式碼 - 產品開發曠⽇日費時,拉⾼高時間與資⾦金成本 - 上架與更新等待期⻑⾧長
  9. Hybrid 的問題

  10. - ⽤用⼾戶體驗不佳,再怎麼模擬都⽐比不上 native 好⽤用 - 例如細緻的 gesture 操控 - 最後通常都很像包在

    app 裏的網站 - 效能不佳,單線程易造成 UI 鎖死 - 例如在背景解壓圖檔或傳送⼤大量資料時 - 每次 os 更新後要再模擬⼀一次,永遠追不完
  11. 概念

  12. - 掃盲 - 不是 html - 不跑在 webview 內 -

    使⽤用真正原⽣生元件 - 是 UIView ⽽而⾮非 <div>
  13. None
  14. - ⺫⽬目地是同時追求 - 最佳的⽤用⼾戶體驗 - 最佳的開發者體驗

  15. - iOS 7 - Android 4.1 (API 16)

  16. 兩平台可共⽤用 80% 程式碼

  17. - learn once, write anywhere - ⽤用相同的 react ⼿手法開發 web,

    app, desktop
  18. 注意不是 write once, run everywhere Java Flash PhoneGap

  19. Learn once, write anywhere Learn once, write anywhere Learn once,

    write anywhere
  20. 特⾊色

  21. - 使⽤用 iOS/android 原⽣生 UI 組件,效能極佳 - 版⾯面編排⼀一律⽤用 Flexbox 與

    inline styles - 開發與除錯⼯工具⿑齊備,⼯工作流程極有效率 - live reload - chrome devtools (breakpoint, console...)
  22. 使⽤用 Chrome devtools 開發與除錯 iOS app

  23. - Over the Air 更新版本,不需等待審核 - 屌打其它⼯工具 - 豐富的 3rd

    party 套件可⽤用 - camera, photo, recorder, phone, contact…
  24. Apple 明確表⽰示允許動態下載程式碼,只要不改變程式⽤用途

  25. 原理

  26. 分為 javascript 與 iOS 兩個 thread 分別運⾏行,兩者 互不干擾
 - javascript

    負責所有 logic - iOS 負責 UI 運⾏行 - 確保 ui thread 不會被拖慢,確保使⽤用者體驗
  27. bridge JS Thread UI Thread

  28. cross thread 溝通的成本 - 每次 cross-thread 溝通都有固定的資料轉換與啟 動成本 - 頻繁進⾏行

    cross-thread 溝通會造成效率低落也可 能拖慢運⾏行速度
  29. 解決之道 - 採⽤用 batching 以減少 cross-thread 通訊數量
 - 改⽤用 async

    cross-thread communication 以避 免阻斷 iOS ui 運⾏行
  30. 效益

  31. 做為開發者 - 絕佳開發體驗 - 使⽤用熟悉的 web ⼯工具(js, css, editor) -

    編輯後快速預覽 - 無痛裝到⼿手機上測試
  32. 熟悉的開發⼯工具(圖為 Sublime Text Editor)

  33. <ListView dataSource={this.state.dataSource} onEndReached={this.onEndReached} automaticallyAdjustContentInsets={false} showsVerticalScrollIndicator={false} /> 相同的 react 語法與開發架構

  34. 做為開發者 - learn once, write anywhere - 職業路徑變的更寬廣,⾝身價更⾼高 - 學⼀一次即通吃前端

    web, mobile, desktop - 加上後台技能變⾝身 full stack developer - 是未來三年投資報酬率最⾼高的專業技能
  35. 做為經營者 1. 解決⼈人才難尋問題 - 所有 web developer 都有潛⼒力向上發展成為 app developer

    - react 易學好⽤用,找對⼈人稍加訓練即可快速上⼿手貢獻⽣生產 ⼒力 
 2. 產品開發時程減半 - 80% 程式碼可共⽤用 - 只需針對不同平台置換 view 即可
  36. 做為經營者 3. 總開發成本降低(溝通、⼈人⼒力、時間、資⾦金)
 4. 產品更新週期縮短,更快滿⾜足市場需求 - OTA update - 快速做多輪

    A/B testing
  37. 挑戰

  38. - 開發團隊的⾓角⾊色與任務要進化 - 以往是三組 team 分別實作不同版本 - 現在是⼀一組 team 即能跨平台開發所有版本

    - 因此能更通透的掌控產品細節、開發時程與節省成本 - 但也因此開發⼈人員要學的更多,俱備綜合技能 - 各平台的 UI 語⾔言、操作習慣、⽤用⼾戶體驗 - 思考模式與產品設計都要改變
  39. 實例

  40. - react desktop - https://github.com/gabrielbull/react-desktop - react blessing - https://github.com/chjj/blessed

    - showcase - https://facebook.github.io/react-native/ showcase.html
  41. react desktop with electron

  42. react-blessed

  43. As of 2015, front-end development is considered a solved problem.

    ~ says nobody ever ~
  44. 1. React / Native / Redux 2. Webpack / Babel

    / ES6 3. CSS-Modules / Node / NPM 4. Reactive (Rx.js)
  45. @thecat | jeremy@pubulous.com Founder, builder and instructor, FullStackRocks.com Questions?