“React Is Not Modern Web Development”

@jaredcwhite’s personal thoughts on a great entry by @collinsworth into the growing body of work which details why greenfield #WebDev projects are better served by other frameworks…or none at all.

https://thathtml.blog/2023/08/react-is-not-modern/

#React #JavaScript #frameworks #Preact #Svelte #Vue #SolidJS #LitElement

@Jdreben @davatron5000 interoperability, if you're using #litElement and you want to use hooks, you can build a new component with #haunted instead and you don't have to refactor *all* the #lit components. Haunted can render lit components and vice versa, no adapter libraries required!

I recently updated my website to use #LitElement. I don't need to use a frontend framework for a dinky personal site, but I like reimplementing my personal site with a new frontend framework whenever I'm curious about it.

LitElement feels like being back in the days of Vanilla JS. And that's because well, I am! It's not even a framework really, more like a library. It's essentially just a reactive wrapper and templating utility for the browsers customElement registry!

#Javascript #Programming

@jsparty @kball

"New frameworks are using compilers to optimize the code you write into efficient DOM operations, like #Svelte and #Astro."

Me: *cries in #Angular*

"I think there's a framework that does everything with template literals"

"I think you mean #HTMX"

Me: *cries in #LitElement*

also #ModernWebDev #Cypress #Playwright #shadowDom #WebDev #Lit #buildWithLit #litelement #web3 #coffee #socialism #vr #indieweb #webstandards #serviceWorkers #frontend #fullstack #devops

New Lit version is out (2.5.0): https://github.com/lit/lit/releases/tag/lit%402.5.0 #litelement #webcomponents

Pro: #Storybook renders #LitElement
Con: I can't copy the file as-is to #Eleventy and have it execute (I believe a compilation step is needed.

Time to look into #WebC and #WebComponents then, I guess.

#WebComponents experience :underheart:

:sadness: Browsers don't have the same baseline styles.
:fatyoshi: 2 hours figuring out how to avoid #frameworks and #bundlers.
:AngeryCat: 3 hours of searching framework anyway, only to stumble upon options that either, like #LitElement, have minified bundle without #TS declaration or, like #StencilJS, require building.
:tinking: Ending up writing my own nano-framework with adoptedStyleSheets #polyfill.

#TIL #JavaScript #buildless #AreWeThereYet

Just published a canary release of #react wrappers for the #SpectrumWebComponents library of #litelement #CustomElements... 🤯 Leveraging intracompany contributors and the #customElementsManifest with https://custom-elements-manifest.open-wc.org/ mades it a breeze. 😍

RT @PowersBenny@twitter.com

Let's build a colour-picker #html element with #css, #javascript and @buildWithLit@twitter.com reactive controllers...

...but without #LitElement 🤯

🙃 Curious yet? 😜

https://dev.to/open-wc/let-s-build-a-colour-picker-web-component-2j3n

#webcomponents #weekendreading

🐦🔗: https://twitter.com/PowersBenny/status/1408364002594496514

LitElement - A simple base class for creating fast, lightweight web components https://lit-element.polymer-project.org/ #Dev #Component #LitElement by @polymer@twitter.com

I'm not done yet with replacing #conversejs Backbone views with web components.

I've managed to shave off another 30 seconds on the tests. They now complete in about 95 seconds.

#litelement

#ConverseJS has over 400 functional tests.

By replacing the Backbone views with web components, the tests now complete one whole minute faster!

From 190 seconds to 130 seconds.

#litelement

RT @Zelig880@twitter.com

Latest cypress release offers:
- full support for Shadow DOM
- experimental network stubbing
- Beta support for Firefox

https://buff.ly/3ncJZXs

#cypress #tests #development #javascript #js #webcomponents #litElement

🐦🔗: https://twitter.com/Zelig880/status/1311292473348706304

bueno ba lit-element webpack-egaz:

https://gist.github.com/ZiTAL/a61f10ef79e53d0cd428cc03d3ec4e07

#javascript #js #litelement #webcomponents #webpack

I'm currently busy rewriting large parts of the UI layer of Converse.js to use web components via #LitElement.

Very impressed so far with the rendering speed of lit-html.

Lots of improvements still in the pipeline.

RT @polymer@twitter.com

😍 Built with #LitElement 😍 https://twitter.com/JudahGabriel/status/1250132283769548800

🐦🔗: https://twitter.com/polymer/status/1250276294928945154

RT @thomasloven@twitter.com

Just published my first webcomponent! A round slider using @polymer@twitter.com #LitElement! Thanks a lot to
@balloob@twitter.com for holding my hand! Now to get it into
@home_assistant@twitter.com! I'm excited! Exclamation point!
https://www.npmjs.com/package/@thomasloven/round-slider/v/0.2.0

RT @sergicontre@twitter.com

Web Components: Seamlessly interoperable.
This is my small laboratory for interoperate Web Components with frameworks and libraries. @polymer@twitter.com #LitElement #WebComponents
https://medium.com/@sergicontre/web-components-seamlessly-interoperable-82efd6989ca4

RT @marcushellberg@twitter.com

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