Comparing the philosophy of the store libraries for react

Transcript

1. Comparing the philosophy of the Store libraries for React @kuwahara_jsri / kkeeth
2. Who am I? const my_info = { Name: ‘܂ݪ੟ਔ’, Position: ‘FE Tech Lead/board’, Skills: ‘PHP, Node.js, TS,’, PokemonGO: ‘TL 40’, }
3. 01 02 Table of Contents Thought Comparison of Store Libraries “Redux”, "Recoil", and "Jotai" Why do we need Store library for front-end development? What kind of library should be chosen in the modern world? 03 Introduction Store Libraries Selection
4. +PVTQFWEVKQP Why do we need Store library for front-end development? 01
5. History of front-end React(UI Lirary), Vue, Svelte, Riot HTML/CSS/JavaScript, Monolithic(templates) SPA/SSR, Client-API Frameworks, Two-way data binding State management, Store/GraphQL now…
6. 5VQTG.KDTCTKGU HQT4GCEV Thought Comparison of Store Libraries "Redux", “Recoil", and “Jotai" 02
7. The clew Redux Recoil Jotai A Predictable State Container for JS Apps A state management library for React Primitive and flexible state management for React
8. … before that Flux 💁
9. Flux architecture
10. Flux architecture Image By: https://azu.github.io/slide/react-meetup/flux.html
11. REDUX A Predictable State Container for JS Apps Site: https://redux.js.org/
12. Redux architecture Image By: https://blog.bitsrc.io/redux-free-state-management-with-jotai-2c8f34a6a4a
13. Redux three principles • Single source of truth • State in read-only • Changes are made with pure functions https://redux.js.org/introduction/three-principles
14. recoil A state management library for React Site: https://recoiljs.org/
15. Recoil three principles • Minimal and Reactish • Data-Flow Graph • Cross-App Observation https://recoiljs.org/docs/introduction/core-concepts
16. Recoil working Image By: https://morioh.com/p/3682bf6e369a
17. Jotai Primitive and flexible state management for React Site: https://redux.js.org/
18. Jotai working Image By: https://blog.bitsrc.io/redux-free-state-management-with-jotai-2c8f34a6a4a
19. Jotai three principles • Primitive: Its basic interface is pretty much like useState • Flexible:Derived atoms can combine other atoms and also allow useReducer style with side effects https://redux.js.org/introduction/three-principles
20. 5GNGEVKQP What kind of library should be chosen in the modern world? 03
21. There are many ways to think about selection
22. Comparison of Downloads
23. Comparison of size Room Task link redux 1.6kb https://bundlephobia.com/result?p=redux react-redux 5k https://bundlephobia.com/result?p=react-redux recoil 19.7kb https://bundlephobia.com/result?p=recoil jotai 2.5kb https://bundlephobia.com/result?p=jotai
24. Facebook say WE use React hooks 📣
25. Select the best Store Partner for each project to have a good development experience 😆
26. CREDITS: This presentation template was created by Slidesgo, including icons by Flaticon, infographics & images by Freepik credits https://slidesgo.com/theme/impostors- among-crewmates#search-amoung+us
27. Thanks!