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

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

4. View Slide

5. View Slide

6. - 業界難題
   - Hybrid 的問題
   - ⾼高層次概念
   - 特⾊色
   - 運作原理
   - 效益
   - 挑戰
   - 應⽤用實例
   

   View Slide

7. 難題
   

   View Slide

8. - 原⽣生 app 開發技術⾨門檻⾼高⼀一般⼈人不易⼿手上遑論精通
   - 優良開發⼈人才難尋
   - 需同時維護 ios, android 等多套程式碼
   - 產品開發曠⽇日費時，拉⾼高時間與資⾦金成本
   - 上架與更新等待期⻑⾧長
   

   View Slide

9. Hybrid 的問題
   

   View Slide

10. - ⽤用⼾戶體驗不佳，再怎麼模擬都⽐比不上 native 好⽤用
    - 例如細緻的 gesture 操控
    - 最後通常都很像包在 app 裏的網站
    - 效能不佳，單線程易造成 UI 鎖死
    - 例如在背景解壓圖檔或傳送⼤大量資料時
    - 每次 os 更新後要再模擬⼀一次，永遠追不完
    

    View Slide

11. 概念
    

    View Slide

12. - 掃盲
    - 不是 html
    - 不跑在 webview 內
    - 使⽤用真正原⽣生元件
    - 是 UIView ⽽而⾮非
    

    View Slide

13. View Slide

14. - ⺫⽬目地是同時追求
    - 最佳的⽤用⼾戶體驗
    - 最佳的開發者體驗
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 特⾊色
    

    View Slide

21. - 使⽤用 iOS/android 原⽣生 UI 組件，效能極佳
    - 版⾯面編排⼀一律⽤用 Flexbox 與 inline styles
    - 開發與除錯⼯工具⿑齊備，⼯工作流程極有效率
    - live reload
    - chrome devtools (breakpoint, console...)
    

    View Slide

22. 使⽤用 Chrome devtools 開發與除錯 iOS app
    

    View Slide

23. - Over the Air 更新版本，不需等待審核
    - 屌打其它⼯工具
    - 豐富的 3rd party 套件可⽤用
    - camera, photo, recorder, phone, contact…
    

    View Slide

24. Apple 明確表⽰示允許動態下載程式碼，只要不改變程式⽤用途
    

    View Slide

25. 原理
    

    View Slide

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

    - javascript 負責所有 logic
    - iOS 負責 UI 運⾏行
    - 確保 ui thread 不會被拖慢，確保使⽤用者體驗
    

    View Slide

27. bridge
    JS Thread UI Thread
    

    View Slide

28. cross thread 溝通的成本
    - 每次 cross-thread 溝通都有固定的資料轉換與啟
    動成本
    - 頻繁進⾏行 cross-thread 溝通會造成效率低落也可
    能拖慢運⾏行速度
    

    View Slide

29. 解決之道
    - 採⽤用 batching 以減少 cross-thread 通訊數量

    - 改⽤用 async cross-thread communication 以避
    免阻斷 iOS ui 運⾏行
    

    View Slide

30. 效益
    

    View Slide

31. 做為開發者
    - 絕佳開發體驗
    - 使⽤用熟悉的 web ⼯工具(js, css, editor)
    - 編輯後快速預覽
    - 無痛裝到⼿手機上測試
    

    View Slide

32. 熟悉的開發⼯工具(圖為 Sublime Text Editor)
    

    View Slide

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

    View Slide

34. 做為開發者
    - learn once, write anywhere
    - 職業路徑變的更寬廣，⾝身價更⾼高
    - 學⼀一次即通吃前端 web, mobile, desktop
    - 加上後台技能變⾝身 full stack developer
    - 是未來三年投資報酬率最⾼高的專業技能
    

    View Slide

35. 做為經營者
    1. 解決⼈人才難尋問題
    - 所有 web developer 都有潛⼒力向上發展成為 app
    developer
    - react 易學好⽤用，找對⼈人稍加訓練即可快速上⼿手貢獻⽣生產
    ⼒力
    

    2. 產品開發時程減半
    - 80% 程式碼可共⽤用
    - 只需針對不同平台置換 view 即可
    

    View Slide

36. 做為經營者
    3. 總開發成本降低(溝通、⼈人⼒力、時間、資⾦金)

    4. 產品更新週期縮短，更快滿⾜足市場需求
    - OTA update
    - 快速做多輪 A/B testing
    

    View Slide

37. 挑戰
    

    View Slide

38. - 開發團隊的⾓角⾊色與任務要進化
    - 以往是三組 team 分別實作不同版本
    - 現在是⼀一組 team 即能跨平台開發所有版本
    - 因此能更通透的掌控產品細節、開發時程與節省成本
    - 但也因此開發⼈人員要學的更多，俱備綜合技能
    - 各平台的 UI 語⾔言、操作習慣、⽤用⼾戶體驗
    - 思考模式與產品設計都要改變
    

    View Slide

39. 實例
    

    View Slide

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
    

    View Slide

41. react desktop with electron
    

    View Slide

42. react-blessed
    

    View Slide

43. As of 2015, front-end
    development is
    considered a solved
    problem.
    ~ says nobody ever ~
    

    View Slide

44. 1. React / Native / Redux
    2. Webpack / Babel / ES6
    3. CSS-Modules / Node / NPM
    4. Reactive (Rx.js)
    

    View Slide

45. @thecat | jeremy@pubulous.com
    Founder, builder and instructor,
    FullStackRocks.com
    Questions?
    

    View Slide