3 ms·

The best experience with frontend JS I've ever had is the following setup: 1. Use npm. Well, I didn't try yarn, probably it doesn't matter. 2. Use vite. It se

The best experience with frontend JS I've ever had is the following setup: 1. Use npm. Well, I didn't try yarn, probably it doesn't matter. 2. Use vite. It sets things up good enough and pulls only 15MB dependencies. Tiny! 3. Use TypeScript. I can't imagine writing untyped code. 4. Use eslint to complement typescript checks. Takes some time to set it up first time. Use default rules, they're good. 5. Use prettier to format code. I use vscode and with corresponding plugins, it just gets out of the way. It's good thing to have and works with minimal setup. 6. Use react. Well, it's pretty much standard nowadays and things are mostly fleshed out. But it's pretty complex so beware of steep learning curve. But once you learn it, it's not going anywhere. At this point I consider react a fundamental knowledge, worth spending time to learn. 7. For state management use react-query (yes, that sounds strange). 8. Use built-in to vite methods to access CSS (I think it's called module CSS). 9. Don't add any more dependencies unless you absolutely feel like it. Don't add CSS frameworks or things like that, just write your CSS by hand. This was the least pain setup I ever had and I consider it to be minimally viable.

SadWebDeveloper 3y ago
> 1. Use npm. Better use pnpm, faster for those that don't have 1 Gbps uplink and live outside the usa. > 3. Use Typescript Better use jsDoc, d.ts files are scary and are really complex, you need a typescript wizard la matt pollock just to tell you are mistakenly trying to concatenate a string and int. > 5. Use prettier yes use prettier but don't forget to configure eslint to work with prettier otherwise you are going to have a bad time. > 6. Use react Use whatever fits your problem but if you are going to really use rect then do it with Next.js, no point in still using CRA/CRACO > 7. state management Avoid using state, try to solve every problem with pure functions, if you must use state then consider redux/react-query > 8 & 9. You should still recommend stylelint, specially if you are going to write css by hand otherwise don't just use tailwind, tailwind is bootstrap with extra batteries (change my mind).
- vbezhenar 3y ago
  > yes use prettier but don't forget to configure eslint to work with prettier otherwise you are going to have a bad time. Can you elaborate? I'm using eslint and prettier with pretty much default settings and never had it conflict with each other. My impression was that they work on different aspects. May be there're some overlapping eslint checks, but they're not enabled by default (or I didn't stumble upon them yet).
  - SadWebDeveloper 3y ago
    Depends a lot on what you are doing but mostly stylelint is the one that make me look on configuring eslint/stylelint for prettier... https://prettier.io/docs/en/integrating-with-linters.html https://prettier.io/docs/en/integrating-with-linters.html
- golergka 3y ago
  > Better use jsDoc, d.ts files are scary and are really complex Why would you use d.ts files and not just... .ts files?
  - SadWebDeveloper 3y ago
    When you want to integrate a javascript module that isn't annotated with types... types in a dynamic language like javascript are complex once you start doing really abstract things like generics the fun of typescript ends, also there is a recent push to abandon typescript mostly fueled by svelte fan base but nevertheless typescript is really complex, easy to shotgun yourself.
    - golergka 3y ago
      The whole point of explicit complexity of Typescript is to prevent you from shotgunning yourself from implicit complexity of Javascript.
      - SadWebDeveloper 3y ago
        And thats why it isn't worth, you are adding complexity to a problem that doesn't need to be complex, jsDoc is the best of both worlds, type safety, zero complexity and it works with typescript (if you still really want to use it). Personally i think typescript isn't going to be around much time on the frontend side, maybe on the backend by some people that still believe in adding another compiler layer to their build time.

SadWebDeveloper 3y ago

> 1. Use npm. Better use pnpm, faster for those that don't have 1 Gbps uplink and live outside the usa. > 3. Use Typescript Better use jsDoc, d.ts files are scary and are really complex, you need a typescript wizard la matt pollock just to tell you are mistakenly trying to concatenate a string and int. > 5. Use prettier yes use prettier but don't forget to configure eslint to work with prettier otherwise you are going to have a bad time. > 6. Use react Use whatever fits your problem but if you are going to really use rect then do it with Next.js, no point in still using CRA/CRACO > 7. state management Avoid using state, try to solve every problem with pure functions, if you must use state then consider redux/react-query > 8 & 9. You should still recommend stylelint, specially if you are going to write css by hand otherwise don't just use tailwind, tailwind is bootstrap with extra batteries (change my mind).

vbezhenar 3y ago
> yes use prettier but don't forget to configure eslint to work with prettier otherwise you are going to have a bad time. Can you elaborate? I'm using eslint and prettier with pretty much default settings and never had it conflict with each other. My impression was that they work on different aspects. May be there're some overlapping eslint checks, but they're not enabled by default (or I didn't stumble upon them yet).
- SadWebDeveloper 3y ago
  Depends a lot on what you are doing but mostly stylelint is the one that make me look on configuring eslint/stylelint for prettier... https://prettier.io/docs/en/integrating-with-linters.html https://prettier.io/docs/en/integrating-with-linters.html
golergka 3y ago
> Better use jsDoc, d.ts files are scary and are really complex Why would you use d.ts files and not just... .ts files?
- SadWebDeveloper 3y ago
  When you want to integrate a javascript module that isn't annotated with types... types in a dynamic language like javascript are complex once you start doing really abstract things like generics the fun of typescript ends, also there is a recent push to abandon typescript mostly fueled by svelte fan base but nevertheless typescript is really complex, easy to shotgun yourself.
  - golergka 3y ago
    The whole point of explicit complexity of Typescript is to prevent you from shotgunning yourself from implicit complexity of Javascript.
    - SadWebDeveloper 3y ago
      And thats why it isn't worth, you are adding complexity to a problem that doesn't need to be complex, jsDoc is the best of both worlds, type safety, zero complexity and it works with typescript (if you still really want to use it). Personally i think typescript isn't going to be around much time on the frontend side, maybe on the backend by some people that still believe in adding another compiler layer to their build time.