thinknimble/tn-spa-bootstrapper

React Client improvements

Closed this issue · 7 comments

lakardion commented

Proposed

  • Upgrade to react 18
  • Move off of CRA in favor of Vite
  • Update Typescript version
  • Add basic .eslintrc and .prettierrc so that CI can run on this client

Moving to react 18

Unless we're using packages tied to react <18 (we can also upgrade them along with react!) we could definitely upgrade to the 18th version, it's been around for a while and seems stable enough.

Vite instead of CRA

CRA has been great for creating apps when there was no other big alternatives around, but has fallen behind both in performance and configurability compared to newer tools such as Vite.

The challenge in this step is probably set up a couple of things (such as jest, eslint) that CRA brings out of the box while Vite does not

Upgrade TS version

Typescript has just released 4.9 whereas we're using 3.9 in the project, we're a full major behind.

Hopefully this upgrade is seamless since there isn't that much code

lakardion commented

Regarding jest. There is no first-class support for Vite right now, there have been a lot of discussions in github but looks like the best alternative is to use vitest instead

lakardion commented

Chakra issue with vitest

This goes down to vitejs repo issue which is still open (quite recent so expecting a fix anytime)

lakardion commented

Another issue with chakra and the mocking of window global:
chakra-ui/chakra-ui#6664

OkayItsMikael commented

Hey @lakardion , thanks for working on this! I'm still working on getting up to speed with the advantages of using Vite vs. CRA, and any tradeoffs included in that migration. But here are some of my thoughts on the direction I think the React side of the bootstrapper should be headed in:

Rest vs. GraphQL

The power of the bootstrapper is that it can give us flexibility when choosing a tech stack for various client projects, as well as a great developer experience by providing sensible defaults and tooling. We currently have GraphQL set up to work well, so it makes the most sense for us to build on that existing functionality rather than replace it.

Using jest vs. vitest

I think the key here is to set a smooth migration path and decent support for both Vue and React. Both stacks don't need to be exactly the same, but the more we can maximize cross-compatibility, the more flexibility we have when staffing projects due to a lowered learning curve. So whichever direction we go should keep that as a goal. I'll dig more into each framework before giving an opinion on my personal preference.

Chakra vs. Tailwind

We've established as a team that we're going to move toward adopting Tailwind as a CSS framework with an accompanying design system that will allow smoother handoffs between dev and design and quicker implementation time for MVP builds. In light of that, maybe this is a good place to work on adding in Tailwind? That way we can get ahead of any hurdles in that adoption. At the very least, we won't have to worry about the issues with Chakra testing (tbh we haven't done a ton of front end testing anyway). The current version of the bootstrapper still allows us to generate Chakra projects without these issues.

Let me know your thoughts! I'll spend more time reviewing this week and dedicate time to helping out where I can.

lakardion commented

@OKitsMikael Thank you very much for your feedback.

Here are my thoughts:

Regarding Rest vs GraphQL

I totally agree with you here to keep both approaches. The attached PR latest changes removed Gql code due to :

  1. How hard it was to be able to swap one for the other whenever someone were to use the library. You can see my attempt in this commit: (which I ended up reverting). I felt a bit overwhelmed on both the UX and DX results if we added such a bifurcation for gql and rest.
    As of DX: we would have to rename main.gql.tsx or main.rest.tsx to main.tsx to run the app with the corresponding api approach.
    In terms of UX, it would require users to run a script after the bootstrapper finished, to erase all related traces (packages, and file variants) of the picked api approach's counterpart.
  2. I saw the vue app was just Rest so I thought it would fit to have Rest default in both?
    Anyhow the 2nd was just an self-excuse to keep rest only.
    I thought we would probably want a gql and a rest template. Rather than keeping the same template for both? What do you think?.
    Cookie cutter should use the answer from Use GraphQL? (which right now it is only for the server code afaik) and choose either react-rest or react-gql templates

jest vs vitest

To be honest I did not have real issues with this swap (except for the mentioned issue with Chakra). They are both pretty much the same and share most of their apis at least for the base functions (describe, it, expect). So I'm eager to hear from what you gather after checking them out.
Something worth noting is that vite, and vitest come from the Vue community so they most likely will integrate great with Vue.

Chakra - Tailwind

Glad to hear the team is shifting towards using tailwind!.

We worked in a couple of projects already with Pari where we have added tailwind starting off from bootstrapper so I definitely have the code around for this and I can add it to the attached PR

lakardion commented

Oh and about this:

I'm still working on getting up to speed with the advantages of using Vite vs. CRA, and any tradeoffs included in that migration.

If you like some drama here is a PR for React docs asking to change CRA for Vite as the main suggestion for creating new apps

reactjs/react.dev#5487 (comment)

lakardion commented

@OKitsMikael Updated the PR adding back graphql and branching both rest and gql approaches through cookiecutter templating