As someone whos just built terrible frontends using plain CSS + JS + HTML, what's the currently preferred method for building simple sites that look good? I'm looking for the sweet spot between:
* Gentle learning curve * Powerful * Looks good
I'm currently using Bootstrap because it's what was popular a decade ago the last time I built UIs, but there must have been some advancement since then
Laravel:
Rails:
- https://zestui.com/ (Disclaimer: my project)
Alpine+Tailwind:
- https://sailboatui.com/ (minimal alpine)
WebComponents:
Others:
This allows me to have total control over every aspect of the project, while ensuring top notch performance.
Native web components are also a very powerful tool if you take the time to understand how they work properly.
I looked into updating my setup many times over the years, but the only advancements I feel are concrete seem to come from new native html APIs and CSS capabilities.
For everything else, the introduced convenience does not justify the huge overhead in terms of complexity, performance loss and added fragility.
Like other CSS-Frameworks, this can be used by adding the CDN Links for CSS/JS to the Page, and then using the components/classes. I have tried countless other frameworks, but this one really stood out to me due to the semantic class writing, like class="compact secondary button" (a smaller, secondary theme color (black by default), button)
Of course, good looks are subjective, but I like the look a lot.
I only write amateur apps for personal use (or a small number of people), on good networks etc. So even when I need to say "hello" centered on the screen I would fire up a full app environment.
I do this because I can reuse my knowledge in all situations.
Because I am curious and like to break what I did to the despair of the users, I recently started to use Vue + Vite + TailwindCSS + DaisyUI as a replacement. Again - a single hammer for everything, nail or not nail.
Vue is great, especially with their Composition API (https://vuejs.org/guide/extras/composition-api-faq.html#why-...) and something like Pinia for state management, without the hassles of something like Redux: https://pinia.vuejs.org/
As for components, I really liked the idea behind PrimeVue/PrimeReact/PrimeNG/PrimeFaces (https://www.primefaces.org/) because I'm not aware of any other attempts of creating components that actually work similarly across different frameworks/libraries and it's really good because your skills carry over pretty well if you ever find yourself exploring a slightly different stack.
For what it's worth, the components also work decently (there's a whole list https://primevue.org/autocomplete/) and look okay (with various themes available, https://primevue.org/theming/), plus you can get examples (https://blocks.primevue.org/). Oh yeah, they also have their CSS utilities (a bit like Tailwind, https://primeflex.org/installation) and icons (https://primevue.org/icons).
I actually look forwards to the day where most of these concerns are less of an artisanal craft but rather a set of boring and well known things that just work well for quickly putting together a CRUD or whatever you need.
That said, I also explored VueRequest for handling network requests a bit more easily (https://www.attojs.org/guide/gettingStarted.html) and VueUse for stuff like LocalStorage (https://vueuse.org/guide/) and while it doesn't feel like I'm building a crappy alternative to Vuex and the complexity is reasonably manageable and the usability present, occasionally it all still feels a bit annoying to deal with - reactivity, ways to shuffle around data that I get from the back end, props, various bugs... so it's not all good, but still less complex than some of the things I've seen with React or Angular.
VueRequest also looks nice - I use fetch to get the data but this library avoids the boilerplate.
Thansk for these ideas - I will jump once again in something new :)
I even exchanged the bit of Vue.js functionality with htmx.
And I use a bit of Alpine.js and vanilla JavaScript here and there, but it's very minimal.
No templates yet so the "looking good" part requires CSS skills.