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

101–110 of 295 posts

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

#101

Post by pc86 »

ttiurani wrote: post #60

Sveltekit with typescript and adapter-static. Sveltekit scales down very well: if you need only CSS and HTML for some paths, that's all you write in your svelte files, and that's also all users download. At the same time if for some other paths you need more Javascript, you can just add it there, without bloating the JS bundle size. Svelte's built-in stores makes it also possible to also do very complex state managem…

I'm not familiar with svelte[kit]; if half your files need a lot of JS, do you have to choose between manually adding it to all those files or adding it to all files including the ones that don't need it?

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

#102

Post by vallavaraiyan »

shantnutiwari wrote: post #24
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/

OP mentioned they are backend developers-- and you are asking them to do a whole frontend setup? Your answer is a bit like "Oh just recompile the Linux kernel if you want feature X, its so easy LOL"

Bad analogy. It's more akin to installing postgres and rails for backend development, which is not an unfair ask.

They can write plain HTML and some barebone css, and thats ok. That'll be similar to asking a backend dev to ftp some php file to a shared host.

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

#103

Post by doctor_eval »

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, unfocussed way, it will have a bunch of bugs and caveats, and it will be a bit of a mess. And don’t even get me started on browser engine differences.

Better to pick one of the lightweight frameworks (like Vue, which is super simple to integrate into plain html/css), and save yourself some pain.

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

#105

Post by wcarss »

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…

Came here to say preact is pretty nice and the no build pipeline thing is wonderful.

I needed to make a little thing "with a few screens" once, and using a react-like model of rendering specific components based on state just felt right. But I really didn't want to get all the CLI and front end packages involved because it was such a small thing -- and preact was exactly the ticket!

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

#106

Post by h4kor »

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…

https://picocss.com/ is another option for a "classless" CSS

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

#107

Post by gwbas1c »

> I'm quite firmly in back end development.

What languages / platforms are you familiar with?

For example, if you do a lot of C#, you could look at Blazor. Server-side Blazor isn't 100% simple; but if you're already doing C#, it's very easy to learn. (In-browser Blazor compilers C# to WASM, Server-side Blazor sends all mouse clicks over a websocket and gets back partial HTML updates. It (server-side) has a bit of latency, but because all state is in the server, you can keep your implementation simple.)

There's also a similar thing for Java, but I can't remember the name at the moment.

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

#108

Post by ihateolives »

azangru wrote: post #88
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…

I used Lit for web components, with no build steps. I loaded it from unpkg [0]; but there are probably more production-ready CDNs in existence. It worked pretty well, especially since CSS styles can also be encapsulated inside of the shadow DOM of the components. But for proper frontend projects, I would use typescript, and therefore a build pipeline. https://www.unpkg.com/browse/lit@2.2.7/index.js

I'm thinking of trying ts + deno at some point since deno has built-in ts support.

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

#109

Post by hoistbypetard »

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 haven't given CSSBed or basscss a good try yet, but I do like tailwind enough to find it worth a build system. It doesn't require NPM/Node if you don't already use that; it has a standalone cli now[1].

HTMX has been a joy to work with.

[1] https://tailwindcss.com/blog/standalone-cli

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

#110

Post by dbrueck »

https://svelte.dev/tutorial/basics - easy to get started with but really powerful for complex stuff too

For layout, don't use any CSS framework, but instead refer to https://css-tricks.com/snippets/css/a-guide-to-flexbox/ often - every time I use some big CSS framework I end up fighting it at some point.

https://vitejs.dev/ for packaging - I got really grumpy when frontend stuff started needing build and packaging tools, but it's the nature of things so you just have to deal with it, and vite is fast, not overly complicated, and supports fast hot reloading.

Post reply on HN