Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
React Native 帶來的跨平台 mobile app 開發典範轉移
Search
Jeremy Lu
October 31, 2015
Technology
6
3k
React Native 帶來的跨平台 mobile app 開發典範轉移
Nov. 01, 2015 於高雄 MOPCON 2015 的簡報
Jeremy Lu
October 31, 2015
Tweet
Share
More Decks by Jeremy Lu
See All by Jeremy Lu
採用 TypeScript 前你該考慮的十件事
coodoo
1
2.3k
React Conf 2019 回顧 與 2020 前端開發趨勢展望
coodoo
0
590
前端開發的再次典範轉移 如何走出混亂並讓複雜變得可掌控
coodoo
9
2.1k
ReactVR - a quick glance
coodoo
2
160
GraphQL and Relay Intro
coodoo
0
210
Reactjs.tw meetup 7 - 技術匯報
coodoo
22
1.5k
從「學習一次、隨處應用」 談 React Native 帶來的開發典範轉移
coodoo
5
1.3k
Sneak Preivew of React Native
coodoo
18
2.5k
Immutable model 簡介
coodoo
17
1.6k
Other Decks in Technology
See All in Technology
分布で見る効果検証入門 / ai-distributional-effect
cyberagentdevelopers
PRO
4
700
ユーザーの購買行動モデリングとその分析 / dsc-purchase-analysis
cyberagentdevelopers
PRO
2
100
WINTICKETアプリで実現した高可用性と高速リリースを支えるエコシステム / winticket-eco-system
cyberagentdevelopers
PRO
1
190
30万人が利用するチャットをFirebase Realtime DatabaseからActionCableへ移行する方法
ryosk7
5
350
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
【若手エンジニア応援LT会】AWSで繋がり、共に成長! ~コミュニティ活動と新人教育への挑戦~
kazushi_ohata
0
180
LeSSに潜む「隠れWF病」とその処方箋
lycorptech_jp
PRO
2
120
GitHub Universe: Evaluating RAG apps in GitHub Actions
pamelafox
0
180
マネジメント視点でのre:Invent参加 ~もしCEOがre:Inventに行ったら~
kojiasai
0
470
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.6k
独自ツール開発でスタジオ撮影をDX!「VLS(Virtual LED Studio)」 / dx-studio-vls
cyberagentdevelopers
PRO
1
180
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
470
Featured
See All Featured
Building a Modern Day E-commerce SEO Strategy
aleyda
38
6.9k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Optimizing for Happiness
mojombo
376
69k
What's in a price? How to price your products and services
michaelherold
243
12k
Building Flexible Design Systems
yeseniaperezcruz
327
38k
Building Your Own Lightsaber
phodgson
102
6.1k
It's Worth the Effort
3n
183
27k
RailsConf 2023
tenderlove
29
880
The Cost Of JavaScript in 2023
addyosmani
45
6.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Side Projects
sachag
452
42k
Transcript
React Native 帶來的 跨平台開發典範轉移
Jeremy Lu @thecat |
[email protected]
Founder, builder and instructor, FullStackRocks.com
2015 ⼀一⽉月於加州 Facebook 總部發表
None
None
- 業界難題 - Hybrid 的問題 - ⾼高層次概念 - 特⾊色 -
運作原理 - 效益 - 挑戰 - 應⽤用實例
難題
- 原⽣生 app 開發技術⾨門檻⾼高⼀一般⼈人不易⼿手上遑論精通 - 優良開發⼈人才難尋 - 需同時維護 ios, android
等多套程式碼 - 產品開發曠⽇日費時,拉⾼高時間與資⾦金成本 - 上架與更新等待期⻑⾧長
Hybrid 的問題
- ⽤用⼾戶體驗不佳,再怎麼模擬都⽐比不上 native 好⽤用 - 例如細緻的 gesture 操控 - 最後通常都很像包在
app 裏的網站 - 效能不佳,單線程易造成 UI 鎖死 - 例如在背景解壓圖檔或傳送⼤大量資料時 - 每次 os 更新後要再模擬⼀一次,永遠追不完
概念
- 掃盲 - 不是 html - 不跑在 webview 內 -
使⽤用真正原⽣生元件 - 是 UIView ⽽而⾮非 <div>
None
- ⺫⽬目地是同時追求 - 最佳的⽤用⼾戶體驗 - 最佳的開發者體驗
- iOS 7 - Android 4.1 (API 16)
兩平台可共⽤用 80% 程式碼
- learn once, write anywhere - ⽤用相同的 react ⼿手法開發 web,
app, desktop
注意不是 write once, run everywhere Java Flash PhoneGap
Learn once, write anywhere Learn once, write anywhere Learn once,
write anywhere
特⾊色
- 使⽤用 iOS/android 原⽣生 UI 組件,效能極佳 - 版⾯面編排⼀一律⽤用 Flexbox 與
inline styles - 開發與除錯⼯工具⿑齊備,⼯工作流程極有效率 - live reload - chrome devtools (breakpoint, console...)
使⽤用 Chrome devtools 開發與除錯 iOS app
- Over the Air 更新版本,不需等待審核 - 屌打其它⼯工具 - 豐富的 3rd
party 套件可⽤用 - camera, photo, recorder, phone, contact…
Apple 明確表⽰示允許動態下載程式碼,只要不改變程式⽤用途
原理
分為 javascript 與 iOS 兩個 thread 分別運⾏行,兩者 互不干擾 - javascript
負責所有 logic - iOS 負責 UI 運⾏行 - 確保 ui thread 不會被拖慢,確保使⽤用者體驗
bridge JS Thread UI Thread
cross thread 溝通的成本 - 每次 cross-thread 溝通都有固定的資料轉換與啟 動成本 - 頻繁進⾏行
cross-thread 溝通會造成效率低落也可 能拖慢運⾏行速度
解決之道 - 採⽤用 batching 以減少 cross-thread 通訊數量 - 改⽤用 async
cross-thread communication 以避 免阻斷 iOS ui 運⾏行
效益
做為開發者 - 絕佳開發體驗 - 使⽤用熟悉的 web ⼯工具(js, css, editor) -
編輯後快速預覽 - 無痛裝到⼿手機上測試
熟悉的開發⼯工具(圖為 Sublime Text Editor)
<ListView dataSource={this.state.dataSource} onEndReached={this.onEndReached} automaticallyAdjustContentInsets={false} showsVerticalScrollIndicator={false} /> 相同的 react 語法與開發架構
做為開發者 - learn once, write anywhere - 職業路徑變的更寬廣,⾝身價更⾼高 - 學⼀一次即通吃前端
web, mobile, desktop - 加上後台技能變⾝身 full stack developer - 是未來三年投資報酬率最⾼高的專業技能
做為經營者 1. 解決⼈人才難尋問題 - 所有 web developer 都有潛⼒力向上發展成為 app developer
- react 易學好⽤用,找對⼈人稍加訓練即可快速上⼿手貢獻⽣生產 ⼒力 2. 產品開發時程減半 - 80% 程式碼可共⽤用 - 只需針對不同平台置換 view 即可
做為經營者 3. 總開發成本降低(溝通、⼈人⼒力、時間、資⾦金) 4. 產品更新週期縮短,更快滿⾜足市場需求 - OTA update - 快速做多輪
A/B testing
挑戰
- 開發團隊的⾓角⾊色與任務要進化 - 以往是三組 team 分別實作不同版本 - 現在是⼀一組 team 即能跨平台開發所有版本
- 因此能更通透的掌控產品細節、開發時程與節省成本 - 但也因此開發⼈人員要學的更多,俱備綜合技能 - 各平台的 UI 語⾔言、操作習慣、⽤用⼾戶體驗 - 思考模式與產品設計都要改變
實例
- react desktop - https://github.com/gabrielbull/react-desktop - react blessing - https://github.com/chjj/blessed
- showcase - https://facebook.github.io/react-native/ showcase.html
react desktop with electron
react-blessed
As of 2015, front-end development is considered a solved problem.
~ says nobody ever ~
1. React / Native / Redux 2. Webpack / Babel
/ ES6 3. CSS-Modules / Node / NPM 4. Reactive (Rx.js)
@thecat |
[email protected]
Founder, builder and instructor, FullStackRocks.com Questions?