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 with all major front-end / metaframeworks, but also to show how I'm betting on Lit for the future of the web._
Lit is having a moment, one would say it's on fire 🔥🤣. It's being used everywhere from the web version of Photoshop to Microsoft's new windows app store. I think something clicked for me recently as to why lit is the major choice when it comes to the future of the web, and web components overall.
Component libraries, love them or hate them it's how web developers quickly cobble together bits of code to form a semi-usable website. From Bootstrap to things like Material UI and more recently Radix UI and Tailwind. With the way that front-end frameworks have been proliferating there are a lot of frameworks out there React, Angular, Solid, Vue, Astro and Lit. How are we able to write framework agnostic component libraries? That way you don't need to re-learn and find alternatives to the things you love to use if you want to build an app in a different framework.
Enter Shoelace an undoubtedly witty pin on "Bootstrap", that aims at bringing back direct usable components but by offering web-components by default, but it also offers web-components wrapped in a react component as well. This is at the core of building a framework interoperable component library, 1) use web-components, 2) wrap them in that specific language's syntax.
While I haven't used Shoelace directly yet, they tout that it's possible to fully customize the components styles, unlike bootstrap which was expected to be used as is. The overuse of bootstrap ultimately led to the homogenization of web-design, making websites feel "bootstrap". With things like CSS Variables and custom styles I'm hoping Shoelace doesn't fall into this trap.
I've been very passionate about a project called react-jsonschema-form (github, editor). I personally hate writing forms, and love the idea of serializable components, schema, validation all in one. I've always wanted an alternative to this project that offered an alternative to react, and possibly the ability to render a schema form to static HTML (like ssg).
I've thought about this a lot while using other frameworks like Deno Fresh which uses Preact under the hood, mainly for JSX templating, but also for islands functionality. Within that framework you can't really use React component libraries. You start to think more about generating static HTML like this example from the Deno blog [A Whole Website in a Single JavaScript File, cont'd](https://deno.com/blog/a-whole-website-in-a-single-js-file-continued, which shows building a simple webpage with routes all in one typescript file, a site that serves no Javascript to the browser.
The other day I stumbled upon my dream project the other day json-schema-form-element (github, editor) which is heavily inspired by the react counterpart. It's exactly what I wanted to make. This project, json-schema-form-element is a masterclass in how to make a modern web-component-first / "authored" library which is also interoperable with all other frameworks.
The example repo uses Astro which allows the author to demo all of the usages for the library, check it out here: index.astro. Using Astro for this is just another thing the author got right here.
I'm really excited about all this, and it makes me have some faith in the web again. I think that Lit is a step in the right direction especially the ability to do SSR / SSG and hydrate a web page. Hopefully 🤞 Shoelace can get SSR running, which is currently one hurdle, but I think it is achievable.
Anyway, what do you think of Lit? What do you think of the approach that json-schema-form-element takes at making an interoperable component library? Comment below 👇 and let me know!
Follow me on Mastodon for more thoughts on the future of web-development, web components, and typescript stuff @indieweb.social@thomasreggi.
Top comments (16)
In 2006 I bet on jQuery to be the future of the Web
And then the browser vendors implemented things like
querySelectorIN 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?
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.
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.
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.
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
I didn't say it's new I said getting browsers to care about it is.
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.
Hi
Lit was born out of polymer framework
Which was born from GWT, its has 15+ years of background
YouTube, gmail, IBM Carbon are lit components.
But what is the main difference between LIT and React ??
Lit is a template engine on top of Webcomponents. Like jquery it’s a library..:
React on the other hand is a library which pretends to be a language…
And bear me out :
If you won’t master the new web, you’ll be out of job
I did Angular development when the version number started with 0
And then Google called Angular 2 an Upgrade (it was a new language)
I am in this Internet business for 34,5 years now,
and have mostly seen companies and technologies go instead of stick around
Bud Colligan (CEO Macromedia) taught me a valuable lesson in 1994
Danny, every product has a lifecycle when I bugged him why they were not upgrading Authorware fast enough imho. It took another 13 years for Authorware to "go"; not because of its technology, but because Adobe bought Macromedia for Flash only and moved Authorware development to India, and them developers just couldn't fix the bugs.
A yes, Flash... I still hear my trainees in 1995 say Danny, this FutureSplash plugin is cool!
Technology is not about technology
The Web Components world is in flux. There are no clear "jQuery/React" style winners yet.
Web Awesome just got 671K backing - kickstarter.com/projects/fontaweso...
Will they "win"; I really do not know, but they for sure will get some momentum
Just finished a Olympic Medal Ranking Web Component using only native JavaScript.
Lit or any other soup-starter would not have saved me time.
I know one thing for sure: This Web Component will work for the 2028 Olympics in LA and the 2032 Olympics 2032 in Brisbane without any refactoring or errors or failing build-version (provided the data-API does not change) because it is native, standard technology.
If you want I can sent you my Angular 0.14 code, see how long it will take you to build that again.
My dear friend
We speak the same ,
I use lit because it’s an excellent literal and template engine.
Same as you , I wrote my first code on Basic on Atari back in the 80s
Do you remember backbone js ??
Backbone & React are giving me a Deja vu
And I wish to add couple important things.
Use a testing browser and disable : transitions & shadow borders , on react app. You know what will happen? You will find a large scale scam.
React is slow !!!! It uses css tricks to mimic speed.
Everything is a Déjà vu - youtube.com/watch?v=yJDv-zdhzMY
The only thing that makes Web Components great, is four companies working together.
That is something I have never seen before.
Lit is great because from the start it was presented as the disappearing layer
Should you learn Lit, YES!
Should you use Lit, well, it depends, maybe not.
Every tool or technology has a spark of greatness, but it should always be a spark for standards
I peeked and poked Lit code, then wrote my own literal and template engine
DEV.to Spritemeister
FYI I never learned React.
I was in the Microsoft SharePoint world for many moons and dollars.
I could do everything with client-side tech.
And then Microsoft switched to React, I found it to not be interoperable with other client-side technologies and left the Microsoft world for the Web Component world. I can truly say I could have earned 500.000 dollar more over the past 7 years had I "done" React.
Same applies to Svelte, you can build stuff, you can't tweak stuff, like you can with Web Components
source: stackoverflow.com/questions/643043...
Thoughts?
Tomas well done !!
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.
Thanks for the link to jsfe.js.org/ - I'm going to add it on my experimental stack:
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).