$30 off During Our Annual Pro Sale. View Details »

I Hated React too Soon, Reconciled with It Quickly Afterwards

I Hated React too Soon, Reconciled with It Quickly Afterwards

NDC London 2017 (London, UK)

Tugberk Ugurlu

January 20, 2017

More Decks by Tugberk Ugurlu

Other Decks in Programming


  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

  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!