Decoupled WordPress — architecture and challenges, 2025 WP Vrsac

Slides from my talk at the big birthday edition of WordPress Meetup Vršac (#WPVŠ 03/25, Tačka Susretanja, March 28, 2025).

The talk opens with Apollo 11 and the famous 1202 program alarm: a proof that even a "crashing" computer, understood well, can still land you on the Moon, and uses that as a lens for approaching new architectures with respect rather than hype. From there it walks through the JAMstack and the differences between coupled, decoupled, and headless CMS setups, then looks at what WordPress brings to the table: the built-in REST API, WPGraphQL, and a Next.js frontend with Apollo Client, all wired together locally with DDEV. Along the way, it busts a few myths: no, it doesn't quite work "out of the box," and no, it's not as easy as 1+1, before closing with the real takeaway: don't chase the latest hype, think architecture instead of tools, keep it simple, and enhance only when required. Know your JavaScript, React, and Next.js well, or you'll suffer.

Transcript

1. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 1
2. ]{ APOLLO 11: THE MOON LANDING AND 1202 and very brie y some musings about what the hack have Next.js to do with WordPress?! Mladen Đurić @MacMladen WordPress Decoupled fl @MacMladen v.1 2025-03-28 2
3. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 3
4. ]{ 1202: APOLLO GUIDANCE COMPUTER HAD CRASHED Armstrong had had his wings clipped over Korea; he’d bounced an airplane off the upper atmosphere; he’d rescued Gemini 8 from a violent zero-gravity spin. Now he was piloting a malfunctioning spacecraft to touch down on an alien world. Just 40 seconds after the computer’s nal restart, he slowed the lander’s forward momentum, then rotated the legs toward the surface. As the engine kicked up a blinding cloud of dust, Aldrin read aloud a steady stream of gures from the console. With almost no fuel to spare, the lander dropped, in slow motion, to kiss the surface upright, and the particles of moon dust hung suspended in the sunlight until the gentle lunar gravity pulled them back to rest. fi WordPress Decoupled fi @MacMladen v.1 2025-03-28 4
5. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 5
6. ]{ DECOUPLED WORDPRESS Mladen Đurić @MacMladen @MacMladen WordPress Decoupled v.1 2025-03-28 6
7. ]{ $ whoami A very boring, incompetent guy MLADEN ĐURIĆ a.k.a MacMladen @MacMladen WordPress Decoupled v.1 2025-03-28 7
8. ]{ I’ve been in IT since the age of mainframes, 8th year of UNIX epoch. @MacMladen WordPress Decoupled v.1 2025-03-28 8
9. ]{ I started with Z80 assembly @MacMladen WordPress Decoupled v.1 2025-03-28 9
10. ]{ I really enjoyed hard core C @MacMladen WordPress Decoupled v.1 2025-03-28 10
11. ]{ As soon as I started learning to code I was so fascinated and wanted to share what I learned. I was hardly into secondary school when I organised rst computer club and gave rst BASIC course. It was around 1982. In 2016 I started a Professional Web Development School ]{oder. v.1 2025-03-28 fi WordPress Decoupled fi @MacMladen 11
12. ]{ DECOUPLED EVER HEARD OF? @MacMladen WordPress Decoupled v.1 2025-03-28 12
13. ]{ DECOUPLED Separating front and backend infrastructure Usual CMS architecture is coupled meaning that the same web server deals with both backend consisting of persistent storage (database, media) and data processing (database query and manipulation), and frontend generating the markup which is sent to the client (consumer). Decoupled means one system is dealing with the backend part (mostly API on the server) and the frontend which handles rendering and some logic in the client. @MacMladen WordPress Decoupled v.1 2025-03-28 13
14. ]{ INTRODUCE YOURSELF! Your role? (Visual, Frontend, Backend, DevOps) Your experience? (One, three, more years) Using some Javascript already? (React, Next.js) @MacMladen WordPress Decoupled v.1 2025-03-28 14
15. ]{ TIMETABLE: 1. The JAM stack ~2 min 6. The Package~4 min 2. The Reasoning ~2 min 7. 3. The WordPress ~2 min 8. The Myths ~1 min 4. The Next.js ~2 min 9. The Conclusion ~1 min 5. The Plugins ~4 min 10. Q & A 10++ min @MacMladen WordPress Decoupled The Demo ~2 min v.1 2025-03-28 15
16. ]{ Chapter 1 THE JAM STACK @MacMladen WordPress Decoupled v.1 2025-03-28 16
17. ]{ IT ALL STARTED IN AUGUST 2006 @MacMladen WordPress Decoupled v.1 2025-03-28 17
18. ]{ MODERN LIBRARIES @MacMladen WordPress Decoupled v.1 2025-03-28 18
19. ]{ FRONTEND OR BACKEND DEVELOPER? @MacMladen WordPress Decoupled v.1 2025-03-28 19
20. ]{ SERVERLESS 😂 @MacMladen WordPress Decoupled v.1 2025-03-28 20
21. ]{ BACKEND (API) @MacMladen WordPress Decoupled v.1 2025-03-28 21
22. ]{ MARKUP (?) @MacMladen WordPress Decoupled v.1 2025-03-28 22
23. ]{ Chapter 2 THE REASONING @MacMladen WordPress Decoupled v.1 2025-03-28 23
24. ]{ WE WANT TO BE HEADLESS! @MacMladen WordPress Decoupled v.1 2025-03-28 24
25. ]{ WHY HEADFUL? @MacMladen WordPress Decoupled v.1 2025-03-28 25
26. ]{ WHY HEADLESS? @MacMladen WordPress Decoupled v.1 2025-03-28 26
27. ]{ THE MEANING OF DECOUPLED @MacMladen WordPress Decoupled v.1 2025-03-28 27
28. ]{ FULLY VS PROGRESSIVELY DECOUPLED PROGRESSIVELY DECOUPLED WORDPRESS FULLY DECOUPLED WORDPRESS • Complete seperation of concerns betweeen the presentation layer and backend. • Rather than complete seperates, it diminishes the line between frontend and backend. • Super-fast and exible content delivery with no speci ed delivery environment. • Super-fast content delivery with a speci ed delivery environment. • Full authority over how and where your content appears. • Needs quick design alterations. • User-friendly to both developers and content editors. • Concurrently use WordPress's rendering system and a JavaScript framework. • • Developer-friendly as it gives better control over the frontend. Removes connection between the rendered output of a WordPress page and its data model. fi WordPress Decoupled fl fi @MacMladen v.1 2025-03-28 28
29. ]{ CREATE ONCE, PUBLISH ANYWHERE @MacMladen WordPress Decoupled v.1 2025-03-28 29
30. ]{ THE CONSUMERS @MacMladen WordPress Decoupled v.1 2025-03-28 30
31. ]{ APPLICATION LIKE BEHAVIOUR @MacMladen WordPress Decoupled v.1 2025-03-28 31
32. ]{ Chapter 3 THE WORDPRESS @MacMladen WordPress Decoupled v.1 2025-03-28 32
33. ]{ Chapter 4 THE NEXT.JS @MacMladen WordPress Decoupled v.1 2025-03-28 33
34. ]{ REACT BEST BUDDY @MacMladen WordPress Decoupled v.1 2025-03-28 34
35. ]{ POPULAR @MacMladen WordPress Decoupled v.1 2025-03-28 35
36. ]{ RICH ECOSYSTEM @MacMladen WordPress Decoupled v.1 2025-03-28 36
37. ]{ ACTIVELY DEVELOPED @MacMladen WordPress Decoupled v.1 2025-03-28 37
38. ]{ Chapter 5 THE PLUGINS @MacMladen WordPress Decoupled v.1 2025-03-28 38
39. ]{ REST API (BUILT-IN) @MacMladen WordPress Decoupled v.1 2025-03-28 39
40. ]{ WP GRAPH QL @MacMladen WordPress Decoupled v.1 2025-03-28 40
41. ]{ Chapter 6 THE PACKAGE @MacMladen WordPress Decoupled v.1 2025-03-28 41
42. ]{ @APOLLO/CLIENT GRAPH QL @MacMladen WordPress Decoupled v.1 2025-03-28 42
43. ]{ Chapter 7 THE DEMO @MacMladen WordPress Decoupled v.1 2025-03-28 43
44. ]{ NEVER DO A LIVE DEMO!* -MORTEN BIRCH {{MORTEND.DK}} @MacMladen WordPress Decoupled v.1 2025-03-28 44
45. ]{ DDEV FOR LOCAL DEVELOPMENT @MacMladen WordPress Decoupled v.1 2025-03-28 45
46. ]{ CMS TEMPLATES - WORDPRESS @MacMladen WordPress Decoupled v.1 2025-03-28 46
47. ]{ Chapter 8 THE MYTHS @MacMladen WordPress Decoupled v.1 2025-03-28 47
48. ]{ FINALLY, SOMETHING THAT WORKS OUT OF THE BOX! @MacMladen WordPress Decoupled v.1 2025-03-28 48
49. ]{ I CAN DO THIS EASILY! @MacMladen WordPress Decoupled v.1 2025-03-28 49
50. ]{ SO NO ONE CAN DO THIS EASILY? @MacMladen WordPress Decoupled v.1 2025-03-28 50
51. ]{ Chapter 9 THE CONCLUSION @MacMladen WordPress Decoupled v.1 2025-03-28 51
52. ]{ THE RIGHT TOOL FOR THE JOB Never overthink or over-engineer Never pick latest hype — aim for sustainability Never think WordPress — think architecture Keep it simple, enhance only when required Know well JavaScript, React, Next.js or you’ll suffer @MacMladen WordPress Decoupled v.1 2025-03-28 52
53. ]{ Chapter 9 THE RESOURCES @MacMladen WordPress Decoupled v.1 2025-03-28 53
54. ]{ 1202: APOLLO GUIDANCE COMPUTER HAD CRASHED @MacMladen WordPress Decoupled v.1 2025-03-28 54
55. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 55
56. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 56
57. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 57
58. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 58
59. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 59
60. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 60
61. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 61
62. ]{ Q&A Mladen Đurić @MacMladen @MacMladen WordPress Decoupled v.1 2025-03-28 62
63. ]{ Mladen Đurić @MacMladen @MacMladen WordPress Decoupled v.1 2025-03-28 63
64. ]{ THANKS! Mladen Đurić @MacMladen @MacMladen WordPress Decoupled v.1 2025-03-28 64
65. ]{ @MacMladen STAND WITH SERBIA WordPress Decoupled v.1 2025-03-28 65
66. ]{ @MacMladen WordPress Decoupled v.1 2025-03-28 66