Support for Web Components API #56681
Replies: 3 comments
-
JS is the most expensive part of any site, see the video here https://gomakethings.com/the-cost-of-javascript-in-2023/ One story: WordPress is used by 62.7% of all the websites whose content management system we know. |
Beta Was this translation helpful? Give feedback.
-
There's more discussion about utilizing web components with Gutenberg at #49814 I'm still ignorant on web components but I am very intrigued including for the reasons mentioned above (not tied to react, can be used across many frameworks, great performance) |
Beta Was this translation helpful? Give feedback.
-
WordPress vs AstroThe Interactivity API works like Astro, shipping 0kB by default, and using the concept of islands. Islands are just interactive blocks. If a page doesn't have any interactive blocks, WordPress won't ship any JavaScript (so 0kB). Actually, if you take a look at the code, there are some places where we still mention islands, although we are replacing them with the word "interactive" to avoid introducing the concept of islands in WordPress (that was actually suggested by @carolinan here). Actually, WordPress itself works like Astro, you can choose what framework/technologies you want to use:
Interactivity API bundle sizeAs for the size, take into account that 31kB is the size unzipped. People usually talk about zipped sizes. For example, jQuery is 88.3kB unzipped, and 31.7kB zipped. The zipped size of the Interactivity API runtime is currently 11.3kB: ![]()
That said, we have not implemented some optimizations yet, but we will apply them in future versions:
With that, we will probably be able to save 1-2kB more on the initial load of the runtime, and also improve the time-to-interactive metrics by delaying the hydration of the non-essential islands (interactive blocks). More importantly, we will be able to apply most of these optimizations without requiring any intervention or code change on the developers side. Web Components and LitThe server-side rendering is critical for SEO and user experience. Pages should not wait until the JavaScript has loaded to show the meaningful content. Pages should not do layout shifts when the JavaScript is loaded. WordPress server is PHP and therefore we can't run JS in the server to do the server-side rendering of the page. Unfortunately, it's not easy to do server-side rendering of Web Components, even with a JS server. Frameworks like Lit solve this by creating an abstraction on top of the Web Components. Unfortunately, Lit server-side renderer also requires JS, and can't be easily migrated to PHP. The Interactivity API was designed with directives to have something that we can interpret both in the server (PHP, thanks to the new HTML API) and in the client (JS, thanks to Preact). Preact was the most performant, lightweight, and easy way to create a directive-based reactive framework on the client. It's virtual DOM also gives us the possibility to implement client-side navigation, something most frameworks (or Web Components) didn't provide. Client-side navigationNot everybody will want to use client-side navigation on their sites, but it's important that WordPress has that option available for the people who want to use it. The way we got client-side navigation working with the Interactivity API is very lean because we delegate the difficult parts to Preact and it's DOM diffing. You can take a look at how simple the client router is. That's very important because performant DOM diffing is a quite complex problem to solve. I invite you to compare the JS size of each of the movie demos to compare WordPress with other frameworks:
As you can see, with the Interactivity API, WordPress is in the league of Solid and Svelte. *: Astro is using AlpineJS as the framework, but doesn't provide client-side navigation, so it's not relevant for this comparison. |
Beta Was this translation helpful? Give feedback.
-
We don't need API from Preact lib for navigation in content sites. Maybe complex app pages need Preact API.
Could you add support for Web Components API for simple components as navigation block?
Copied text from comment #55642 (comment)
Why does interactivity API on the front-end need 31 kB? Why does every page need this big js file?
https://2024.wordpress.net/wp-content/plugins/gutenberg/build/interactivity/index.min.js?ver=17.1.3
I would like to see a WP page with minimum JS or zero JS. Framework Astro shows this path with 0 JS on the front-end, see https://dev.to/ekqt/shipping-zero-javascript-with-astro-9ol
One reply #55642 (reply in thread)
The Astro doesn't need any front-end framework to create interactive components. I can create an Astro component with Web Components standard API without any lib. See the script in the search component https://github.com/withastro/starlight/blob/main/packages/starlight/components/Search.astro
The interactivity lib has 31 kB code for all browsers. Low-end phones have limited computing power. The computing of every kB of JS code needs extra energy from nature.
Why do I need Preact for navigation in Twenty Twenty-Four theme? Demo site https://2024.wordpress.net/index.php/sample-page/
Preact for navigation is overkill !!! We don't need Preact.
We have HTTP2 multiplexing, see https://stackoverflow.com/questions/36517829/what-does-multiplexing-mean-in-http-2
Please separate preact lib from interactivity lib. A new version of Preact needs a new version of interactivity lib now. This solution needs to download next unnecessary kB of JS code !!!
I don't like Preact. Preact creates its own API on the web platform. I like Web Components API for simple components and Lit lib for complex components, see lit.dev.
Components without dependencies
Lit components
Best island component
Beta Was this translation helpful? Give feedback.
All reactions