Refactoring for separation of concerns

[jinmayamashita]

This PR is Experiments and proposals for the separation of concerns.
If you are running a boilerplate which you want to run on localhost, use yarn dev

What I did:

Separation of states

I think data separation should be made between UI state and server state data because their characteristics differ greatly.

I tried RTK Query and React Query both of which take over cache management. #19
They are basically the same approach, also RTK Query don't need to depend on redux.

• RTK Query API request cache sample
• React Query API request cache sample

But React Query seems it more intuitive than RTK Query with just a few lines of code.

https://github.com/monstar-lab-oss/reactjs-boilerplate/blob/7172283a977cbc390e343c01c7e72b0d78cf7c37/src/pages/Profile.tsx#L15-L16

UI state

However, RTK Query/React Query is not a replacement for local/client state.
Thus, we can make two options for the UI state. (like modal isOpen state)

• use existing state management libraries (e.g. Redux, MobX, Zustand)
• we just need global split context for the preventing re-renders.

I recommand using global state because the share of UI state and the code needed to manage it is very small for most applications. Also, we can prevent preventing re-renders with like a constate.

• optimize global state with constate
• not optimize state re-renders

☝🏼 Check the console to see if it's re-rendered.

Modular and scalable components

I understand there is not much point in talking about reusability when there is zero or one client for a given component.
#3 (reply in thread)

But let's rethink this from a component-driven perspective with Storybook.

It can be used locally, or deployed automatically so designers, PMs, clients and other stakeholders can access it.
https://monstarlab-jp.atlassian.net/wiki/spaces/CD/pages/372899912/Storybook by @yannde

Benefits of using Storybook with component-driven develop:

• Looking it up in an explorer is a much easier way for a colleague to review a new or changed component
• UI testing should be quick and easy. Pinpoint bugs down to the detail by testing at the component level. It’s less work and more precise than testing screens.
• Storybook erases this problem by giving designers and developers an interpreter that makes communication easier.

And that’s why we'll want to factor out smaller components where possible, following the principle of separation of concerns.

https://github.com/monstar-lab-oss/reactjs-boilerplate/blob/e8b699a755ab6bedfb20c7348e9720fd71dfb8a0/src/components/atoms/Button.test.tsx#L3-L14

Separation of concern with hooks

Components can be made more testable by making sure that the hooks that manage the business logic are passed as props. (e.g useAuth)

https://github.com/monstar-lab-oss/reactjs-boilerplate/blob/dc955878a8c77eddab73c7e6b249659f3078796b/src/components/molecules/Header.tsx#L5-L11

https://github.com/monstar-lab-oss/reactjs-boilerplate/blob/dc955878a8c77eddab73c7e6b249659f3078796b/src/components/molecules/Header.stories.tsx#L15-L22

More Experiments:

• Localization: react-i18next
• Router: Wouter
  • Zero dependency, only 1.36 KB gzipped
• React Hooks for form state management
• Migrating a CRA to Vite
  • Vite is 10–20 times faster than CRA
• Mock responses for the tests by msw
  • we can reuse these exact same server handlers in development
• Use react context for the user auth logic

TODO

• RestrictAccess

[jinmayamashita]

Trying out a counter with redo/undo functionality in zustand.
re-render appears to be prevented 👀

Kapture.2022-03-02.at.11.35.28.mp4

[yukinoda]

left some small comments :)

[jinmayamashita]

@yukinoda Thanks for your review! I have committed some of your suggestions! 🙏🏼

[yukinoda]

I will leave the rest of the review to the one assigned in the weekly meeting.
Great to see that the boilerplate OSS is active! Thanks for your contribution!!

[jinmayamashita]

@n-igarashi @yukinoda
FYI @mvn-luanvu-hn @yannde @mvn-binhnguyen-hn @don-wang

It was decided to merge this PR at the weekly meeting 🚀 Thanks for the review!