React State - The Good, the Bad and the Ugly - ArmadaJS

Transcript

1. REACT STATE The Good, the Bad and the Ugly
2. Ivan Jovanovic https://ivanjov.com @ivanjov96 IJ Consulting https://jsremotely.com
3. Ivan: Hey man, how's life? Bob: All good! You need to see this cool project we are working on! Ivan: Awesome, what is it about? Bob: It's great, we are using this awesome stack with React, Mobx, Graphql running on AWS Lambda Ivan: Sounds interesting. What is project about? Bob: Ah right, we are building a blog for a real estate company.
4. REAL ESTATE BLOG?
6. WHAT IS WRONG HERE?
9. WHAT DO WE SEE HERE? • Text • Pictures • Links • Input fields • Buttons
10. WHAT IS DIFFERENT?
11. STATE
12. State: the particular condition that something is in at a specific time. Dictionary.com
13. STATE TYPES • Application State (also known as Program State) represents the totality of everything necessary to keep your application running • Resource State refers to the state of the resources being stored on the server. These can be files, images, database records, etc. • Session State keeps track of user interaction during a browser session
14. TECHCRUNCH DISRUPT SAN FRANCISCO - SEPTEMBER 2012. Mark Zuckerberg: "Our Biggest Mistake Was Betting Too Much On HTML5".
15. REACT GETS OPEN SOURCED - MAY 2013. Jordan Walke introduced React at JS ConfUS.
16. REVOLUTION STARTED
17. 2014. FIRST REACT CONF
18. FIRST COMPANIES THAT USED REACT
19. BETTER USER INTERFACES
20. HISTORY OF REACT STATE
21. HISTORY OF REACT STATE • Component State • Flux • Redux • GraphQL (Relay) • MobX • React 16 - Context API / React Hooks
22. COMPONENT STATE
25. COMPONENT STATE PROS • Comes with React • Every component has it out of the box • Easy to use • Easy to learn
26. COMPONENT STATE CONS • Hard to exchange state between components • Hard to update state from another component • Complicate to maintain when app becomes big
27. FLUX
29. FLUX PROS • Simple data flow • Unidirectional data flow • Easily handling data across components • Components listen to the store and react on changes
30. FLUX CONS • Mutable state • Multiple stores • Multiple sources of truth • Boilerplate
31. REDUX
34. REDUX PROS • Simple data flow • Unidirectional data flow • Easily handling data across components • Components listen to the store and react on changes • One store • Immutable store • No dispatcher
35. REDUX CONS • Boilerplate • There is always a middleware...
36. GRAPHQL
38. RELAY
41. RELAY PROS • Made for data-driven applications • Simple data flow • Descriptive components • Solves client-server data flow
42. RELAY CONS • Learning • A lot of magic in the background
43. MOBX
45. MOBX PROS • Reactive programming, everything is a stream (observable) • Store can do anything • No boilerplate • No middlewares
46. MOBX CONS • No specific standard, anyone can use anything, too much freedom • Reactive programming is hard • Sometimes is really hard to debug
47. REACT 16
48. CONTEXT API
51. REACT HOOKS
53. CONCLUSION • Pick wisely, based on the size of the project and previous knowledge • Popular doesn't always mean the best • Learn the basics (how does setState work) • Combine (if needed) • Every new package for handling state was built to fix something. But, can we have a perfect package for state?
54. Thank you! Blog ivanjov.com Twitter @ivanjov96