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
610
前端開發的再次典範轉移 如何走出混亂並讓複雜變得可掌控
coodoo
9
2.2k
ReactVR - a quick glance
coodoo
2
190
React Native 帶來的跨平台 mobile app 開發典範轉移
coodoo
6
3.1k
GraphQL and Relay Intro
coodoo
0
240
Reactjs.tw meetup 7 - 技術匯報
coodoo
22
1.6k
Sneak Preivew of React Native
coodoo
18
2.6k
Immutable model 簡介
coodoo
17
1.6k
Other Decks in Technology
See All in Technology
Oracle Cloud Infrastructure:2025年9月度サービス・アップデート
oracle4engineer
PRO
0
320
KAGのLT会 #8 - 東京リージョンでGAしたAmazon Q in QuickSightを使って、報告用の資料を作ってみた
0air
0
190
Green Tea Garbage Collector の今
zchee
PRO
2
360
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
110
業務自動化プラットフォーム Google Agentspace に入門してみる #devio2025
maroon1st
0
170
DataOpsNight#8_Terragruntを用いたスケーラブルなSnowflakeインフラ管理
roki18d
1
310
定期的な価値提供だけじゃない、スクラムが導くチームの共創化 / 20251004 Naoki Takahashi
shift_evolve
PRO
3
140
ユニットテストに対する考え方の変遷 / Everyone should watch his live coding
mdstoy
0
110
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
120
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
3
150
データエンジニアがこの先生きのこるには...?
10xinc
0
420
SoccerNet GSRの紹介と技術応用:選手視点映像を提供するサッカー作戦盤ツール
mixi_engineers
PRO
1
130
Featured
See All Featured
Designing for humans not robots
tammielis
254
25k
Bash Introduction
62gerente
615
210k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
The Language of Interfaces
destraynor
162
25k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
20k
KATA
mclloyd
32
14k
Building Adaptive Systems
keathley
43
2.8k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.7k
Faster Mobile Websites
deanohume
310
31k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
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?