151–160 of 295 posts
I use vuejs with create-vue for scaffolding. And then, google my way through. Vue is easier to learn and uses html, css and js. So I feel right at home. Forms are particularly easier and vue dev tools help a lot in debugging. Also, last year, I used it for an app after a break of 3+ years. I was still able to re-use a lot of prior knowledge (even if it was half forgotten). There was new syntax(comp api) and typescrip…
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.
Bootswatch is also great if you want a little more styling. (Free bootstrap themes)
Bootstrap is great because it is so ubiquitous. They have page templates you can copy to get the page layout you want and then there are tons of bootstrap examples you can just copy and paste.
It was a mind-numbing exercise I wouldn't recommend. There are a lot of strong tools out there, but they're often billed as 'general-purpose' when they're most certainly not.
For my project in question I ended up getting frustrated with either issues with SSR-rendered stylesheets or runtime access to browser API's and so on so I just wrote a simple server with Express that just renders static pages using EJS as a view engine.
I keep my client in the same source folder, with a different config for the build that drops the artifact in the public.
Since I personally like TypeScript over not using it, there was some build setup—but just `tsc` for the server code and `parcel` for the client code.
There's little configuration, and I had it up and running with hot reloading of both the server and client code in no time—made me regret my decision to audit so many other options.
TDLR:
The client code I decided to stick with "vanilla" JS via TypeScript using parcel to build and bundle deps.
The CSS is just css, but I might replace that with SASS because it can be a touch easier to organize and namespace things.
FWIW, if I didn't want the TypeScript or dependency bundling (via NPM for fetching the code to host locally), it would be just JS and CSS with server-rendered HTML... if I need something fancy I have the option of plugging in a framework or something later. Starting light feels so good...
Earlier quoted context omitted.
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"
It’s really not a huge hurdle. You have to install a few tools. If you’re a backend developer, this shouldn’t be too challenging. And what you get in return is: Tailwind: CSS done right, in my opinion. If you haven’t tried it, it’s amazing. It’s a no brainer if you’re not great at CSS (which a self-proclaimed backend developer would not be). React or Preact: it’s much better than cobbling together strings of HTML or…
In my eyes, it's important to find a technology stack that can scale both up and down in what it does - something that would be good enough for you to ship both production ready software with a bit more effort, as well as knock together a proof of concept in a weekend. Something that's good enough to be used in a team of people who have general experience in the industry (be it full-stack work or front-end in particular), as well as use on your own.
Why? Because the time I have for learning technologies and ironing out all the quirks in any particular setup is limited, it's far easier to make a few template repositories and a few customized component libraries of your own (which may just be renamed Bootstrap integration with a few additional personal touches and quality of life improvements) that you can throw in a new project and start working with it ASAP, not just work with 5 different stacks in 10 different projects, needing to constantly context switch.
Coincidentally, that's also one of the many reasons why most of my apps use containers as their runtimes (standardization regardless of orchestrator) and I don't scoff at boring languages like Java that let you use them as a hammer to beat in those pesky screws in their place.
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…
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.
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…
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.
https://tailwindui.com/ - lots of pre-made templates using tailwind css. Some are free, but the more advanced ones require payment.