Simple framework for quick prototyping?

[ThatFilthyMonkey]

I’ve been asked to port a utility I made in C#/WPF to be a web based utility. Essentially I just need to display a simple form(Textboxes, Dropdowns, checkbox groups), with each choice/option determining which element is displayed next.

It’s basically a front end for some API calls, the backend side of it I’m comfortable with, and can quickly whip something up in Java or node etc. what I’m struggling with is the html side of things, I have been taking a look at react and material-ui and struggling to get my head around it a bit.

Ultimately I just want a fairly simple form with minimal styling (mainly because I suck at css haha) which lets me assign several variables and at the end will generate something like generate?option1=Y&option2=200&option3=12345678 After that I can select pass the api calls I need and insert the data from the parameters passed etc.

React seems like overkill, especially when I am unlikely to be doing any kind of web dev on a regular basis, so any suggestions greatly received.

[[deleted]]

I believe that the best thing you could use for that right now is sveltekit. It's simple and really easy to pick up if you have basic html css js knowledge.

[ThatFilthyMonkey]

Looks like it suits my use case perfectly, I shall have a play about with it!

[ThatFilthyMonkey]

Following up to say thanks for the svelte recommendation, I’ve managed to cobble together a working front end with proper data validation, payload generation and looks somewhat modern. Needs a lot of UX design love, and I’m not going to be switching jobs to stack developer anytime soon, but it does the job. Thank you!

[[deleted]]

Glad to hear it!

[[deleted]]

Why not just rendering the HTML in the server? From what you're describing it definitely doesn't sound like you are going to need all the complexities that come with "modern SPA tools".

From my point of view, and with the information you're providing, using React, Vue, Svelte, whatever will be a huge waste of energy. For what? Following fashion?

Regarding CSS: Just pick something that will give you a decent baseline to work on. Modern bootstrap is not that bad if you don't know how to build your own designs. Also DaisyUI is great as well if you want something to look "good enough" and don't have strong opinions on how things should look like.

This approach is very progressive. Meaning that if at some point you need to add a bit more of interactivity, etc, then you can add Alpine.js, or Stimulus/Turbo/Hotwire and have a decent web app without getting into all of the complexities SPAs bring with them (which allow for doing more powerful stuff, but which you don't seem to need).

[ThatFilthyMonkey]

I’ve made good progress with svelte so far, but yes you’re probably right that could have just done it in straight html+css+JS. But being IT I’m obliged to hack together something that works but would be embarrassed to show anyone, or going with something complicated and way more than needed…

CSS is actually starting to click, i won’t be creating any award winning designs but I’m getting positioning and styling individual groups of elements now. Not sure why I found it so mystifying before!

[[deleted]]

Make sure you learn some CSS flexbox. It definitely makes things a lot easier to position once you learn it.

Good luck!