I Hated React too Soon, Reconciled with It Quickly Afterwards

NDC London 2017 (London, UK)

Transcript

1. I Hated React too Soon, Reconciled with It Quickly Afterwards Tugberk Ugurlu Software Engineer @ Redgate @tourismgeek http://tugberkugurlu.com https://flic.kr/p/cQRAYC
2. https://flic.kr/p/e6nUW Aim of the Talk
3. https://flic.kr/p/t3H9A Once upon a time…
4. https://flic.kr/p/cEJMpW
5. https://flic.kr/p/faTRHU
6. https://flic.kr/p/7yqhJt JSX!
7. https://flic.kr/p/6sZ7Kp
8. https://twitter.com/tourismgeek/status/637380542191796224
9. https://twitter.com/tourismgeek/status/637380542191796224
11. https://flic.kr/p/6doME6
14. TODO: WHY! https://flic.kr/p/9yaos5
15. 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
16. https://twitter.com/thomasfuchs/status/708675139253174273
17. React is Simple “React applications start complex but maintenance complexity of React applications doesn’t grow much as your applications grow
18. Its declarative and predictable nature High level of transferable knowledge Learn once, write everywhere
19. React shines with Redux
20. What is Redux? “Redux is a state management library for JavaScript applications, inspired by Flux and Elm.
21. What is Redux? (in human English) “Kind of like event sourcing and pub/sub, with a fancier name.
22. The Problem
23. Redux Store
24. The Meat of Redux Actions Reducers Store
25. The Meat of Redux Actions Actions describe updates
26. The Meat of Redux Reducers Reducers apply updates based on actions
27. The Meat of Redux Store Store is where everything comes together and it acts as the source of truth for the application state
28. Simple Example: Counter
29. React Usage (Manual Way)
30. Usage with React
31. The Whole Idea Data Down Actions Up http://www.samselikoff.com/blog/data-down-actions-up/
32. The Whole Idea You have one state, one state only for your entire application! https://flic.kr/p/9QQHW
33. The Whole Idea You never mutate the state! https://flic.kr/p/pzf72v
34. But why Redux and not flux, mobx, marty? https://flic.kr/p/NzcYg
35. It boils down to scientific reasons https://flic.kr/p/byrtr Well... NO!
36. Widely Adopted
37. Widely Adopted
38. Rich Docs and Resources http://redux.js.org/
39. Rich Ecosystem https://www.npmjs.com/search?q=redux
40. Rich Ecosystem http://redux-form.com/6.0.0-rc.5
41. Boost on Happiness with React and Redux https://flic.kr/p/99iZtS
42. https://twitter.com/dan_abramov/status/780475600716857344
43. https://github.com/facebook/react-devtools React Developer Tools
44. Redux Developer Tools https://github.com/gaearon/redux-devtools https://github.com/zalmoxisus/redux-devtools-extension
45. Redux Logger npm install redux-logger https://github.com/evgenyrodionov/redux-logger
46. Redux Immutable State Checker npm install redux-immutable-state-invariant https://github.com/leoasis/redux-immutable-state-invariant
47. Redux Undo npm install redux-undo https://github.com/omnidan/redux-undo
48. https://github.com/joshwcomeau/redux-vcr Redux VCR
49. https://twitter.com/tourismgeek/status/767629396916178947
50. https://egghead.io/courses/getting-started-with-redux Some Resources
51. https://egghead.io/courses/building-react-applications-with-idiomatic-redux Some Resources
52. 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
53. 99% Boost on Dev Happiness npm install redux-logger https://github.com/evgenyrodionov/redux-logger https://twitter.com/tourismgeek/status/637380542191796224
54. Redux Internals: It’s Freakin Tiny!