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

171–180 of 295 posts

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

#171

Post by egeozcan »

toastercat wrote: post #143
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…

Unfortunately, "easier" does not always equal "simpler". Next.js/CRA is "easier" because it hides a lot of the complexity away from you. In my opinion, ignoring how it all works under the hood and just blindly accepting tools/clis because "it works" sets you up for confusion down the road. I've met several JS developers who don't know that JSX gets transformed to JavaScript function calls after a build step -- they j…

> I've met several JS developers who don't know that JSX gets transformed to JavaScript function calls after a build step -- they just assume it's part of how browsers work at this point. And that is mindblowing to me.

I believe you, and I've also met some like you described who came to our interviews indeed, but it's more like the failure of their mentors. I've also met back-end engineers, with a lot of experience, who couldn't write a simple HTTP service with C#, without using ASP.NET, nor open a simple DB connection without using EntityFramework APIs.

Understanding what's going on will be even harder if it's not your main field (back-end developer just trying to get front-end out of the way) and some magic there won't cause a lot of problems IMHO.

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

#173

Post by dhucerbin »

jonnycat wrote: post #30

If you need any kind of interactivity on the frontend, but are more comfortable with the backend, I would suggest looking at Phoenix LiveView [0] or a similar server-rendered HTML technology for your language of your choice [1]. In short, these solutions take JavaScript out of the mix entirely and basically let you deal with a single logical "app", rather than a separate frontend & backend. [0] https://github.com/pho…

I've been involved in two projects that use LiveView and both of them have similar path.

First, engineers build application using just LiveView and it works just fine. You click a link you have table with your data, you click button you have filtered table, click another link you see a chart.

But then UX concerns are raised from PO/PM/users. Users find it jarring that they need to wait a little to see a loading spinner on clicked button. And we litter our views with some alpine.js DSL in attributes or load stimulus controllers. Some stuff is moved to hooks and kept in ad-hoc global variables.

Finally, most of the live views evolve into single html node, with mini-SPA written in some lightweight javascript framework. And everything is wired with phoenix websocket.

LiveView is still a fantastic and very productive tool to quickly create applications but I'm not sure if it scales to users expectations.

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

#174

Post by horsawlarway »

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

Yeah... I'm about as far to the other side of this as you can get.

It really looks like the x-html attribute you're complaining about is just using plain old javascript. It takes a statement that resolves to a string, and renders that.

The statement they provided happens to be pretty terrible for docs (I would have just used the built in fetch api, instead of the axios networking library - https://github.com/axios/axios), but it's plain old js regardless.

Your example is some custom fucking DSL that I have NO idea what it's doing. When does it run? how does it handle errors? What is the base url? What happens to the original text? How does it auth? What if I needed to post, or put, or delete? It's an entire fucking language I have to learn on top of the actual css/html/js knowledge required to understand this. In almost all cases, you're better off just learning "plain old javascript" since that skillset travels with you everywhere.

basically: DO NOT MAKE ME LEARN YOUR FUCKING DSL. It's wasted time and effort for me, and learning it provides absolutely zero benefits outside of your library. Further - it will fucking leak, and then you're right back at writing plain old js again, but now you have to understand the intimate details of the library implementing the dsl to tweak the right spots.

Even alpine turns me off a bit here (it's still a dsl, even if most of it reverts to plain old js) - but at least they're incredibly up front about the total time investment to learn the dsl (15 attrs, 6 props, 2 methods). HTMX is like 5 times the size (https://htmx.org/reference/), so I assume roughly 20 times the effort to learn the DSL.

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

#176

Post by Tade0 »

rmbyrro wrote: post #117
Tade0 wrote: post #112

Check out: https://docs.lowdefy.com/introduction You need Node.js installed so that you have npx, but otherwise you just write your UI in yaml, because why the hell not?

Took a few seconds to load a purely text-based page on my browser, with several roundtrip requests. I don't think this is a good toolset in terms of simplicity...

Development is simple. What happens next is another story altogether.

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

#177

Post by worker_person »

heeton wrote: post #62
jonnycat wrote: post #30

If you need any kind of interactivity on the frontend, but are more comfortable with the backend, I would suggest looking at Phoenix LiveView [0] or a similar server-rendered HTML technology for your language of your choice [1]. In short, these solutions take JavaScript out of the mix entirely and basically let you deal with a single logical "app", rather than a separate frontend & backend. [0] https://github.com/pho…

Seconding this. I've been using LiveView in production for ~18 months now, on a couple of projects. Hugely simplifies the overall stack. Combine with TailwindCSS, TailwindUI.com, and you have some very powerful tooling at a low development cost.

How stable is it?

I've been screwed over twice by Angular, RXJS, etc. Every month we had to redo most of our work as the community kept deciding on new directions of correctness.

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

#179

Post by freeopinion »

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 advice that doesn't give a rationale. Don't be afraid of Tailwind. It does not require NPM/Node. Utility CSS can be very helpful. If it works for you, tailwindcss is a great tool. By all means, give Basscss, etc a look as well.

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

#180

Post by eterps »

polydevil wrote: post #168
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…

HTMX relies solely on client-side behavior, but it definitely supports falling back on server-side behavior:

https://htmx.org/docs/#boosting

> Why even bother to use it? HTML is not perfect, but it is well tested, can work without js [...]

I agree completely. Still you can use HTMX for some cases where you would need client-side JS anyway, but without actually having to write .js code.

> which may lead your company to be sued

OP specifically said 'Given its home lab style stuff', I think HTMX would be a good fit for that.

Post reply on HN