Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Ask HN: What's is your go to toolset for simple front end development?

news.ycombinator.com

Post reply on HN
Print view View original

161–170 of 295 posts

Re: Ask HN: What's is your go to toolset for simple front end development?

#161

Post by meitros »

egeozcan wrote: post #130
toastercat wrote: post #90

Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node. Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to…

I've been using htmx since the intercooler days, but I'm of the opinion that just using Next.js and treating React like simple HTML is much easier for starters. Or Alpine, but not htmx. Learning all those attributes (30, not counting the HTML headers and the JS API and the CSS classes, and events like htmx:historyCacheMissError) is not as simple as some in HN make it out to be. Just look at the most basic example in…

I wrote an internal tools framework on top of htmx with a desire to make things easier for backend contributors, but ran into exactly this problem - even htmx isn't quite simple. What I would have likely done next is try to create jinja abstractions around htmx

Re: Ask HN: What's is your go to toolset for simple front end development?

#163

Post by bambax »

revskill wrote: post #131

React.js is the gateway drug for you to dig into frontend development. I myself mastered it in 2 weeks as a backend engineer. There's no simple way, there's only the first step. Good luck.

What tutorial would you recommend to learn React fast, for someone who already knows JS well?

Re: Ask HN: What's is your go to toolset for simple front end development?

#164

Post by egeozcan »

eproxus wrote: post #149
egeozcan wrote: post #130

Earlier quoted context omitted.

I've been using htmx since the intercooler days, but I'm of the opinion that just using Next.js and treating React like simple HTML is much easier for starters. Or Alpine, but not htmx. Learning all those attributes (30, not counting the HTML headers and the JS API and the CSS classes, and events like htmx:historyCacheMissError) is not as simple as some in HN make it out to be. Just look at the most basic example in…

As a non-js developer I found Alpine lacking. In the examples they use something like await axios get to get new content. I have no idea what any of those mean or why they have to there in that order with that syntax. HTMX makes this incredibly simple: Get Some HTML

What does "hx-get" do? Does it replace the HTML from that url? Why is it on a div, does it happen on load or does it wait for an event? It's a study on its own:

https://htmx.org/reference/

Oh, apparently I can put hx-trigger="mouseup mousemove delay:500ms" there to make it explicit. I mean this thing has its own DSL, and IMHO, you are escaping from JS and jumping to another language, which you still have to learn and less people know of.

In alpine, it's explicit. You can say fetch, then replace something in your data, and use that thing in your x-html. You still need to learn some, but in my experience, much less to keep in mind than htmx.

OTOH, Next.js is even easier than Alpine to learn. You just create pages as js files and run the server. Yes, you need to run a BFF (back-end for front-end) but it's just that. The thing even updates in real-time. Only thing that can match this is Phoenix LiveView but I can't speak for it as I've just played with it and nothing more.

Re: Ask HN: What's is your go to toolset for simple front end development?

#165

Post by nwsm »

toastercat wrote: post #90

Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node. Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to…

Ignore any recommendation telling you to blanket ignore technologies without reason

Re: Ask HN: What's is your go to toolset for simple front end development?

#166

Post by rk06 »

davidkuennen wrote: post #5

Honestly? React [0], Tailwind [1] and Vite [2]. Using Vite so setup the environment and tailwind components for css I have never been able to create front end faster than now. It feels like a super power. [0] https://reactjs.org/ [1] https://tailwindcss.com/ [2] https://vitejs.dev/

React is one tool that a primary backend developer should stay away from.

Reasons being:

1. React uses jsx,css-in-js and other non standard solutions. Adding additional learning effort

2. React hooks require manual dependency tracking which can lead to error. Literally every other js framework has dependency tracking built in. Vue had it since day 1

3. React has minimal api, and leaves a lot to third party ecosystem. So, not only you need to Google a lot more. But these best tools change frequently.

4. React be default recommends CRA which is slow. While vite (which is excellent) does support react, some of react libraries do not work properly due to ESM and JS issues which webpack ignores.

5. You are not trying to be FE expert, so react's major pro (good on resume) is not relevant

Re: Ask HN: What's is your go to toolset for simple front end development?

#167

Post by revskill »

bambax wrote: post #163
revskill wrote: post #131

React.js is the gateway drug for you to dig into frontend development. I myself mastered it in 2 weeks as a backend engineer. There's no simple way, there's only the first step. Good luck.

What tutorial would you recommend to learn React fast, for someone who already knows JS well?

Read the Thinking in React.js article in reactj.org. Understand the why first before jumping right in the code.

Re: Ask HN: What's is your go to toolset for simple front end development?

#168

Post by polydevil »

toastercat wrote: post #90

Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node. Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to…

Do you really suggest https://htmx.org/? That thing has bold questions, like

> Why should only and be able to make HTTP requests?

And than you turn off your js in the browser and try to open a demo from the htmx. White screen of death. It doesnt even work without js. Why even bother to use it? HTML is not perfect, but it is well tested, can work without js, also works with screenreader and you can create accessible web apps. With htmx you can create something usable to some degree, but completely inaccessible, which may lead your company to be sued.

Re: Ask HN: What's is your go to toolset for simple front end development?

#170

Post by da39a3ee »

nwsm wrote: post #165
toastercat wrote: post #90

Ignore any recommendation of React, TypeScript, Vite, or Tailwind. Here are some recommendations that don't require NPM/Node. Pick a "classless" CSS library from a site like CSSBed[1]. These are kind of like Bootstrap, except you don't need to write any CSS or apply any CSS classes in your HTML for them to work. No tooling necessary; just include a tag in your HTML document. If you'd like to try something similar to…

Ignore any recommendation telling you to blanket ignore technologies without reason

The reason is to avoid npm/node. And that's absolutely right -- I'm a backend engineer, and I've done Vue projects with npm, and npm is fantastic -- the quality and care that has gone into it is obvious; even the screen output is beautiful (compared e.g. to the mess that JVM developers make, who think of a shell as some weird thing that someone might need to use if their IDE is broken).

However. For the OP's question, a toolset for quick and easy frontend development for a backend engineer who doesn't spend much time doing front end, avoiding npm is definitely the way forwards. It introduces a HUGE amount of complexity to a project who's aim was simply: produce some HTML and CSS with the necessary javascript to make the UI work. If your typescript compiler or Vue/React transpiler or bundler isn't working quite right, it is completely non-obvious to a backend engineer who isn't familiar with npm what to change in package.json to fix it, or even how to go about debugging it.

Post reply on HN