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

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

Transcript

1. React Native 帶來的 跨平台開發典範轉移
2. Jeremy Lu @thecat | jeremy@pubulous.com Founder, builder and instructor, FullStackRocks.com
3. 2015 ⼀一⽉月於加州 Facebook 總部發表
6. - 業界難題 - Hybrid 的問題 - ⾼高層次概念 - 特⾊色 - 運作原理 - 效益 - 挑戰 - 應⽤用實例
7. 難題
8. - 原⽣生 app 開發技術⾨門檻⾼高⼀一般⼈人不易⼿手上遑論精通 - 優良開發⼈人才難尋 - 需同時維護 ios, android 等多套程式碼 - 產品開發曠⽇日費時，拉⾼高時間與資⾦金成本 - 上架與更新等待期⻑⾧長
9. Hybrid 的問題
10. - ⽤用⼾戶體驗不佳，再怎麼模擬都⽐比不上 native 好⽤用 - 例如細緻的 gesture 操控 - 最後通常都很像包在 app 裏的網站 - 效能不佳，單線程易造成 UI 鎖死 - 例如在背景解壓圖檔或傳送⼤大量資料時 - 每次 os 更新後要再模擬⼀一次，永遠追不完
11. 概念
12. - 掃盲 - 不是 html - 不跑在 webview 內 - 使⽤用真正原⽣生元件 - 是 UIView ⽽而⾮非 <div>
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?