Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Comparing the philosophy of the store libraries for react

Comparing the philosophy of the store libraries for react

3135a28c51dfa27396bb525e9972db95?s=128

kkeeth

May 19, 2021
Tweet

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!