jQuery was moved to Vanilla JS back in XenForo 2.3.
I would like to discuss two practical options for the selective migration/conversion of parts of the frontend:
HTMX & Alpine.js instead of writing custom handlers with addEventListener, fetch, manual innerHTML updates, loading states, and event re-attachment, so you would mostly use HTML attributes:
Example (simplified) looks like this:
Vanilla requires JavaScript to fetch content and update the DOM.
With HTMX, you can do:
2. Svelte 5 (with Runes) for more complex components
For new features that involve richer interactivity and state, Svelte 5 offers a different.
Instead of manual DOM manipulation and state tracking, you write components with simple reactive declarations ($state, $derived, others). The Svelte compiler then generates would be highly have optimized, direct DOM update code, and also often smaller and faster than equivalent hand-written Vanilla JS for complex UIs.
Because this doesn't have or doesn't exist as a virtual DOM, and produces very efficient output, and only new complex components can be built in Svelte and mounted into XenForo pages (similar to how some developers already embed React islands).
Instead of a full frontend migration, I believe XenForo would benefit from selective, progressive adoption of modern lightweight tools:
This would help fast development and improve better developer velocity for future features while preserving the excellent performance and server-rendered nature of XenForo future framework
I would like to discuss two practical options for the selective migration/conversion of parts of the frontend:
HTMX & Alpine.js instead of writing custom handlers with addEventListener, fetch, manual innerHTML updates, loading states, and event re-attachment, so you would mostly use HTML attributes:
Example (simplified) looks like this:
Vanilla requires JavaScript to fetch content and update the DOM.
With HTMX, you can do:
Code:
<button
hx-post="/endpoint"
hx-target="#container"
hx-swap="innerHTML"
hx-indicator="#spinner">
Action
</button>- HTMX handles AJAX requests, partial updates, and swapping HTML fragments returned from PHP templates.
- Alpine.js handles local client-side state and simple interactivity (toggles, form state, animations, etc.) using attributes like x-data, x-show, x-model.
- Result: Significantly less custom JavaScript for common patterns while keeping the server in control of rendering.
- It works alongside existing Vanilla code and can be adopted incrementally.
2. Svelte 5 (with Runes) for more complex components
For new features that involve richer interactivity and state, Svelte 5 offers a different.
Instead of manual DOM manipulation and state tracking, you write components with simple reactive declarations ($state, $derived, others). The Svelte compiler then generates would be highly have optimized, direct DOM update code, and also often smaller and faster than equivalent hand-written Vanilla JS for complex UIs.
Because this doesn't have or doesn't exist as a virtual DOM, and produces very efficient output, and only new complex components can be built in Svelte and mounted into XenForo pages (similar to how some developers already embed React islands).
Instead of a full frontend migration, I believe XenForo would benefit from selective, progressive adoption of modern lightweight tools:
- HTMX + Alpine.js for most dynamic interactions and to reduce repetitive Vanilla JS code.
- Svelte 5 when building new, more complex interactive components.
This would help fast development and improve better developer velocity for future features while preserving the excellent performance and server-rendered nature of XenForo future framework
Last edited:
Upvote
0