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

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

#191

Post by lewantmontreal » Thu, Jul 07, 2022, 4:35 PM UTC

dhucerbin wrote: post #173

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 spinn…

Thanks for writing up your experience. I’ve been wondering how well liveview works when interacting with the page with variable latency. I tried to search some sites made with liveview in the past, but couldnt find any apart from some official examples.

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

#192

Post by toastercat » Thu, Jul 07, 2022, 4:36 PM UTC

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

Point taken; I admit I wrote that as a sort of frustration and reaction to the abundance of comments telling a newb at front-end developer to just take the deep dive and start installing a bunch of NPM packages / CLI tools. In my opinion, those tools hide amazing layers of complexity that become a problem as soon as you need to eject. I think any beginner at front-end development should realistically start by getting used to the bread 'n butter of HTML/CSS/Vanilla JS, things the browser already understands. Only once you start feeling the limitation of those tools should you start including libraries, and then maybe a package manager and view layer.

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

#193

Post by harryvederci » Thu, Jul 07, 2022, 4:36 PM UTC

horsawlarway wrote: post #174

eproxus wrote: post #149

Earlier quoted context omitted.

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/ax…

Maybe that's enough internet for you today? No one is "fucking" making you do anything. Pick the tooling you like, ignore the ones you don't like.

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

#194

Post by [deleted] » Thu, Jul 07, 2022, 4:38 PM UTC

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

[deleted]

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

#195

Post by typon » Thu, Jul 07, 2022, 4:40 PM UTC

5350-uiop-1130 wrote: post #183

the irony of this thread is beautiful.

I don't think that's irony. Just shows you that the state of web-dev has not settled to a global minimum. Lots of local minima that different people prefer for different reasons.

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

#196

Post by harryvederci » Thu, Jul 07, 2022, 4:41 PM UTC

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 is a javascript library, I don't really see why you'd think it should work after turning off javascript in the browser.

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

#197

Post by toastercat » Thu, Jul 07, 2022, 4:42 PM UTC

freeopinion wrote: post #179

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.

Point taken. As mentioned in another comment, I wrote that in reaction to the comments telling a front-end newb to start installing a bunch of NPM packages and CLI tools.

I don't think OP should be "afraid" of Tailwind, but for someone new to front-end development, I would not recommend you install a CLI tool or some funky CDN script just to style your HTML. Basscss is a good alternative since it's small and ships as a single plain CSS file.

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

#198

Post by hestefisk » Thu, Jul 07, 2022, 4:44 PM UTC

doctor_eval wrote: post #103

hestefisk wrote: post #100

HTML, plain CSS, vanilla JavaScript to fetch data / interactivity when required. mod_perl / PostgreSQL on the back end. HTML::Mason for templates.

IMO, the problem with vanilla JS on anything other than trivial pages is you end up having to implement a bunch of common patterns (such as interpolation and form binding) and before long you’ve got what is effectively a private framework that you’ve kludged together in an ad hoc way while simultaneously trying not to be distracted from solving your actual problem. But because it’s come about in this organic, unfocus…

I prefer my own mess over someone else’s mess :)

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

#199

Post by rk06 » Thu, Jul 07, 2022, 4:51 PM UTC

anakaine wrote: post #55

graboid wrote: post #44

Preact [0] + htm [1] Why? Preact is small, fast, and reasonably easy to use. But the main selling point for me was that, together with htm, I don't need any build system a la webpack. No node_modules folder. I just have to load one script (preact + htm bundled), define my components in plain javascript files and import them. Bliss for me. [0] https://preactjs.com/ [1] https://github.com/developit/htm Edit: Just read…

The drag and drop is more a rapid build tool than anything else. I'm, frankly, not likely to put all the love an effort in to the front end that I will the back end for small projects. No build pipeline is very helpful, actually.

if you really don't want a build pipeline, then in js land your options are limited to alpine and vue. there may be more, but these two are more popular ones

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

#200

Post by magicink81 » Thu, Jul 07, 2022, 4:59 PM UTC

I've been using Next.js for years to deploy static sites deployed to Github pages as well as experiments. It is quite simple and keeps my code organized.