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
メールヘッダーを見てみよう
hinono
0
140
FODにおけるホーム画面編成のレコメンド
watarukudo
PRO
2
420
サーバレスの未来〜The Key to Simplifying Everything〜
kawaji_scratch
2
280
サービスローンチを成功させろ! 〜SREが教える30日間の攻略ガイド〜
mmmatsuda
2
2.2k
メンバーがオーナーシップを発揮しやすいチームづくり
ham0215
2
320
AWS Community Builderのススメ - みんなもCommunity Builderに応募しよう! -
smt7174
0
210
あなたはJVMの気持ちを理解できるか?
skrb
1
300
Amazon Route 53, 待ちに待った TLSAレコードのサポート開始
kenichinakamura
0
200
SREとしてスタッフエンジニアを目指す / SRE Kaigi 2025
tjun
12
3.3k
iPadOS18でフローティングタブバーを解除してみた
sansantech
PRO
1
190
My small contributions - Fujiwara Tech Conference 2025
ijin
0
1.6k
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
260
Featured
See All Featured
Unsuck your backbone
ammeep
669
57k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
Designing for Performance
lara
604
68k
Measuring & Analyzing Core Web Vitals
bluesmoon
5
210
The Language of Interfaces
destraynor
156
24k
Navigating Team Friction
lara
183
15k
Building an army of robots
kneath
302
45k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
GitHub's CSS Performance
jonrohan
1030
460k
A better future with KSS
kneath
238
17k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
510
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
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?