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
230
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
制約理論(ToC)入門
recruitengineers
PRO
3
310
Webアクセシビリティ入門
recruitengineers
PRO
1
260
Postman MCP 関連機能アップデート / Postman MCP feature updates
yokawasa
0
150
現場が抱える様々な問題は “組織設計上” の問題によって生じていることがある / Team-oriented Organization Design 20250827
mtx2s
5
1.1k
Go で言うところのアレは TypeScript で言うとコレ / Kyoto.なんか #7
susisu
7
1.8k
AIエージェントの開発に必須な「コンテキスト・エンジニアリング」とは何か──プロンプト・エンジニアリングとの違いを手がかりに考える
masayamoriofficial
0
400
Product Management Conference -AI時代に進化するPdM-
kojima111
0
220
株式会社ARAV 採用案内
maqui
0
350
MySQL HeatWave:サービス概要のご紹介
oracle4engineer
PRO
4
1.7k
実践アプリケーション設計 ②トランザクションスクリプトへの対応
recruitengineers
PRO
3
170
自社製CMSからmicroCMSへのリプレースがプロダクトグロースを加速させた話
nextbeatdev
0
140
Yahoo!広告ビジネス基盤におけるバックエンド開発
lycorptech_jp
PRO
1
280
Featured
See All Featured
How to train your dragon (web standard)
notwaldorf
96
6.2k
Statistics for Hackers
jakevdp
799
220k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Gamification - CAS2011
davidbonilla
81
5.4k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
The Pragmatic Product Professional
lauravandoore
36
6.8k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Navigating Team Friction
lara
189
15k
RailsConf 2023
tenderlove
30
1.2k
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?