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
I Hated React too Soon, Reconciled with It Quickly Afterwards
Search
Tugberk Ugurlu
January 20, 2017
Programming
0
46
I Hated React too Soon, Reconciled with It Quickly Afterwards
NDC London 2017 (London, UK)
Tugberk Ugurlu
January 20, 2017
Tweet
Share
More Decks by Tugberk Ugurlu
See All by Tugberk Ugurlu
Redis Cluster for Write Intensive Workloads
tourismgeek
1
8.6k
Designing Towards Event Sourcing
tourismgeek
1
8.3k
Essentials for Building and Leading Highly Effective Development Teams
tourismgeek
0
460
Let the Uncertainty be Your Friend: Finding Your Path in a Wiggly Road
tourismgeek
0
430
Benefits of Managed Kubernetes in Azure (Azure Container Service, AKS)
tourismgeek
0
470
Levelling up to Become a Technical Lead
tourismgeek
2
28k
Benefits of Managed Kubernetes in Azure (Azure Container Service, AKS)
tourismgeek
0
180
GraphQL
tourismgeek
0
200
ASP.NET MVC 5 vs ASP.net Web API 2 vs ASP.NET Core MVC 1
tourismgeek
1
1.1k
Other Decks in Programming
See All in Programming
【KMC春合宿2024】実装視点で見るNeural Radiance Fields
runningoutrate
0
150
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
PHPアプリケーションのスケーラビリティと 信頼性を革新する nginx+ngx_mrubyとGoの融合
pyama86
2
240
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
マイクロサービスがほしいと思ったときに本当に必要だったもの〜なぜ人は共通基盤の夢を見るのか〜 / why microservice
77web
5
980
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
Laravel標準バリデーションでできること
hmb_ok
2
360
CSRF対策のやり方、そろそろアップデートしませんか / Update your knowledge of CSRF protection
hiro_y
25
13k
両面どころかインフラもTSでできるよ ~ 全方位TypeScriptによるプロダクト開発 ~
myfinder
7
2.1k
チームでモデリングを育てるうえで 考えたこと・気づいたこと / Cultivating Modeling in Teams: Thoughts and Insights
mackey0225
5
1.7k
Featured
See All Featured
Learning to Love Humans: Emotional Interface Design
aarron
266
39k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
12
1.4k
How to train your dragon (web standard)
notwaldorf
71
5.1k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Making the Leap to Tech Lead
cromwellryan
122
8.4k
Designing Experiences People Love
moore
135
23k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
4 Signs Your Business is Dying
shpigford
174
21k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
272
12k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
355
22k
Done Done
chrislema
178
15k
Transcript
I Hated React too Soon, Reconciled with It Quickly Afterwards
Tugberk Ugurlu Software Engineer @ Redgate @tourismgeek http://tugberkugurlu.com https://flic.kr/p/cQRAYC
https://flic.kr/p/e6nUW Aim of the Talk
https://flic.kr/p/t3H9A Once upon a time…
https://flic.kr/p/cEJMpW
https://flic.kr/p/faTRHU
https://flic.kr/p/7yqhJt JSX!
https://flic.kr/p/6sZ7Kp
https://twitter.com/tourismgeek/status/637380542191796224
https://twitter.com/tourismgeek/status/637380542191796224
None
https://flic.kr/p/6doME6
None
None
TODO: WHY! https://flic.kr/p/9yaos5
React is Simple Give it an input, get an output
React does one thing and it does it well It has a small public API surface area
https://twitter.com/thomasfuchs/status/708675139253174273
React is Simple “React applications start complex but maintenance complexity
of React applications doesn’t grow much as your applications grow
Its declarative and predictable nature High level of transferable knowledge
Learn once, write everywhere
React shines with Redux
What is Redux? “Redux is a state management library for
JavaScript applications, inspired by Flux and Elm.
What is Redux? (in human English) “Kind of like event
sourcing and pub/sub, with a fancier name.
The Problem
Redux Store
The Meat of Redux Actions Reducers Store
The Meat of Redux Actions Actions describe updates
The Meat of Redux Reducers Reducers apply updates based on
actions
The Meat of Redux Store Store is where everything comes
together and it acts as the source of truth for the application state
Simple Example: Counter
React Usage (Manual Way)
Usage with React
The Whole Idea Data Down Actions Up http://www.samselikoff.com/blog/data-down-actions-up/
The Whole Idea You have one state, one state only
for your entire application! https://flic.kr/p/9QQHW
The Whole Idea You never mutate the state! https://flic.kr/p/pzf72v
But why Redux and not flux, mobx, marty? https://flic.kr/p/NzcYg
It boils down to scientific reasons https://flic.kr/p/byrtr Well... NO!
Widely Adopted
Widely Adopted
Rich Docs and Resources http://redux.js.org/
Rich Ecosystem https://www.npmjs.com/search?q=redux
Rich Ecosystem http://redux-form.com/6.0.0-rc.5
Boost on Happiness with React and Redux https://flic.kr/p/99iZtS
https://twitter.com/dan_abramov/status/780475600716857344
https://github.com/facebook/react-devtools React Developer Tools
Redux Developer Tools https://github.com/gaearon/redux-devtools https://github.com/zalmoxisus/redux-devtools-extension
Redux Logger npm install redux-logger https://github.com/evgenyrodionov/redux-logger
Redux Immutable State Checker npm install redux-immutable-state-invariant https://github.com/leoasis/redux-immutable-state-invariant
Redux Undo npm install redux-undo https://github.com/omnidan/redux-undo
https://github.com/joshwcomeau/redux-vcr Redux VCR
https://twitter.com/tourismgeek/status/767629396916178947
https://egghead.io/courses/getting-started-with-redux Some Resources
https://egghead.io/courses/building-react-applications-with-idiomatic-redux Some Resources
Some Resources • My Blog Post on React: http://bit.ly/2jwicka •
React Docs: https://facebook.github.io/react/docs/hello-world.html • Redux Docs: http://redux.js.org • The Redux Journey at react-europe 2016: http://bit.ly/2bJEZEP • Redux Usage with React: http://bit.ly/2bdAiVO • Presentational and Container Components: http://bit.ly/2bM3DpO • (Pluralsight Course) Building Applications with React and Redux in ES6: http://bit.ly/2bRAQ4T • Thinking in React: https://facebook.github.io/react/docs/thinking-in-react.html • React Reconciliation: https://facebook.github.io/react/docs/reconciliation.html • Influencers of Redux: https://github.com/reactjs/redux#influences • Why did you reinvented Event Sourcing?: https://github.com/gaearon/ama/issues/110
99% Boost on Dev Happiness npm install redux-logger https://github.com/evgenyrodionov/redux-logger https://twitter.com/tourismgeek/status/637380542191796224
Redux Internals: It’s Freakin Tiny!