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 帶來的開發典範轉移
Search
Jeremy Lu
May 16, 2015
Technology
5
1.3k
從「學習一次、隨處應用」 談 React Native 帶來的開發典範轉移
這是 2015 年 5 月 16 日於中研院舉辦的 Modern Web 2015 中所給的演講。
Jeremy Lu
May 16, 2015
Tweet
Share
More Decks by Jeremy Lu
See All by Jeremy Lu
採用 TypeScript 前你該考慮的十件事
coodoo
1
2.3k
React Conf 2019 回顧 與 2020 前端開發趨勢展望
coodoo
0
600
前端開發的再次典範轉移 如何走出混亂並讓複雜變得可掌控
coodoo
9
2.1k
ReactVR - a quick glance
coodoo
2
170
React Native 帶來的跨平台 mobile app 開發典範轉移
coodoo
6
3.1k
GraphQL and Relay Intro
coodoo
0
210
Reactjs.tw meetup 7 - 技術匯報
coodoo
22
1.5k
Sneak Preivew of React Native
coodoo
18
2.5k
Immutable model 簡介
coodoo
17
1.6k
Other Decks in Technology
See All in Technology
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
SCSAから学ぶセキュリティ管理
masakamayama
0
140
モノレポ開発のエラー、誰が見る?Datadog で実現する適切なトリアージとエスカレーション
biwashi
6
770
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
現場の種を事業の芽にする - エンジニア主導のイノベーションを事業戦略に装着する方法 -
kzkmaeda
2
1.5k
Larkご案内資料
customercloud
PRO
0
600
All you need to know about InnoDB Primary Keys
lefred
0
120
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
Developer Summit 2025 [14-D-1] Yuki Hattori
yuhattor
19
5.1k
データの品質が低いと何が困るのか
kzykmyzw
6
1k
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Being A Developer After 40
akosma
89
590k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
27
1.9k
Transcript
從「學習⼀一次、隨處應⽤用」 談 React Native 帶來的 開發典範轉移 Jeremy Lu
React ⽤用起來爽很⼤大 好東⻄西不學嗎?XDDD
Jeremy Lu @thecat
[email protected]
Founder, builder and instructor,
FullStackRocks.com
- React - React Native - 業界應⽤用現況 - 典範轉移 -
為何你該開始學習 - 相關資訊
- React - React Native - 業界應⽤用現況 - 典範轉移 -
為何你該開始學習 - 相關資訊
簡介 - Facebook 於 2013 年中開源 - React 內建 VDOM
是輕量的顯⽰示元件 - Flux 管理 Data + Flow - React 負責 view,Flux 負責 model,兩者合作無間
核⼼心概念 single source of truth thinking in component <jsx />
always redraw (VDOM)
優點 - 簡單易學、⼀一天⼊入⾨門 - 思維模式單純 - 強⼤大防呆、結構單純、不易出錯 - ⾴頁⾯面效能優越 -
server-rendering, Isomorphic for SEO, faster response
- React - React Native - 業界應⽤用現況 - 典範轉移 -
為何你該開始學習 - 相關資訊
簡介 - 2015 年 1 ⽉月於 React Conf 推出 -
讓所有網⾴頁開發者可製作 native mobile app - ⽀支援 iOS 與 Android
媽 我 在 這
None
核⼼心概念 - 不使⽤用 Webview 與 HTML - 採⽤用 javascript/html/css 等熟悉技術開發
- 轉換為各平台原⽣生介⾯面,效能極佳
None
優點 - 懂 react 即可開發 - 開發⼀一次,可⽀支持不同 drawing backend
None
- React - React Native - 業界應⽤用現況 - 典範轉移 -
為何你該開始學習 - 相關資訊
業界應⽤用現況 - 北美 2014 年起出現⼤大規模轉換潮,持續⾄至今 - 不是已經在⽤用 react,就是在轉換到 react 的途中
- Apple, Yahoo, Instagram, Netflix, CodeCademy, Khan Academy, Microsoft… - 台灣 KKBOX, KKTIX, 聯發科與多家 startup - ⼈人⼒力需求孔急為⼗十年來少⾒見
- React - React Native - 業界應⽤用現況 - 典範轉移 -
為何你該開始學習 - 相關資訊
⼀一、開發⼿手法 - 以往是⼈人⼯工維護狀態 - 極致表現是 two-way data-binding - 極易出錯、效能不佳
None
MV*
實作結果
開發⼿手法 - 現在是⼀一律重繪 - ⼼心理負擔輕 - 出錯機會低 - 效能佳
single source of truth thinking in component always redraw
唯⼀一真相與單向資料流
兩相⽐比較
None
⼆二、架構策略 - 以往是 write once, run everywhere - 早期⽤用 Java
Swing, Adobe Flash/Air - 後來是 Phonegap 等 webview-based ⽅方案(ionic...) - 結果 - ⽤用⼾戶體驗不佳 - 效能不佳 - 評價不佳
架構策略 - 現在是 learn once write anywhere - 效能 -
不受 webview 效能限制,可常保 60FPS - 體驗 - native UI 帶來最佳⽤用⼾戶體驗(操作習慣、介⾯面語⾔言)
架構策略 - 節省成本 - 時間 - 60% 程式可跨平台通⽤用 - 僅
UI 部份需針對不同平台重寫 - 品質 - 不易犯錯,維護成本降低 - ⼈人⼒力 - 易學易上⼿手,快速產⽣生極戰⼒力
None
- React - React Native - 業界應⽤用現況 - 典範轉移 -
為何你該開始學習 - 相關資訊
為何你該開始學習 - react 的核⼼心概念可終⾝身受⽤用,將來在任何框架下皆可應 ⽤用 - 學會⼀一項⼯工具可同時開發 web、app、desktop,應⽤用 範圍極廣 -
多年來少⾒見時間投資成本效益極⾼高的選擇,好東⻄西不學 嗎?
None
⽤用最好的⼯工具 做開⼼心的⼯工作 賺豐厚的報酬 過愜意的⽣生活
學習資訊 - https://www.facebook.com/groups/reactjs.tw/ 2000+ members - https://www.facebook.com/twthecat 歡迎加臉書好友,有問必答™
1925 - 2015
@thecat |
[email protected]
Founder, builder and instructor, FullStackRocks.com Questions?