It’s too bad most UI libraries ate tied to a particular framework like React, Tailwind, etc. instead of self-contained web component elements.
replies(3):
With custom elements you can just drop `<my-dropdown>` in your server template and that's where the dropdown widget will be.
Something like Shoelace[1] would be very nice to use with Rails.
All the reasons are here: https://dev.to/stuffbreaker/web-components-and-ssr-2024-edit...
There's a form builder and library of components (built and maintained by me) which, between them, provide full coverage. Most new Rails services use them.
It's a good match because accessibility is one of the Design Systems' primary concerns so JavaScript is used very sparingly and only to enhance.
They're not official, only Nunjucks is supported by the Design System team.
https://design-system.service.gov.uk/
I worked with our UX team at a mixed tech company (Rails, React, mobile) who defined the patterns and tokens, and then my team implemented so that we could use across our stack.
Largely this was accomplished via ensuring the design system could be used via CSS and we settled on Bootstrap with custom theme. This made it easy enough to use across Rails views/view components and React components.
Bootstrap is not sexy to devs now but you could do same with Tailwind and Daisy UI with custom theme.
With that said, component libraries are really helpful, but I prefer to align them with the design system and not the other way around.
https://csszero.lazaronixon.com/lookbook/pages/overview
which bills itself as an "opinionated front-end starter kit" specifically for Rails and includes Stimulus.js code for JavaScript functionality.
It seems the benefits are that it is no build (pure CSS with CSS variables) and easy to modify and extend.
Everyone seems to have their own opinion on what something like this should and should be or do. Nitro Kit is my opinion and I'm getting a lot of joy from using it on my own sites and services.
It's free and open source and, full disclaimer, there's a paid premium offering too.
Here's a video about my reasoning behind building it:
One of the things most frequently ignored on the comparison chart is the fact that there's a massive ecosystem of free and paid Bootstrap themes which can massively shortcut development.
There's so much bikeshedding and yak shaving when it comes to this topic. Folks spending their time considering options that also won't be Cool in two years instead of actually building The Thing.
Awesome work and hope your gov't sees the value of this work and oss work in general!
Right now I’m trying to build a tool that produces an intermediate representation of your UI components, which can then be transpiled into whatever target format you prefer.
That way we can build design systems that aren’t coupled to a specific downstream tech stack.
There's nothing very special in sending a html tag and then attaching functionality to it with javascript when it's loaded in the browser.
At least custom elements can just be including in framework-specific templates and be included in the rendered output, even if not deeply server-rendered.
It's actually very difficult to do this correctly and at scale with a framework like React, because in React you need an ID and JS call to initialize each embedded component, when custom elements initialize themselves.
Anyway, you have an axe to grind, so have fun with that. I'll see you next time I make a positive comment about web components I guess.
Bootstrap (like Tailwind and others) has a configuration for generating the full component class and styles from a few variables, so updates to fonts, colors, spacing, etc were easy to manage and roll out to wide usage incrementally.
- all SSRed custom components are framework/library specific and cannot be rendered outside of javascript runtimes
- you need a JS call to initialize each custom component (though this is likely provided by the bundled JS)
- since when providing an id in a server-rendered HTML become an insurmountable challenge?
- and they have many additional issues. Example in the sibling comment: https://news.ycombinator.com/item?id=43641081
> Anyway, you have an axe to grind,
I don't have an axe to grind. I correct the magical wishful thinking that exists around custom components