How we use web components
github.blog
How we use web components
1–10 of 84 posts
Re: How we use web components
#2For those who have used tools like Hotwire, what has your experience been like? How does it compare to something like Vue or React?
Re: How we use web components
#3On the topic of web components, does anyone know if AMP is still using them? I heard they switched over to Preact but I couldn't find an official announcement.
Re: How we use web components
#4For those who have used tools like Hotwire, what has your experience been like? How does it compare to something like Vue or React?
I've just started using it on a fairly simple project so I only have first impressions. But it seems like for a UI that's not too complex it could be a big timesaver. I need to spend more time with it before I can decide where I'd draw the line and switch to a full blown SPA but it definitely expands the class of apps you can build without much JS.
Re: How we use web components
#5I do pretty much everything with Web Components these days.
It's so nice to be able to pick things I need from different frameworks, like Ionic, vaadin, Shoelace, etc... and they all just work together.
I tend to implement vanilla web components, I enjoy managing the life cycle and don't find it particularly burdensome. Of course. Lit-html is a big reason why that's easy to do. I use it for rendering. I generally avoid using the shadow dom unless I have a really good reason.
My components all self-register, and are pretty encapsulated. They all maintain internal state, but for more global state I use a library I wrote called ApplicationState [1].
It's hard to imagine going back to the framework churn after experiencing the freedom of Web Components.
It really feels like we've finally realized the promise of composability, reusability, encapsulation and performance with Web Components.
Re: How we use web components
#6How well do web components work in the context of SEO and pagespeed scores?
Re: How we use web components
#7How well do web components work in the context of SEO and pagespeed scores?
I think they're generally intended for use in SPA/PWAs.
I doubt the shadow dom is particularly crawler friendly.
Also, they aren't great at SSR though some frameworks try to fix that.
It would also depend a lot on how you were using/designing them.
If you were using slots and putting content inside of a custom tag, and just using that tag for display concerns, SEO would be just fine, though you may lose some semantic markup points.
Re: How we use web components
#8How well do web components work in the context of SEO and pagespeed scores?
I’ve had mixed results. Page speed is excellent - I built out an SPA with ~60 or so components and my uncached first paint happens in about 400ms. Cached I get 250ms (this is on prod so it includes the server latency).
SEO is more difficult. I’ve been using the npm package prerender to serve up the page properly for Google/Facebook/Discord bots and for crawlers, and since using that I’ve had successful parsing, but at the cost of perceived performance by the bots (the prerender step adds about 2s to the pageload, which only the bots experience).
Re: How we use web components
#9On the topic of web components, does anyone know if AMP is still using them? I heard they switched over to Preact but I couldn't find an official announcement.
You can totally write web components with Preact: https://preactjs.com/guide/v10/web-components/
From a quick skim of their docs, it looks like AMP still uses web components.
The nice part about web components is that the users of a library don't have to care about how it's implemented, so switching to preact is a transparent change.
Re: How we use web components
#10How well do web components work in the context of SEO and pagespeed scores?
I’ve had mixed results. Page speed is excellent - I built out an SPA with ~60 or so components and my uncached first paint happens in about 400ms. Cached I get 250ms (this is on prod so it includes the server latency). SEO is more difficult. I’ve been using the npm package prerender to serve up the page properly for Google/Facebook/Discord bots and for crawlers, and since using that I’ve had successful parsing, but a…
Why don't you cache the prerender and serve to everyone?