I Hated React too Soon, Reconciled with It Quickly Afterwards

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

10. None

11. https://flic.kr/p/6doME6

12. None
13. None

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!