Web awesome: "Shoelace 3.0" open source web components

https://backers.webawesome.com

by webcompawe • 1 year ago

50 18 1 year ago

backers.webawesome.com

I've been experimenting with HTMX + Shoelace for the last few months. I'm really rooting for Shoelace/Web Awesome to thrive! Especially since Material Web seemed to quickly end up in maintenance mode, I'm hoping Web Awesome becomes the MUI of web components

krikou• 1 year ago

And it is built with https://lit.dev a fantastic library !

since Material Web seemed to quickly end up in maintenance mode

This is really unfortunate to say the least - the engineering team has done a fantastic job there, but apparently no backing from Google despite the nice promise at the the launch of Material Web.

aitchnyu• 1 year ago

Polymer used to be Google's flagship for web components. Did a non-Google project take on that role?

deoxykev• 1 year ago

HTMX and shoelace is an awesome combo. Super fast to prototype things and tweak as needed. Being able to copy paste snippets and directly inject data in a straightforward way is a nice way of working. It limits cognitive overhead so you can focus on the domain logic rather than fight javascript dependencies.

zmz88• 1 year ago

I've been curious why frontend tools/projects are so often monetized and commercial but backend tools rarely are. Why is that? Since frontend is more art than science?

re-thc• 1 year ago

but backend tools rarely are

Backend tools are backed by enterprises more than frontend tools. Frontend more often than not these enterprises build their own to some extent.

cobertos• 1 year ago

Possible factors:

* Composes better than backend does. Frontend software mostly has to "look" right. It can be dropped in. Going the extra mile to integrate is not always necessary (e.g. keyboard navigation, screen reader support, all the stuff that is "easy" to forget).

* Easier to sell in this niche. The overlap between design/creative and software. Designers already have tons of libraries like this. E.g., FontAwesome, Noun Project, font libraries, stock images. They're already looking for new libraries of resources.

* There's also a common language all frontend software has to be written in, and there's a lot of tools for interop if need be. The market is just larger.

Backend software just doesn't compose as well. People expect when they pay for something for it to fit X use case or they leave. Backend has so many more use cases/entry points to get to MVP. It usually works or it doesn't. Perhaps why of the things monetized in the backend (databases, proprietary web servers), most are big monoliths and exist at well-defined software boundaries where things must be serialized to the "wire" to communicate.

ics• 1 year ago

Asking this to gauge sentiment or become better informed, not because I believe it outright...

Could it be that people with more backend-oriented skills are better compensated, or have better market-job-security, than those with frontend-oriented skills on average with respect to regular employment or contracts? If it were so then the usefulness and/or marketability of a project might matter less to respective creators in how to offer their work to the public.

Jankily expressed as backend can afford to produce more for fun and/or street cred, frontend wants both but feels pressure to demonstrate value on top.

bdcravens• 1 year ago

Backend integrates with the company; frontend integrates with the customer, with some glue in-between.

You have complete control over the backend, whereas the frontend needs to work with software you have no control over (browser and related extensions, and whatever custom settings the user has applied)

For most companies, the development ROI on the backend is higher, and it's easier to just buy as much of the frontend as possible.

eob• 1 year ago

Let's presume this gets developed to ShadCN/Tailwind level quality.

In that world, what would be the tradeoffs between:

- NextJs + Tailwind + ShadCN

- NextJS + ?? + Shoelace

I don't have a good sense of how web components compare to practice of "copy-by-value, then compile-into-binary" UI shipping that's common in the Next + Shad world these days.

throwaway7783• 1 year ago

I think this is more useful for HTMX + AlpineJS based model of development. ShadCN et al are tied to a frontend framework (react/vue/svelte etc). But with shoelace/daisyUI etc, one gets the same level of polish out-of-the-box for HTMX etc

crowcroft• 1 year ago

I have found Web Components are a really good way to create small 'apps' (like calculators) that can be shared and embedded across multiple different websites.

Being native JS and self encapsulating is very powerful in that kind of use case.

Hard to see web components really competing with Vue/React for large apps still, but love to see development in this space.

judah2• 1 year ago

We use Shoelace for apps.microsoft.com. Very happy with it.

Looking forward to WebAwesome!

DANmode• 1 year ago

That is a very attractive page.

I know the stuff loading from elsewhere will be slow, but the About page content seems to be pretty lazily lazy-loading.

Is this 100% by design? Pagespeed scores and such?

Thanks for sharing.

judah2• 1 year ago

We adopted a principle early on: don't load stuff until it's needed. This makes our initial page loads fast, it is less taxing on end users' machines, it uses less bandwidth. It also helps our performance scores, which in turn help our SEO.

So yeah, a lot of lazy loading. :-) There are probably some pages where we could ease up on that.

mrozbarry• 1 year ago

On the installation page:

As a Web Awesome backer, this early alpha release is just for you. Please refrain from sharing it for the time being!

winter__mute• 1 year ago

It should be a nice fit for Rails projects also.

Web awesome: "Shoelace 3.0" open source web components

Related Stories