Misago Project Considers Replacing React.js with Htmx for UI Interactivity

Current Architecture Challenges

The Misago project currently renders pages using Django templates, then replaces much of the HTML with React.js components after JavaScript loads. This architecture results in many pages being implemented twice, once in Django templates and again in React.js components. This duplication extends to translation messages and requires separate API endpoints and JSON serializers for React.js data fetching.

Developer and Performance Issues

Developers attempting to customize HTML often encounter issues where their changes to Django templates are overwritten by React.js components, requiring them to modify both. The JSON serialization process for pre-baking data for the React.js app also slows down response generation. Furthermore, the large amount of JavaScript can negatively impact performance, especially on older or slower mobile devices, and complicates plugin development by requiring knowledge of both Django and React.js.

Proposed Solution: Htmx Adoption

To mitigate these problems, the Misago project is considering removing React.js and adopting Htmx for UI interactivity. This approach would shift towards rendering as much as possible on the server, using minimal client-side JavaScript for specific interactive elements. This strategy aims to simplify the codebase, improve performance, and streamline the development and customization process by eliminating the need for dual implementations and extensive client-side frameworks.

Impact and Benefits

By moving to Htmx, Misago expects to reduce code duplication, enhance performance, and simplify the development workflow for both core developers and plugin creators. This change aligns with a philosophy of server-side rendering with targeted JavaScript for interactivity, which is common in other forum software and addresses the specific challenges faced by the current React.js integration.