• June 16, 2023, 9:10 p.m.

    Here's how Misago templates are working currently:

    1. You get on site.
    2. You get almost full HTML rendered from Django templates, but with buttons and forms disabled.
    3. JavaScript downloads.
    4. JavaScript runs, replacing most of HTML rendered from Django templates with HTML from React.js components. (this is when buttons become active, and timestamps in UI swap).

    Compare this to Discourse or Flarum (or Misago v4):

    1. You get on site
    2. Minimal representation of site's content is rendered with <noscript> tags, and users with JS enabled get quick loading animation.
    3. JavaScript downloads.
    4. JavaScript runs and you see full site with its UI.

    Misago pros:

    • UI is visible almost immediately.
    • Clients without JS see mostly same stuff as clients with JS.

    Cons of Misago's approach:

    • You download both full HTML and JavaScript app.
    • A lot of UI logic is duplicated across Django views, templates and React.js components.
    • Its confusing to people trying to theme Misago. They customize Django templates and don't understand why their changes disappear after a moment.
    • Every UI change has to be implemented twice: in Django and in React.js.
    • A lot of translation messages (~800) are duplicated between django.po and django.js and need to be translated twice.
    • Bugs when I miss something in Django view when "translating" React.js components to Django templates.

    Other way's pros are effectively opposite of Misago's current cons:

    • No UI logic duplication.
    • Option for highly-optimized for SEO version of site.
    • Faster development.
    • More obvious architecture.
    • Easier for theme and plugin developers.

    Their approach also has better future potential:

    • If UI is only in React.js, you can have something like Storybook included so theme developers can easily look at their style changes.
    • Storybook also makes it easy to test components automatically, combined with TypeScript it catches a lot of errors.
    • Whole UI in React.js means that half of work for future server-side rendering with either Remix or Next.js was already done.

    So I've started contemplating dropping the Django's HTML templates from Misago, replacing them with simple seo-optimized versions for crawlers and other clients without JS support, basically taking inspiration from Discourse's approach.

    Please note that this doesn't mean copying the UI solutions from Discourse. I am a hater of infinite scrolls and having classic pagination is one of features I really like on forums. Also, if I decide to follow with this, this change will not happen immediately. End of this year seems most optimistic timeframe for beginning this work.

    Also, this is not really a decision between keeping Django templates or not. Its decision between dropping them sooner than later. Eventually I would like to adapt server-side rendering solution for React.js like aforementioned Remix or Next.

    I will keep admin control panel as static templates for time being. I don't feel much pressure to replace solution currently in place.

  • Dec. 4, 2023, 8:04 p.m.

    Here's an alternative idea:

    Throw away most of the client-side JavaScript and use HTMX for interactivity. Majority of Misago (or any other forum for this matter) is a static HTML with isolated bits of interactivity here and there.

    This would greatly limit the amount of JS knowledge required to customize Misago, speed up load times and make it easier for plugin developers. I'll investigate this approach once I'll undig myself from other work.

  • Dec. 5, 2023, 2:48 p.m.

    I'll make a proper roadmap update on forum later, but I've already moved on with a GH issue for HTMX.

  • lock_outline

    Thread has been closed.