狠狠撸

狠狠撸Share a Scribd company logo
給我?個
放?
棄 的理由
學 习
遊 戏 學 习
Magic Moment?
成就感
……
成 就 感
Magic Moment
學 习 遊 戏
回到主题
給我?個
放?
棄 的理由
前端的?态?前
React Angular Vue
曾經以為的前 ?端
找到 DOM -> 操作 DOM
#JQ不能亡
#單純的年年代
開始Ajax的前 ?端
Ajax -> 回傳 -> 找到 DOM -> 操作 DOM
#JQ不能亡#單純的年年代 #現在有Fetch
越來越靠__的前 ?端
很多 Ajax -> 很多回傳 ->?
找到很多DOM -> 操作很多 DOM
#JQ不能亡#訓練邏輯 #18層Callback其實也還好
開發 要 單純
維護 要 簡單
效能 要 快速
*最好還能簡單的跟現有專案結合*
JSDC 2019 給我一個放棄 React 的理由
#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 的變化
JSDC 2019 給我一個放棄 React 的理由
回到那個秋天...
#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 补苍测飞丑别谤别”
看看?家說的
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
#Traf?c 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 补苍测飞丑别谤别”
其他都只是增進
DX#不是XD
最後我?
想說的是...
#要離題幾次
BX#Boss Experience
你
是
忘
記
了
。
。
?
還
是
害
怕
想
起
來
。
。
。
給我?個
放?
棄 的理由
?山姆?大叔(Sam Lee)
現職 : ?
趨勢科技 前端?工程師?
熱衷於 : 前端 / 後端技術
#別問我照片啥時拍的
Time

More Related Content

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

React Native + Redux
React Native + ReduxReact Native + Redux
React Native + Redux
Ch Rick
?
高雄前端上課簡報 #29
高雄前端上課簡報 #29高雄前端上課簡報 #29
高雄前端上課簡報 #29
reactmaker9527
?
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
hungjie19
?
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle 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#2
twMVC
?
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 animate
Chen HsuChing
?
Beyond rails server
Beyond rails serverBeyond rails server
Beyond rails server
Michael Chen
?
Angularjs
AngularjsAngularjs
Angularjs
宗哲 謝
?
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
Hsu Ping Feng
?
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
Jason Chung
?
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-show
leneli
?
Graphic programming in js
Graphic programming in jsGraphic programming in js
Graphic programming in js
jay li
?
移动奥别产开发框架箩辩尘探讨
移动奥别产开发框架箩辩尘探讨移动奥别产开发框架箩辩尘探讨
移动奥别产开发框架箩辩尘探讨
newker
?
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
Dongxu Yao
?
Web view on the way
Web view on the wayWeb view on the way
Web view on the way
Liddle Fang
?
React Native + Redux
React Native + ReduxReact Native + Redux
React Native + Redux
Ch Rick
?
高雄前端上課簡報 #29
高雄前端上課簡報 #29高雄前端上課簡報 #29
高雄前端上課簡報 #29
reactmaker9527
?
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
hungjie19
?
Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4Angular.js & ASP.NET in Study4
Angular.js & ASP.NET in Study4
Kyle 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#2
twMVC
?
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月號
鍾誠 陳鍾誠
?
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
使用闯补惫补蝉肠谤颈辫迟及贬罢惭尝5打造协同运作系统
Hsu Ping Feng
?
AngularJS training in Luster
AngularJS training in LusterAngularJS training in Luster
AngularJS training in Luster
Jason Chung
?
D2-ETao-show
D2-ETao-showD2-ETao-show
D2-ETao-show
leneli
?
Graphic programming in js
Graphic programming in jsGraphic programming in js
Graphic programming in js
jay li
?
移动奥别产开发框架箩辩尘探讨
移动奥别产开发框架箩辩尘探讨移动奥别产开发框架箩辩尘探讨
移动奥别产开发框架箩辩尘探讨
newker
?
Javascript primer plus
Javascript primer plusJavascript primer plus
Javascript primer plus
Dongxu Yao
?
Web view on the way
Web view on the wayWeb view on the way
Web view on the way
Liddle Fang
?

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
Sam Lee
?
React native sharing
React native sharingReact native sharing
React native sharing
Sam Lee
?
Trend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding toolTrend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding tool
Sam Lee
?
What is FED
What is FEDWhat is FED
What is FED
Sam 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_sharing
Sam Lee
?
React Native for Web
React Native for WebReact Native for Web
React Native for Web
Sam Lee
?
Backbonejs
BackbonejsBackbonejs
Backbonejs
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 min
Sam Lee
?
React native sharing
React native sharingReact native sharing
React native sharing
Sam Lee
?
Trend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding toolTrend Micro Web's Scaffolding tool
Trend Micro Web's Scaffolding tool
Sam Lee
?
What is FED
What is FEDWhat is FED
What is FED
Sam 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_sharing
Sam Lee
?
React Native for Web
React Native for WebReact Native for Web
React Native for Web
Sam Lee
?

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