Support for Web Components API

[JosefJezek]

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

• https://github.com/mdn/web-components-examples
• https://github.com/thepassle/generic-components
• https://github.com/zachleat/table-saw
• https://github.com/zachleat/infinity-burger
• https://github.com/zachleat/browser-window
• https://github.com/zachleat/announcement-banner
• https://github.com/microsoft/fast

Lit components

• https://github.com/ing-bank/lion
• https://github.com/material-components/material-web
• https://github.com/adobe/spectrum-web-components
• https://github.com/google/model-viewer
• https://github.com/google/playground-elements
• https://github.com/shoelace-style/shoelace

Best island component

• https://github.com/11ty/is-land

[JosefJezek]

JS is the most expensive part of any site, see the video here https://gomakethings.com/the-cost-of-javascript-in-2023/

One story:
Just last week I reduced global emissions by an estimated 59.000 kg CO2 per month by removing a 20 kB JavaScript dependency in Mailchimp for WordPress. There's no way I can have that kind of effect in other areas of my life.
source: https://www.dannyvankooten.com/blog/2020/website-carbon-emissions/

WordPress is used by 62.7% of all the websites whose content management system we know.
This is 42.8% of all websites.
source: https://w3techs.com/technologies/details/cm-wordpress

You Don't Need JavaScript

[skorasaurus]

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)

[luisherranz]

WordPress vs Astro

The 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:

• Don't want to use jQuery on your site anymore? Stay away from plugins and blocks using it and don't use it in your own code.
• Don't want to use Interactivity API on your site? Stay away from plugins and blocks using it and don't use it in your own code.
• Do you want to use Svelte? or Vue? Just stay away from plugins or blocks using other technologies and create your own blocks/theme using Svelte/Vue.
• Do you want to use Web Components or Lit? Just stay away from plugins or blocks using other technologies and create your own blocks/theme using Web Components/Lit.
• Don't you like the navigation block? You can create your own using your preferred technologies and share it with the community for those who have the same preferences as you 🙂

Interactivity API bundle size

As 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:

So, again, this works exactly like Astro:

• If you don't have any interactive blocks (islands) on your page, it won't send any JavaScript (0kB).
• If you have islands in Astro, you need to choose a framework. For the Interactivity API, we chose Preact, which is one of the smallest. Preact + Preact hooks + Preact signals is about 8kB (zipped). That's size would be the same in Astro. In WordPress, we had to a small runtime on top of Preact to process the directives, so that's the ~3kB difference that you see from 8kB to 11.3kB. But other than that, it's exactly the same in Astro.

That said, we have not implemented some optimizations yet, but we will apply them in future versions:

• Code split any non-necessary runtime piece (like the router).
• Code split all the directives and only load the ones used on the page.
• Add lazy loading techniques (similar to Astro ones)

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 Lit

The 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 navigation

Not 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:

#	Technology	URL	Size
1.	Solid	solid-movies.app	13.2kB
2.	WordPress (Interactivity API)	wpmovies.dev	15.9kB
3.	Astro*	astro-movies-app.netlify.app	16.3kB
4.	Svelte	sveltekit-movies.netlify.app	25.2kB
5.	Angular	angular-movies-a12d3.web.app	108kB
6.	Lit	lit-movies-2.netlify.app	122kB
7.	Nuxt	movies.nuxt.space	122kB
8.	NextJS	next-movies-zeta.vercel.app	150kB

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.