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

[anakaine]

I'm quite firmly in back end development. Often times I find myself wanting to have a simple front end to which I can attach some new experiments for home brew coding such as Flask.

I'd not mind if my front end looked a little bit nice, but don't want to spend forever learning, hand coding, and trouble shooting html, css, JavaScript.

What's in your toolkit for some simple front end drag and drop style block building that gives you enough of a template to get started? I've seen the odd one posted on HN over the years, but never had the foresight to save one.

Given its home lab style stuff I don't really want to dive into the likes of Webflow, Canva, etc.

[toastercat]

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 <link> tag in your HTML document. If you'd like to try something similar to this "Tailwind" hotness everyone keeps talking about, try Basscss[2]. Again, no tooling, just need a <link> tag.

Once you start needing to add interactivity to your site, htmx[3] is nice and decently simple. If you really want something React-like, Mithril.js[4] is very similar but much simpler.

[1] https://www.cssbed.com/

[2] https://basscss.com/

[3] https://htmx.org/

[4] https://mithril.js.org/

[egeozcan]

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 the top here: https://htmx.org/docs/. Meanwhile Alpine is read much easier, and has half the amount of attributes (15): https://alpinejs.dev/. Also look at the interactive component example from React: https://reactjs.org/tutorial/tutorial.html#making-an-interac.... It looks easier if you don't hate JS.

Of course, I respect that some avoid JS with passion, but I don't buy that it's simpler. It's juss less javascript-y.

[polydevil]

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

> Why should only <a> and <form> 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.

[nwsm]

Ignore any recommendation telling you to blanket ignore technologies without reason

[h4kor]

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

[rmbyrro]

Best recommendations.

Just one thing: do a favor for your visitor's privacy and don't use a CDN, download the css/js packages and host them yourself.

> An easy way to try out Mithril.js is to include it from a CDN and follow this tutorial. [1]

[1] https://mithril.js.org/

[tarsinge]

While Mithril is interesting unless you are resume-building I'd avoid anything React-like until you are a small team and just go Vanilla JS with events, it can go a long way if you are a solo dev, especially if you have a backend experience and can write clear and simple code.

[hoistbypetard]

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

[freedomben]

> Ignore any recommendation of React, TypeScript, Vite, or Tailwind.

I mostly agree with the first three (with caveats about how interactive/app like you want to the result to be), but I totally disagree about Tailwind, the only exception being if all you want to do is throw up some <p>s and <hx> tags and have it look better than the default.

If you're going to do much layout at all, you're gonna need CSS. If you already need CSS, Tailwind isn't much more. It's basically just css properties expressed as classes in your html. If you know the CSS already, the Tailwind equivalent is in most cases guessable. If you don't know the CSS you need yet, you'll mostly have to learn it anyway unless you can copy/paste somebody's existing layout and have it be good enough for you. And again, once you know the CSS you need, the equivalent tailwind is easy. The benefit of Tailwind is that it puts markers/boundaries over the raw CSS that are easier to reason about, and having it right in the html (IMHO) makes it a lot simpler to work with.

You've mentioned in other 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.

I agree with what you've said, but again excepting Tailwind. A "compiled" version of TW can be used (very easily) from CDN[1] so there's no need to mess with npm or cli tools.

[1]: https://tailwindcss.com/docs/installation/play-cdn

[garfieldnate]

I looked through all the available styles from cssbed and quite a few did not have any styling for links that have already been clicked on. This seems weird to me. Why would you get rid of this styling? Sure, purple sticks out, but it's useful information when navigating a webpage (particularly when I'm trying to click every link in the list of styles to see what they all look like!).

[ArtWomb]

Great thread all around! Have been hearing raves about "htmx" and finally clicked the above link. Chagrined to find the tight DOM element coupling is done via data-set string attributes. Mapping to data store keys. Kind of the inevitable no-framework pattern I just assumed everyone was implementing ;)

[willswire]

I recently stood up my own website[1] and decided to write my own CSS, HTML, and JS in VS Code with the Live Server extension. It was exactly what I needed! It’s as if we’ve already been given all the tools we need for a nice, simple website.

[1] https://willswire.com/

[freeopinion]

Ignore advice that doesn't give a rationale. <-- Like that

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.

[jonnycat]

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/phoenixframework/phoenix_live_view [1] https://github.com/dbohdan/liveviews

[dhucerbin]

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.

[bluehatbrit]

I'm in the same camp, I've slowly "regressed" backwards from overcomplicated SPA's back to server side rendering. When LiveView hit and I was already using Phoenix it was just perfect. It's a slight embelishment on top of multi-page server rendered pages which gives all the benefits I need and nothing more.

If I _really_ need something to be driven by the frontend like a transition then I'll use Alpine.js.

For CSS I tend to use tailwindcss / tailwindui because I know it well and it doens't need npm. If I didn't know tailwind I'd probably look at something like bootstrap or something I can build on top of with vanilla css.

[graboid]

This is really cool and makes me want to learn Elixir.

Staying in one language for frontend and backend is just so appealing. To my knowledge, the other option to achieve that would be having something like Blazor WASM or Rust Yew that compiles to WebAssembly to have a client-side app a la React/Vue/Svelte.

I wonder which of these approaches will end up be more prevalent in the future. To me it seems like compiling something React-like to WASM might be more attractive, because you can stay in your backend language, but ditch the permanent websocket connection.

[sam0x17]

It's very cool. I'm actually working on a web framework called Bolts in the Rust ecosystem that will offer LiveView-like functionality, born from my hatred of modern js frameworks.

[anonyfox]

After having learned & used all the major frontend frameworks (starting from jquery, backbone, ... react, svelte) I am now firmly in the camp of LiveView. No more "REST APIs"/fetch calls, SSR by default, no javascript alltogether, very simple programming model once you "get" it.

[heeton]

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.

[anakaine]

A single logical app sounds great. There is great freedom and power in simplicity for small concerns.

[dusted]

I just read that you didn't want to troubleshoot html, css and js, so my goto toolkit for simple UIs might not fit your bill, but hear me out :)

At work, when I do internal tools, they are usually well received. They also pass just below the threshold of having their looks be judged. They're not ugly, because they're almost not there.

Very plain HTML: HEAD+TITLE, H1, H2, UL, OL, A, IMG, INPUT, BR, TABLE, P Javascript as needed, usually embedded in the HEAD There is no CSS.

There's simply no design to attack, no colors or alignments to disagree with. It exposes the interface to communicate with the backend, nothing more.

It's also the fastest and simplest way of getting stuff done, if you don't need to expose it to "end users".

[WorldMaker]

There's a ton of very simple "minimalist" or "classless" or "markdown" [0] CSS files that you can apply to plain HTML to get modest good looks versus browser default styles these days. No changes to your markup, just use that raw HTML you are already comfortable with and LINK tag in a single CSS file.

This seems like a very good list with lots of handy easy to compare preview screenshots: https://github.com/dbohdan/classless-css

[0] From that idea that sometimes you just want to take a Markdown document's boring raw HTML output straight out of the processor without any other templating in between.

[vonadz]

I recently took a similar approach for a couple of simple websites (https://abyteofcoding.com/survey/ and https://crosspromote.io), and found that surprisingly people don't really care that much. It's still very annoying to deal with responsive stuff (changing design based on screen size) though.

[gonzo41]

I do this for internal science stuff at my work. The scientists love it. Simple and fast.

[gherkinnn]

It would only take a tiny amount CSS to make it usable.

The examples by vonadz are minimal to the point of being a chore to use.

[iso1631]

Bang on. We have internal tools like that and they just work - something which dumps a list of switches and information for example, trivial to find what's plugged in etc. The interface doesn't get in the way. Dynamic pages are a matter of "print" stuck in the middle of the php.

We also have internal tools based on gigabytes of react across millions of files, we have data fields in there you can't actually highlight and copy the label from that require 3 days efforts to add a tiny feature. But it probably looks nice.

[tecoholic]

I pretty much do this as well. The only thing I do different is, when I need to present it to someone, I will drop in a minimalist css library like PureCSS or Milligram.

[_ZeD_]

this

[juicypt]

Man, given all the comments suggesting frameworks that will require you to do html/css/js it seems like no one has really read your post.

For your use case I would look at AppSmith (https://github.com/appsmithorg/appsmith) or ToolJet (https://github.com/ToolJet/ToolJet).

These are full-stack low-code frameworks, but it's easy to use them to do just the frontend and connect to a backend API you implement yourself separately.

Edit: forgot to mention that these support drag&drop for building user interfaces :)

[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.

[graboid]

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 that you want drag & drop style UI building, so this might not be for you.

[vivegi]

I started off like you on the backend development. When I had to build small webapps, I looked at the various frameworks and then settled on KnockoutJS. KnockoutJS is a very small and simple JS library. This is several years ago and at that time I didn't even know Javascript. The reason I say that is because even for a JS newbie, the KnockoutJS library was simple to use. (I read somewhere that MS Azure used KnockoutJS for their frontend dashboards in their earlier version. Not sure if they still do.)

If you are comfortable with plain HTML + CSS + Javascript, adding KnockoutJS will give you a minimal app building capability that you will find useful for several usecases.

You get to manage your application's data model in javascript on the client side and the UI can be bound to your datamodel (bidirectionally) without having to manage it yourself. That is more than sufficient for many usecases.

If you don't want to be fiddling around with CSS too much, you can use something like Bootstrap or Material Design's CSS templates to get some decent looking UI (without getting lost in CSS minutiae).

For your development workflow, start without any bundler (like WebPack or Parcel) first. Once, you have your application working, you can then introduce it as a final step.

[ttiurani]

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 management, if that's ever a need. With vite under the hood the dev experience is lightning fast.

[pc86]

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?

[DarkCrusader2]

I use AlpineJS for reactivity. Along with JS Template literals[1], I can reach quite close to the ergonomics of having react like re-usable functional components without bringing in the whole complexity of react ecosystem. Works quite well for smallish projects.

For styling I pick up Bulma CSS if I need some more complex components (tabs, modals etc.) or TailWind if I just want to pepper a little styling here and there. All this loaded directly from CDN. No build step, no server etc required. You easily do debugging from browser console.

I have made a few internal tools like this which my co workers use everyday.

[1] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

[eterps]

Not drag and drop style block building, but:

1. https://htmx.org

2. https://simplecss.org

[y-c-o-m-b]

I've been doing this for so long that I've gained years of experience in React, Angular, and Vue. You said simple front-end development and there's nothing easier than Vue, hands down. The syntax is so easy and segregated perfectly; no JSX wild-west ugliness or fucking with a minefield of observable and subscriber pipe functions. It's easy to get started, encourages clean code, and very readable. It boggles my mind how there's so few VueJS jobs available despite the advantage. I think part of it is just developer laziness in picking up yet another library, which I totally understand. Unfortunately I'm stuck in React and Angular land 90% of the time and hate it.

[davidkuennen]

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/

[shantnutiwari]

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"

[rk06]

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

[domlebo70]

I totally agree. This is a super stack. The productivity it enables is insane. I like to use Chakra instead of Tailwind, but same principle.

[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.

[purerandomness]

* Bootstrap 5 for CSS and customized styling: https://getbootstrap.com/

* HTMX (formerly "Intercooler") for interactive (Ajax) functionality: https://htmx.org/

[laumars]

How simple are we talking about when you say "simple frontend development"?

For simple personal projects I write all my own HTML and CSS from scratch. It's not particularly hard to write stuff with low to moderate interactivity from scratch and the infrequency that I do frontend dev means it's quicker to do that than learn whatever new framework has replaced the deprecated one I spent time learning a couple of years earlier (that's probably unfairly snarky but from an outsider looking in, it's hugely daunting and depressing when you see just how much churn there is).

The only problem with rolling your own is that you raise the difficulty for anyone new joining the project (if it's something you plan on opening up to other contributors) and CSS can be a bit a of trial and error to get right too.

However if you're just writing a few test UIs to interface with backend APIs you're POCing (which is what your question reads as) then it's probably easier to skip all the other frameworks out there and knock up something yourself.

[theptip]

For home-lab/internal UIs, you can go a long way with the auto-generated model-admin pages from Django. If you just need CRUD and actions triggered on a list of models, you can typically avoid any UI work and just define a few Admin classes, and if you need to make custom forms it's quite easy using Django's templating machinery to override individual pages.

https://docs.djangoproject.com/en/4.0/ref/contrib/admin/

A similar modular admin system that's more generic is https://www.forestadmin.com/, I think this one has a layout editor too. But that one requires a REST API and so it may require more plumbing, depending on what you've already built. Or it could fit nicely on top of what you already have, if you already have APIs for everything.

[sydd]

React with create-react-app [0] and Netlify for deployment, github as git repo. This way you can have a hello world app that has a full CI pipeline in ~30 mins.

[0] https://reactjs.org/docs/create-a-new-react-app.html#create-...

[mattront]

Take a look at Pinegrow [0] (I'm the author). It is a desktop app that lets you visually work with standard HTML & CSS files and supports frameworks such as Bootstrap, Tailwind CSS or just plain old CSS. There are also more advanced features, for example live SASS compilation, components, interactions and even exporting WordPress themes and blocks.

[0] https://pinegrow.com

[Jaruzel]

One single piece of CSS instantly improves the look of plain html pages:

  body {font-family:sans-serif;}

Beyond that, all other CSS is optional imho.

And you don't need JavaScript to trigger back-end events, as a simple <A> link will work just as nicely.

[plaguepilled]

Please look at Svelte.

It achieves straightforward abstractions and great speed by not having a virtual DOM.

The syntax is also very pleasant.