JSX-Syntax with Webcomponents.

https://positive-intentions.com/blog/dim-functional-webcomponents

I made something to try out and I'm working towards a UI framework for my personal projects. It's far from finished but perhaps this might be interesting to share.

#functional #webcomponents #javascript #html #css #web #components #library #webcomponents #customelements #lithtml #lit #polymer #OpenSource

Dim: Functional Web Components | positive-intentions

Modern JavaScript frameworks like React JS and Vue JS have popularized the functional programming paradigm and declarative approaches to web app development. While these frameworks have made creating dynamic web applications more accessible, it's worth exploring the potential of web components in this landscape. Lit elements, with its minimalistic and declarative approach, stands out as an appealing base for leveraging web components in modern web and app development.

We are happy to announce our new open-source web template for creating a simple and minimal radio directory - Radiohub! It's powered by the amazing web-component library Shoelace.

Feel free to check it out and let us know your feedback.

https://github.com/digitalmalayali/radiohub

#digitalmalayali #opensource #webtemplate #shoelace #lit #lithtml #webcomponent #radio #radiodirectory

GitHub - digitalmalayali/radiohub: A free, open-source web template to create an online radio directory.

A free, open-source web template to create an online radio directory. - digitalmalayali/radiohub

GitHub

Im letzten Artikel der Web Components Blogpost-Reihe haben wir uns die Lit-Bibliothek aus der Sicht eines Angular-Entwicklers angesehen. Im fünften und abschliessenden Artikel stellen wir ein Projekt vor, welches wir mit Webkomponenten und Lit gebaut haben: Puzzle Shell. Diese Komponentenbibliothek ermöglicht es uns, das responsive Basislayout und Design interner Anwendungen konsistent zu gestalten.

https://www.puzzle.ch/de/blog/articles/2023/12/27/web-components-part-5-puzzle-shell

#WebComponents
#Frontend
#LitHTML
#Angular

Web Components (Part 5): Puzzle Shell

In the previous article of this blog post series, we looked at the Lit library through the eyes of an Angular developer. Now, in this fifth and final

Puzzle ITC

Ho. ho, ho - der 🎅 hat zum heutigen Tag den vierten Teil unserer Blogpostserie rund um Web Components mitgebracht! 🚀

Nachdem wir im vorderen Artikel den Projektsetup mit Lit angeschaut haben, tauchen wir nun tiefer in Lit 🔥 ein und vergleichen seine Konzepte und Features mit Angular. Du wirst sehen, dass Lit deine Aufmerksamkeit verdient hat und durchaus eine solide und schlanke Alternative zu den populären JavaScript Frameworks sein kann.

https://www.puzzle.ch/de/blog/articles/2023/12/06/web-components-part-4-lit-for-angular-developers

#Frontend
#LitHTML
#Angular

Web Components (Part 4): Lit for Angular Developers

In the previous article of this blog post series, we introduced the lightweight Web Component library Lit. Although Lit is widely used, it is still not as

Puzzle ITC

#solidjs take 2, yesterday. Went a lot better. I think I may like it better than #sveltejs

I am on the fence a bit on the conventions for css but I must confess the scopedn styling is nice.

For comparison I may try #lithtml to determine if that is all I really need.

Starting to play around with Lit for a custom element project I’ve started, but I don’t think I can handle going back to class components after having experienced React hooks. The ability to extract complex behaviors into reusable hooks is just too useful. I would rather avoid class-based code where possible. #lithtml #customelements #WebComponents

@hasanhaja that's part of why I'm curious about #hauntedjs , which brings functional components to #lithtml . And to be clear, the tooling isn't awful, it's just not as good as you'd expect from the most popular framework (big surprise).

However, the devex of vanilla #webcomponents is as least as far behind lit as lit is behind React. If you know you want to be framework-agnostic, lit is a pretty obvious way to go.

Personally, I really like the freedom of not being constrained to a (2/x)

I've personally also seen an adapter for #lit / #lithtml and this whole idea of universal reactivity is so cool. Desperately needed, because... There is too much fragmentation out there, and it's nice to see it all coming together in a way that isn't dogmatic to any one particular framework or programming paradigm.
Using lit-html standalone – Lit

Simple. Fast. Web Components.

lit.dev

RT @[email protected]

New 5-part text & video tutorial on building an app with #LitElement, covering:
🔥 #lithtml templating
⚛️ state management with #redux
🚢 navigation and code splitting with #vaadin router & #webpack
📵 #PWA and offline

👀 https://vaadin.com/tutorials/lit-element

Creating a LitElement project