SlideShare a Scribd company logo
1 of 71
Download to read offline
給我⼀個
放

棄 的理由
學 習
遊 戲 學 習
Magic Moment

成就感
……
成 就 感
Magic Moment
學 習 遊 戲
回到主題
給我⼀個
放

棄 的理由
前端的⽣態⽬前
React Angular Vue
曾經以為的前 💰端
找到 DOM -> 操作 DOM
#JQ不能亡
#單純的年年代
開始Ajax的前 💰端
Ajax -> 回傳 -> 找到 DOM -> 操作 DOM
#JQ不能亡#單純的年年代 #現在有Fetch
越來越靠__的前 💰端
很多 Ajax -> 很多回傳 ->

找到很多DOM -> 操作很多 DOM
#JQ不能亡#訓練邏輯 #18層Callback其實也還好
開發 要 單純
維護 要 簡單
效能 要 快速
*最好還能簡單的跟現有專案結合*
#https://2014.jsdc.tw/talks/jeremy.pdf
#Jeremy Lu: React+Flux in Action 實戰經驗分享
重點:
- Virtual DOM

⽤用最佳的⽅方式幫你更更新DOM
- 從⼩小處著眼, 開發元件

多⼈人協作也不是問題
- JSX, 把 JS/CSS/HTML 封裝在元件中

不⽤用⼀一直翻⼀一堆 Code
- Lifecycle
重點:
- Data + Flow 管理理狀狀態
重點:
容易跟現有專案結合
重點:
#想塞哪就塞哪
那全新的專案呢?
#沒有GUI介⾯面

#你是不是不會離開 Vim
開發 要 單純
維護 要 簡單
效能 要 快速
*最好還能簡單的跟現有專案結合*
Magic Moment

成就感 ++
渲染引擎

非

框架
VDOMVDOMVDOM
VDOM更更新機制
框架/套件/資料狀狀態管理理
Reconciliation

Lifecycle

Fiber
Relay, Flux, Redux

Hooks

react-Native

react-Router

react-goodbye

react-….
⽣態系
#SweetJohn甜約翰⿎鼓⼿手Repo
VDOM 的變化
回到那個秋天...
#JSDC2016

#ReactNative Redux 簡單也不簡單
REACT NATIVE /
REDUX 簡單 也 不簡單
SAM LEE
React JS
VDOM
WEB
COMPONENT
React Native
VDOM NATIVE

OBJECT
iOS
Android
Windows
Tizen
OSX
QT
VR
React Native 的原理是?
JavaScriptCore - iOS
Android - V8 engine
ReactJS
Native

Method
JavascriptCore
Javascript Bridge
RCTBridge
Obj-C bridge
翻譯米糕!!!!!!!
那全新的專案呢?
#沒有GUI介⾯面

#你是不是不會離開 Vim
Magic Moment

成就感 ++++
那現有 App 

專案可以⽤嗎?
#JSDC2015

#ReactNative 實戰
Magic Moment

成就感 ++++++
⼀切的⼀切都是

為了
DX#Developer Experience

#不是 XD
Cross Browser
#JQ不能亡
Cross Platform
“Learn once write anywhere”
看看⼤家說的
https://2018.stateofjs.com/front-end-frameworks/react/
#數字說話
但
しかし
MAIS
ALE
HO
ግን።
TAPI
แต่
#都要年年底了了
現在是 2019 年
#VDOM都看膩了了
#Redux也聽膩了了
#React Native也聽三年年了了
#Old School
#這算什什麼DX
#React很好⽤用我們也知道了了
你有發現,

狀態越來越難控管

了嗎?
Delay 30 sec
Delay 30 secDelay 3 sec
#Traffic Light
Delay 30
Delay 30Delay 3
Reducer
狀態無限制的更新

狀態沒有相依性
#還得另外寫邏輯
#Jeremy Lu: 前端開發的再次典範轉移
#https://speakerdeck.com/coodoo/qian-duan-kai-fa-de-zai-ci-dian-fan-
zhuan-yi-ru-he-zou-chu-hun-luan-bing-rang-fu-za-bian-de-ke-zhang-
kong?slide=19
利⽤StateCharts

管理狀態
清楚定義 Next State

不會從 紅燈 變 黃燈
xstate/react
xstate/react
https://xstate.js.org/docs/packages/xstate-react/#quick-start
#Jeremy Lu: 前端開發的再次典範轉移
#https://speakerdeck.com/coodoo/qian-duan-kai-fa-de-zai-ci-dian-fan-
zhuan-yi-ru-he-zou-chu-hun-luan-bing-rang-fu-za-bian-de-ke-zhang-
kong?slide=19
總結
Magic Moment

成就感 很重要
沒有那麼複雜
#還有⼈人
複雜的是框架
讓前端不只是 瀏覽器
#⽽而是所有的裝置!!!
⾴⾯產品單純

請不要使⽤框架...
#VanillaJS是你的好朋友

#PMA 也是潮潮的選擇喔
#Jeremy Lu: 前端開發的再次典範轉移
#https://speakerdeck.com/coodoo/qian-duan-kai-fa-de-zai-ci-dian-fan-
zhuan-yi-ru-he-zou-chu-hun-luan-bing-rang-fu-za-bian-de-ke-zhang-
kong?slide=19
但我

還想說的是...
#每次都要離題⼀一下
核⼼原理更重要
#Always
Javascript
“Learn once write anywhere”
其他都只是增進
DX#不是XD
最後我

想說的是...
#要離題幾次
BX#Boss Experience
你
是
忘
記
了
。
。


還
是
害
怕
想
起
來
。
。
。
給我⼀個
放

棄 的理由
⼭山姆⼤大叔(Sam Lee)
現職 : 

趨勢科技 前端⼯工程師

熱衷於 : 前端 / 後端技術
#別問我照片啥時拍的
Time

More Related Content

Similar to JSDC 2019 給我一個放棄 React 的理由

React Native + Redux
React Native + ReduxReact Native + Redux
React Native + ReduxCh Rick
 
高雄前端上課簡報 #29
高雄前端上課簡報 #29高雄前端上課簡報 #29
高雄前端上課簡報 #29reactmaker9527
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web apphungjie19
 
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Kyle Shen
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?昱安 周
 
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰Sam Lee
 
Node js实践
Node js实践Node js实践
Node js实践myzykj
 
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2twMVC
 
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有twMVC
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號鍾誠 陳鍾誠
 
React Scroll animate
React Scroll animateReact Scroll animate
React Scroll animateChen HsuChing
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails serverMichael Chen
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統Hsu Ping Feng
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in LusterJason Chung
 
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-showleneli
 
Graphic programming in js
Graphic programming in jsGraphic programming in js
Graphic programming in jsjay li
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨newker
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plusDongxu Yao
 
Web view on the way
Web view on the wayWeb view on the way
Web view on the wayLiddle Fang
 

Similar to JSDC 2019 給我一個放棄 React 的理由 (20)

React Native + Redux
React Native + ReduxReact Native + Redux
React Native + Redux
 
高雄前端上課簡報 #29
高雄前端上課簡報 #29高雄前端上課簡報 #29
高雄前端上課簡報 #29
 
Hello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web appHello reactJS 0~1 Bulid my first web app
Hello reactJS 0~1 Bulid my first web app
 
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
 
React.js what do you really mean?
React.js what do you really mean?React.js what do you really mean?
React.js what do you really mean?
 
JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰JSDC 2015 React-Native 實戰
JSDC 2015 React-Native 實戰
 
Node js实践
Node js实践Node js实践
Node js实践
 
Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2Asp.net mvc 從無到有 -twMVC#2
Asp.net mvc 從無到有 -twMVC#2
 
twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有twMVC#02 | ASP.NET MVC 從無到有
twMVC#02 | ASP.NET MVC 從無到有
 
程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號程式人雜誌 -- 2015 年1月號
程式人雜誌 -- 2015 年1月號
 
React Scroll animate
React Scroll animateReact Scroll animate
React Scroll animate
 
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
 
Angularjs
AngularjsAngularjs
Angularjs
 
使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統使用Javascript及HTML5打造協同運作系統
使用Javascript及HTML5打造協同運作系統
 
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
 
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-show
 
Graphic programming in js
Graphic programming in jsGraphic programming in js
Graphic programming in js
 
移动Web开发框架jqm探讨
移动Web开发框架jqm探讨移动Web开发框架jqm探讨
移动Web开发框架jqm探讨
 
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
 
Web view on the way
Web view on the wayWeb view on the way
Web view on the way
 

More from Sam Lee

LightingTalk - GraphQL with Restful API in 5 min
LightingTalk - GraphQL with Restful API in 5 minLightingTalk - GraphQL with Restful API in 5 min
LightingTalk - GraphQL with Restful API in 5 minSam Lee
 
React native sharing
React native sharingReact native sharing
React native sharingSam Lee
 
Trend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding toolTrend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding toolSam Lee
 
What is FED
What is FEDWhat is FED
What is FEDSam Lee
 
Modern web2016 reactnativeweb
Modern web2016 reactnativeweb Modern web2016 reactnativeweb
Modern web2016 reactnativeweb Sam Lee
 
React native redux_sharing
React native redux_sharingReact native redux_sharing
React native redux_sharingSam Lee
 
React Native for Web
React Native for WebReact Native for Web
React Native for WebSam Lee
 
Backbonejs
BackbonejsBackbonejs
BackbonejsSam Lee
 

More from Sam Lee (8)

LightingTalk - GraphQL with Restful API in 5 min
LightingTalk - GraphQL with Restful API in 5 minLightingTalk - GraphQL with Restful API in 5 min
LightingTalk - GraphQL with Restful API in 5 min
 
React native sharing
React native sharingReact native sharing
React native sharing
 
Trend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding toolTrend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding tool
 
What is FED
What is FEDWhat is FED
What is FED
 
Modern web2016 reactnativeweb
Modern web2016 reactnativeweb Modern web2016 reactnativeweb
Modern web2016 reactnativeweb
 
React native redux_sharing
React native redux_sharingReact native redux_sharing
React native redux_sharing
 
React Native for Web
React Native for WebReact Native for Web
React Native for Web
 
Backbonejs
BackbonejsBackbonejs
Backbonejs
 

JSDC 2019 給我一個放棄 React 的理由