DEV Community

Framework Interoperable Component Libraries Using Lit Web Components.

Tea Reggi on October 08, 2023

TLDR: This post is made to rave about repo I found called json-schema-form-element a lit-based component library for form generation that works wi...
Collapse
 
dannyengelman profile image
Danny Engelman • Edited

In 2006 I bet on jQuery to be the future of the Web

And then the browser vendors implemented things like querySelector IN the Browser...

So what happens when Apple, Mozilla and Microsoft do not implement Google Lit syntax into the Web Component standard?

Those 4 might be working together in the WHATWG; but they are still competitors. And I presume none will let Chromium grab 100% Browser market share (We would all be stuck on AMP now)

In jQuery days there were some 20 alternatives. I have worked at 2 companies where they bet on the wrong horse.. and had to ditch 1/2 million euros.

There are 60+ Alternatives to Lit; have you tried them all?

Collapse
 
0xdonut profile image
Mr F.

I picked up jQuery at the same time. Even though browsers implemented a lot of ideas and JS itself also adopted ideas, there's no doubt jQuery made it much easier to develop sites.

I think Lit is also the winner in the long term because it leverages web components, which are also being built into the browser. Over time you might not need Lit, but everything you've picked up and learnt will still be relevant.

Collapse
 
reggi profile image
Tea Reggi

I'm observing that companies like Adobe and Microsoft are increasingly adopting Lit, which challenges React's dominance. While jQuery remains prevalent, Lit is likely to persist similarly.

According to BuiltWith's Internet technology trends, jQuery powered over 80 million websites in 2022. This is a significant lead compared to the nearly 11 million websites that used React.

The paramount concern is SSR (Server-Side Rendering). Until there's a native web component-to-string browser API that runtimes—and ideally other languages—can utilize, we're in a standstill. I doubt native browsers will prioritize server needs, particularly SSR/SSG. There might always be a need for third-party intervention to bridge this gap.

I'm receptive to any web component libraries or frameworks supporting SSR/SSG or "HTML stringification" (and ideally hydration).

Comparing jQuery to Lit isn't accurate. The web is gravitating towards servers. For evidence, consider what Next.js/Vercel has achieved with React.js. The way forward appears to hinge on a web standard, and currently, web components are our best bet and it's up to libraries like jQuery and Lit to invent what the APIs and interfaces should look like and pave the way for standardization.

Collapse
 
dannyengelman profile image
Danny Engelman • Edited

SSRG isn't something new.
The Internet is on a 15 year cycle favoring Servers versus Clients.
30 years ago I did Gopher, 15 years ago SharePoint

Thread Thread
 
reggi profile image
Tea Reggi

I didn't say it's new I said getting browsers to care about it is.

Thread Thread
 
dannyengelman profile image
Danny Engelman

SSR is a minor issue, has been done for over 30 years, just needs to be implemented.
The WHATWG recently started discussing about Web Component persistence between browser sessions.
That is a biggie.

Collapse
 
reggi profile image
Tea Reggi

Thoughts?

Collapse
 
elad_cohen_366d4c6bb6f506 profile image
Elad Cohen

Tomas well done !!

Collapse
 
juliancataldo profile image
Julian Cataldo • Edited

Thanks for your kind words @reggi ☺️ Just found out your article after an unrelated Google search (about Lit SSR, for Gracile).
I'm happy that this project gave you more confidence in the interoperable web.
One of the main block I see right now is the ability for React to distinguish between attributes and properties. Actually, the lines are blurred, and consumers lack flexibility.
Solid, with its namespaced prop:/attr:/on:/… has the nicest approach to keep Custom Elements declarative in JSX, e.g. accessing their internal events, etc.

Collapse
 
fredt34 profile image
fredt34

Thanks for the link to jsfe.js.org/ - I'm going to add it on my experimental stack:

  • Bun (I never could understand node)
  • EdgeDB, because JOINs suck + it makes no sense describing your data both in your schema and your classes - EdgeDB generates all your classes
  • Elysia for route management and SSR
  • htmx because the whole C/S via json and APIs are so unnatural
  • + probably Shoelace for the Web Component UI (unless you guys can recommend other component libraries?) + some more components (probably SmartTable - it's free along a Tree component) - because InterOperability!
  • and perhaps jsfe because I'm lazy and I prefer specifying the UI (or have it generated from the DB) rather than coding it (or other solutions, but jsonforms.io/ only generates react / vue / old crazy stuff). I've been using AlpacaJS for 10+ years, but jquery is not necessary any more.

I feel Web Components and html are ways to make things lighter, not bulkier (I never wanted to dive in react / vue / angular and the like and spend months, if not years, learning them).