Hacker News Reader

Comment by rzzzt | Hacker News Reader

An incomplete sampling of the projects/frameworks/libraries mentioned in the article:

  - create-react-app
  - React
  - Vite
  - Webpack
  - esbuild
  - TypeScript
  - ESLint
  - Vue
  - Remix
  - Next.js
  - OpenNext
  - Astro
  - Gatsby
  - Parcel
  - Turborepo
  - React Native
  - Expo
  - Tauri
  - Electron
  - SvelteKit

View on HN

I'm a non-programmer, and recently I've been trying to turn a bunch of various time-saving scripts I've created over the years into a vaguely cohesive GUI. I figured aiming for a modern web gui framework (run locally) would be the way to go.

This comment encapsulates the experience so, so well. I have no idea what is going on, everyone tends to have a very strong opinion on which way to go, but no one can provide an explanation of the baby steps in how to get started. Or even why to get started. It's maddening.

From that list you only need React and a bundler, which can be Vite. You really don't need more than that to get started. Please ask, I'll do my best to help you out.

What do you need for keeping CSS scoped to React components?

Solution 1: You can give a classname to your component and prefix every CSS rule with this classname. e.g. <CustomSelect>, which translates to <div className="custom-select">, which you can style by prefixing every rule with .custom-select. You put that in the index.css inside your folder CustomSelect to be easily editable when you need it.

Solution 2: Otherwise you could try to use CSS modules (Vite supports them out-of-the-box I think).

Solution 3: Otherwise you could try one of the many "CSS-in-JS" libraries like styled-components.

Personally I'm using the solution 1, did for more than a decade, works fine, scales well, nothing to install and learn, just old straightforward CSS.

In practice, I find keeping your CSS separate from the JSX tends to be cleanest (your solution 1).

Separation of concerns with what are essentially totally different markup languages is best when you can. We tolerate it with JSX because there isn't a fantastic first-class declarative way to express an object, a list of objects, or filtering in HTML. (I have seen WebComponents and the MDN tutorial seemed like taking a step back.)

styled-components

Personally I suck at CSS and avoid writing it like the plague, even after 20+ years of doing it.

I use TailwindCSS [1] for all my styling needs and couldn't be happier.

If you really want scoped CSS in React this approach [2] can also work, and it makes it easy to use tailwind if you want.

[1] https://tailwindcss.com

[2] https://miyauchi.dev/posts/lib-vite-tailwindcss/#css-modules

If you are non-programmer, then you need to stay away from whatever bleeding edge tech HN and Reddit raves about.

Instead pick a stable tech. In js framework land, no tech is stable. But relatively speaking, react, Vue and Angular are more stable and popular. Among these Vue is more newbie friendly than others.

So, I would start with Vue. Checkout laracasts course on vue 3 to get started.

I'm not particularly fond of Vue for my own use but pretty much every trade-off it makes that annoys -me- is one that also makes things easier to get started with.

So since the person we're making suggestions to is (so far as I'm aware, and I'm pretty sure I remembered my dried frog pills today) very definitely -not- me, I think I agree entirely with Vue as a starting point.

I've stopped chasing front-end and fullstack roles and I know happily bang out PHP, because of this mess. PHP, think of the irony.

Did you find the salary trade off worth it though? PHP devs earn much less than others

Depends where you are and the company's industry.

I think this would be more useful as a tree structure than as a list.

Eg. Why would I need to care about electron and react native for a web app?

I dove into the article expecting some advice on "How to start a React Project in 2023", got a compendium of the JS/TS framework landscape instead.

It comes close, but it isn't mentioning Turbopack [0], the thing I'm using right now to replace webpack. Really happy with it so far. (Turborepo is a sister project, but I'm not sure how the two are related - if Turborepo depends on Turbopack or vice-versa - and in any case I don't need it)

[0] https://turbo.build/pack

Perfectly called out. I think we have gone from “how to build a,b,c, will React help” to “I am building a,b,c in React. What all do I need” a long time ago and that’s been a perpetual source of pain. Cart before the horse all the way.

The article does a pretty good job of telling you which ones you need to care about and which ones you don't need to care about. And it's only 4-5 of these for a given project, which would look something like:

- TypeScript (langauge) - React (framework) - Vite (build tooling) - ESLint (linter)

That's not really any different to any other language. Maybe you have one extra tool in there for the build step.

What‘s your point?

It's ridiculous.

Can you name another industry in tech that doesn't have a lot of options? Lets try backend, database, infra, ML, data science.

I feel there is a difference between all the domains you mention and frontend in that once you have made your choice regarding a single vendor or technology, very few vastly different avenues are left for starting a project. One example:

1) "How to start a Java project" - very vague, the article will arrive at your doorstep in book form as there are tons of possible ways depending on the use case

2) "How to start a REST API backend in Java" - a handful of bigger contenders are left on the table; some feature and performance comparisons could be handy

3) "How to start a REST API backend using Spring Boot" - a focused set of steps that leaves you with a controller class that will happily greet the user when a GET request is sent towards its general direction. I don't really want to explore the possibility of creating an application using NetBeans Platform or whatever at this point.

Here the casual reader might think that we are at level 3, but it seems that it's closer to level 1.

Once you choose any of those frameworks listed that support it, creating a REST api is trivial and very well documented within many. Likewise, they almost all prescribe recommended solutions for many other things.

That we have a wealth of good solutions is amazing, and it feels like people will find anything to complain about. If we had just a couple it’s lock-in or bad ecosystem. When you have a lot it’s messy and stupid.

It feels like a communist Russian coming to a US grocery store in the 80s and concluding it’s ridiculous they have too many choices how can they ever decide what to eat.

As a mostly backend java developer and occasional frontend developer: every spring boot backend looks mostly the same, but every react frontend seems to look and work completely different. Sure, maybe there's a different library for db access or messaging or whatever used on the backend, but the general patterns are the same. Since React doesn't have any of the other pieces required for an app built in everyone glues together a hodgepodge to solve the same problems.

I don't know Java well but I think you're comparing different things. Compare Next.js with Spring for example.

Reply on news.ycombinator.com