WordPress Developer Hours: Interactivity API (APAC/EMEA)

What if effortlessly creating performant, fluid, and idiomatic frontend interactivity on block-based WordPress sites was possible? Imagine plugins providing interactions like "heart this post" or "add to cart" without page reloads. Picture instant search, commenting, and native full-page transitions as best-in-class built-ins without complex scaffolding or external tools. Envision achieving this in any block theme by default, without sacrificing PHP server rendering and the plugin ecosystem for a JS runtime. Visualize block developers easily declaring and extending such behaviors in a way that is immediately familiar and compatible with the block ecosystem.

That’s what we aim to explore and unlock with the Interactivity API.

This session features a live product demo presented by Mario Santos, one of the developers who has brought the Interactivity API to fruition. Following the demo, Mario answers questions posed by the audience.

Also check the WordPress Developer Hours: Interactivity API (Americas) session with Michal Czaplinski: https://www.youtube.com/watch?v=RXNoyP2ZiS8&list=PL1pJFUVKQ7ETApyQQlt3pLNjPx2HrQwl5&index=5
___________________________________________

View this video and others on WordPress.TV: https://wordpress.tv/2023/04/17/developer-hours-interactivity-api-apac-emea/
___________________________________________

Links from the talk:
- Project original repo: https://github.com/WordPress/block-interactivity-experiments
- Movies demo: https://wpmovies.dev/
- Movies demo repo: https://github.com/WordPress/wp-movies-demo
- Interactivity API Proposal: https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/
- Mario's demo code: https://github.com/SantosGuillamot/interactivity-api-session

– WordPress 6.2 has been released: https://wordpress.org/news/2023/03/dolphy/
– Contribute to WordPress 6.3: https://make.wordpress.org/core/6-3/
– WordCamp Europe 2023: https://europe.wordcamp.org/2023/
– WordCamp US 2023: https://us.wordcamp.org/2023/
– Other WordCamps: https://central.wordcamp.org/
– Dev Note on the HTML Tag Processor: https://make.wordpress.org/core/2023/03/07/introducing-the-html-api-in-wordpress-6-2/
– PR that Luis refers to: https://github.com/WordPress/gutenberg/pull/49305
– Mario’s code from the demo: https://github.com/SantosGuillamot/interactivity-api-session
– Reasons for using Preact: https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#comment-44595
– Reasons for using Preact: https://make.wordpress.org/core/2023/03/30/proposal-the-interactivity-api-a-better-developer-experience-in-building-interactive-blocks/#why-preact
___________________________________________

00:00 - Introduction
07:05 - What the Interactivity API is
08:25 - Movies demo
12:06 - Directives
12:45 - Interactivity API vs React
18:18 - Goals
19:53 - Server-side rendering
22:10 - Backward compatibility (WordPress hooks)
26:55 - Extending functionality - adding zoom to images
30:33 - Declarative, reactive and performant
33:50 - Benefits
38:10 - Q & A
38:25 - Accessibility
43:15 - Data store
44:52 - Side-effects (e.g. REST requests)
50:39 - The Interactivity API in Gutenberg phases 3 and 4
52:05 - Preact vs React
55:56 - Experimentation
57:25 - Wrap-up

#webdevelopment #frontend #javascript #wordpress #gutenberg #developer #blockdevelopment