Just use Bootstrap and axios library for making API requests to your REST API endpoints. You can find lots of free/paid templates and themes for Bootstrap.
Ask HN: What's is your go to toolset for simple front end development?
181–190 of 295 posts
Re: Ask HN: What's is your go to toolset for simple front end development?
#182Earlier quoted context omitted.
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…
How do you deal with more complex/dynamic forms? As someone who learnt frontend mostly in React I've always struggled wrapping my head around how you would do that with server-side rendering. For example: 1) selecting a checkbox alters other fields in the form 2) validation that needs to hit the backend and then present warnings/errors to user 3) field arrays -> sending back a list of fields
LiveView can handle that pretty well, you can setup a click or validation handler for your live view / component. It then hits the handler function on the backend and you can have the component updated in place. Since it only sends the diffs down it's pretty efficient on the round trip, at least not something to worry about compared to the hundreds of api calls most SPA's will make.
So the flow is 1) click the checkbox 2) call sent across the open socket 3) backend does it's logic to figure out what it needs to do 4) backend returns the small diff of changes 5) frontend alters dom.
Re: Ask HN: What's is your go to toolset for simple front end development?
#183the irony of this thread is beautiful.
Re: Ask HN: What's is your go to toolset for simple front end development?
#184Ignore 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…
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/
> a simple front end to which I can attach some new experiments for home brew coding
This thread is about engineers looking for a simple way to just create a UI. Pandering to niche neuroses about privacy by avoiding entirely mainstream technologies such as CDNs is out of scope!
Re: Ask HN: What's is your go to toolset for simple front end development?
#185Definitely agree with other answers that you should look into classless CSS frameworks. You can see a list of popular options here: https://www.designinspiration.info/classless-css-frameworks/
You can get pretty far with just HTML and dropping in any one of those CSS frameworks.
Since you’re using Flask, I would just make some endpoints that serve HTML using Jinja2 templates. Depending on what you’re doing, you might not need JavaScript at all. You can trigger backend stuff using HTML forms with form actions. And with a classless CSS library, the form should look nice too.
If for some reason you want to keep the front end totally separate from the back end, a good framework for building web apps is Remix: https://remix.run/ . It makes it easy to build highly performant websites and has nice helpers for data loading and actions. I also like that it keeps client side JavaScript to a minimum, which keeps things simple and makes your website faster.
Re: Ask HN: What's is your go to toolset for simple front end development?
#186Ignore 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…
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.
Can I ask a concrete question: say someone wants to render a table with data coming via an Ajax call to a JSON API. How should they do that with the tools you're suggesting? Use the native JS DOM API to synthesize table rows? (Just in case tone of voice doesn't come across, if that's the solution great, I'm not implicitly criticizing it in advance).
Re: Ask HN: What's is your go to toolset for simple front end development?
#187I'm doing mosly machine learning/backend. For a PoC I needed a frontend, I choose Flutter web. The tooling works great and is unlikely to change everything week like in the JS world.
Dart is easy to learn and hasn't as many footguns as JS.
Re: Ask HN: What's is your go to toolset for simple front end development?
#188Earlier quoted context omitted.
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,…
failure of their mentors? To an early point, but beyond that everyone who considers themselves a professional needs to sit down with a book or three and understand stuff. 'mentors' is a small excuse IMO.
Re: Ask HN: What's is your go to toolset for simple front end development?
#189Ignore 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…
To be fair though, unless you use only backend frameworks plus CSS and JS for simple client only things, this will be the case.
Any sort of reaching out to the server from JS will be disabled.
Re: Ask HN: What's is your go to toolset for simple front end development?
#190Earlier quoted context omitted.
I don't consider Svelte a simple toolset because it can't be published statically
Unless I'm misunderstanding you, Svelte can absolutely be published statically. If you leverage SvelteKit and the SSR it offers, then yes you need to deploy a server, but regular Svelte builds a statically deployable bundle just like React, Vue, or any other big UI lib/framework
I think they meant that svelte cannot be used without a build step.
The fact that builds dont need a second build is nice to know, even if useless.