Building better Neos backend modules with HTMX

In this talk I will explain why and how he converted a React based backend module to HTMX and integrated it into the Neos 9 core. Learn about the benefits in regard to extensibility, build stacks, maintainability and how you can get started with your first HTMX based backend module.

Transcript

1. HYPER HYPERLINKS BUILDING BETTER NEOS BACKEND MODULES WITH HTMX SEBASTIAN HELZLE - NEOSCON KARLSRUHE 2025
2. BUILDING BETTER NEOS BACKEND MODULES WITH HTMX ABOUT ME ▸ Neos core team member ▸ Consultant for Neos CMS projects ▸ 🏡 near Karlsruhe, Germany with my little family ▸ ❤ for baking, Lego, gaming ▸ @sebobo@neos.social ▸ @sebobo on Github, Slack, etc.
3. BUILDING BETTER NEOS BACKEND MODULES WITH HTMX AGENDA ▸ What is HTMX? ▸ The rocky road to the Workspace.Ui ▸ Making Neos HTMX ready ▸ Some snippets ▸ Bene fi ts ▸ How to get started with a module ▸ Next steps ▸ Remarks ▸ Questions
4. What is HTMX?
5. WHAT IS HTMX? HIGH POWER TOOLS FOR HTML ▸ AJAX, CSS Transitions, WebSockets, etc. via HTML attributes ▸ Makes pages more „ fl u ff y“ ▸ Many use cases don’t need custom JavaScript ▸ Small library without dependencies ▸ Progressive enhancement ▸ Though not really necessary for the backend ▸ Check out Dominiques talk from NeosCon 2024 https://www.youtube.com/watch?v=4GFaFZLCxWY https://htmx.org
6. WHAT IS HTMX? AN EXAMPLE ▸ “When a user clicks on this button, issue an AJAX request to /clicked, and replace the entire button with the HTML response”
7. WHAT IS HTMX? OTHER HIGHLIGHTS ▸ Boosting ▸ Turns every link and forms into AJAX requests ▸ History API ▸ Debugging tools ▸ Core and community extensions ▸ Good examples and demos
8. The rocky road to the Workspace.Ui
9. THE ROCKY ROAD TO THE WORKSPACE.UI EVERY MODULE IS DIFFERENT ▸ Various kinds of backend modules in Neos ▸ Fluid based ▸ User/sites/con fi guration, etc… ▸ Fusion based ▸ Login/History ▸ (P)React based (+ bits of Fluid or Fusion) ▸ Neos.Ui, RedirectHandler.Ui, Media.Ui, etc… ▸ Some other framework/template
10. THE ROCKY ROAD TO THE WORKSPACE.UI WHAT WE NEED FOR THE CORE ▸ Maintainability ▸ Minimal or zero dependencies ▸ Low risk of regressions ▸ Easy to replace ▸ Testable ▸ Extensibility ▸ Planned and unplanned ▸ Readability ▸ Make it easier to contribute ▸ Usability ▸ Quick interactions, low loading times, intuitive, common components
11. FIRST IMPLEMENTATION: FLUID + JQUERY NOBODY WANTED TO WORK ON IT
12. 1. FLUID + JQUERY ▸ Little progress and rare contributions ▸ Regular regressions - very fragile ▸ Performance issues with many workspaces and changes ▸ Hard to extend ▸ jQuery is more or less deprecated ▸ We consider Fluid deprecated for Neos core implementations
13. SECOND IMPLEMENTATION: FUSION + REACT NOBODY EXCEPT ME WANTED TO WORK ON IT https://github.com/Sebobo/Shel.Neos.WorkspaceModule
14. 2. FUSION + REACT ▸ Large library footprint (for React) ▸ Few contributions ▸ Few shared components (from Neos.Ui) ▸ High maintenance with the JS build ▸ Hard to extend and customise
15. THIRD IMPLEMENTATION: FUSION + HTMX 6 PEOPLE WORKED ON IT!
16. EXAMPLES OF THE WORKSPACE.UI
17. 3. FUSION + HTMX WHY DID WE CHOOSE IT? ▸ Fusion has great extensibility ▸ We use Fusion every day ▸ Fusion components can be shared ▸ HTMX is a spice we can sprinkle on top ▸ Implement a feature, then add HTMX attributes
18. Making Neos HTMX ready
19. MAKING NEOS HTMX READY SUPPORT HEADER BASED FLASH MESSAGES https://github.com/neos/neos-development-collection/blob/9.0/Neos.Workspace.Ui/Classes/Mvc/ HttpHeaderFlashMessageStorage.php
20. MAKING NEOS HTMX READY FORWARD CUSTOM HEADERS IN MODULES https://github.com/neos/neos-development-collection/pull/5179
21. MAKING NEOS HTMX READY TELL HTMX HOW TO HANDLE FLASH MESSAGES
22. MAKING NEOS HTMX READY TELL HTMX HOW TO HANDLE ERRORS
23. Some snippets
24. SOME SNIPPETS NAVIGATION AND BROWSER HISTORY Note: „hx-replace-url“ can probably be removed in this case, as we also use „hx-push-url“
25. SOME SNIPPETS ATTRIBUTE GROWTH
26. SOME SNIPPETS ATTRIBUTE INHERITANCE AND GLOBALS
27. SOME SNIPPETS DIALOG RENDER CASE
28. SOME SNIPPETS AUTO SWAP PARTS
29. Bene fi ts
30. BENEFITS USER EXPERIENCE ▸ Interactions are quicker ▸ Dialogs are more contextual ▸ Minimal loading times
31. BENEFITS FUSION FIRST ▸ Everyone knows how to modify Fusion ▸ Features are implemented, then „made fl u ff y“ ▸ Context sensitive native dialogs
32. BENEFITS JS SECOND ▸ JavaScript rarely needs to be touched ▸ No JS artefacts that need to be built
33. BENEFITS INDEPENDENCE ▸ The controller has 0 knowledge about HTMX ▸ Context sensitive native dialogs ▸ We can focus on what we want to achieve
34. How to get started
35. HOW TO GET STARTED DECIDE WHAT YOU WANT TO ACHIEVE ▸ Does the user bene fi t? ▸ Does your team bene fi t? ▸ Does your future self bene fi t? ▸ No JS is also fi ne 👍
36. HOW TO GET STARTED DECIDE ON THE TECHNOLOGY ▸ (P)React is still a good choice for ▸ Modules like the Media.Ui ▸ Complex state handling (use Preact signals) ▸ Read the HTMX docs and examples
37. HOW TO GET STARTED CHECK OUT EXISTING MODULES ▸ Workspace.Ui in Neos 9 ▸ Shel.Neos.Orphanage ▸ https://github.com/Sebobo/Shel.Neos.Orphanage
38. Next steps
39. NEXT STEPS PLANS FOR THE WORKSPACE.UI ▸ Use HTMX for the workspace review process ▸ Speed up work ▸ Load changes as fragments ▸ Reload parts of publish/discard ▸ Simplify HTMX attributes ▸ ACL editor ▸ Help is appreciated!
40. NEXT STEPS PLANS FOR OTHER MODULES ▸ Use HTMX for more core modules ▸ User management ▸ Account management ▸ Start a Neos component library for modules ▸ Similar to https://github.com/bwaidelich/Wwwision.Neos.ModuleComponents ▸ Make everyone bene fi t ▸ Allow future theming ▸ Help is appreciated!
41. Remarks
42. NOTES WHY NOT ALPINE.JS? ▸ Harder to replace once implemented ▸ We only want server side rendering ▸ Minimise inline scripting
43. NOTES WOULD I REWRITE THE NODETYPES.ANALYZER TO HTMX? ▸ Yes
44. NOTES WOULD I REWRITE THE MEDIA.UI TO HTMX? ▸ NO
45. ADVERTISEMENT I CAN BE YOUR NEOS ANTI-AGING MOISTURIZER ▸ make your Neos project faster ▸ make your editors happier ▸ make your developers better ▸ implement plugins ▸ improve the Neos core for you and everyone else Get in touch!
46. THX! QUESTIONS? ▸ Also love to hear from you after the presentation ▸ Join #project-new-workspace-module on slack.neos.io