从代码库中移除 React.js 并适配 Htmx 以实现 UI 交互
Misago 目前的工作原理如下:您请求 https://misago-project.org 。Django 视图收集数据以渲染线程列表。Django 视图渲染的模板几乎包含完整的 HTML 以及用于渲染这些 HTML 的相同数据的 JSON。但没有交互,因为表单被禁用。JavaScript 被下载。JavaScript 运行,读取嵌入在页面主体中的 JSON,并用来自 React.js 组件的 HTML 替换大部分从 Django 模板渲染的 HTML。按钮变得可用,UI 中的时间戳交换。此方法存在一些问题:Misago 中有许多页面是双重实现的:既有 Django 模板,也有 React.js 组件。那些开始自定义 HTML 的人会感到失望,因为他们编辑 Django 模板时,看到的更改仅闪烁一秒钟后便被 React.js HTML 替换,而他们并不知道也需要自定义这部分。对用户和访客可访问的每个视图都必须做两次:一个是带模板的 Django 视图,另一个是带组件的 React.js 路由。这还需要 API 和 JSON 序列化程序来支持数据获取。将 JSON 序列化为 React.js 应用的预处理数据会减慢响应生成。很多翻译消息是重复的,分别存在于 django.po 和 djangojs.po 文件中。JavaScript 翻译文件也会增加初始下载大小。大量 JavaScript 可能会影响性能,尤其是在旧的和较慢的移动设备上。启用插件来替换或注入自定义 HTML 到页面要求这些插件同时实现 Django 模板和 React.js 组件。而且 Misago 将需要在 misago-docker 中实现 JavaScript 构建步骤作为网站构建的一部分。插件开发者需要兼顾两者。对此问题,我考虑了两种解决方案:放弃 Django 视图和模板,仅保留最小版本以满足搜索引擎的需求。专注于实现 API,并将所有 UI 实现为 React.js 应用。将 Django 减少到 API,并使用带服务器端渲染的 JavaScript 框架,例如 Next.js 或 Remix.run。但有一点:有很多论坛软件仍在尽可能多地采用旧的服务器渲染方式,并在客户端使用一些 JavaScript 改善其交互性。人们对此非常满意。这种方法并没有上述问题。互联网论坛软件具有大量的互动性,但这种互动性是隔离在页面的特定位置。管理操作、观察线程、撰写回复、查看最后通知、参与投票。所有这些都可以在没有 React.js 的情况下实现,并且在我们决定需要避免完全重新加载页面之前,多年来一直是这样。现在,HTMX 是什么?HTMX 是一个小型库,允许开发人员将部分 HTML 指定为动态岛,以便通过新的服务器渲染的 HTML 进行交互时进行替换。例如,实际线程列表就是一个这样的(大型)岛。在 Django 模板中包含少量的 HTMX,改变线程列表的当前类别可以仅从 Django 拉取新 HTML,以供所选类别的新线程列表使用,同时保持页面中其余部分的 HTMX(例如,已加载的搜索结果在导航栏中)不变。Misago 的后端代码只需要在请求来自 HTMX 时返回此岛的 HTML,而不是整个页面。无需进行任何 JSON 序列化或编写专用的 JavaScript 或 React.js。HTMX 是一种声明式的方法,类似于 20 年前在 jQuery 中使用的 $.get("url", "#outlet")。或 Rails Turbolinks。我无法相信我在写这个,但如果你讨厌无尽的滚动或希望保持简单,这就是论坛软件的解决方案。我也决定不将管理面板转移到单页面应用程序(SPA)。目前我有一堆可重用的 Django 视图,处理 90% 的工作,并且在管理中添加新页面需要选择正确的基础视图,填写空白,定义一个或几个表单,并为这些表单编写非常基本的模板。其余的自动发生,我喜欢这样。从 React.js 转向 HTMX 所需的努力将是巨大的,但可以通过多个小步骤完成。例如,一个版本可以将导航栏移至 HTMX,另一个线程列表,接下来是线程页面,再接下来是用户个人资料,等等。但是插件/权限/新解析器仍必须首先实现。因此,HTMX 迁移将不得不等到 2024 年晚些时候。我对此没问题,因为我也想转向最新的 Bootstrap,而那些家伙正在进行一些疯狂的开发。为了记录,Misago 0.39 的 JS 大小: vendor.js : 679kb, gzipped 后为 214kb misago.js : 615kb, gzipped 后为 124kb django-i18n.js : 102kb, gzipped 后为 25.4kb Misago JS 还包括懒加载: hljs.js : 144kb, gzipped 后为 49kb zxcvbn.js : 820kb, gzipped 后为 430kb 我计划在开始从 Misago 中移除 React.js(以及其他 JS 依赖项)后再次关注这些数字。我还需要发出警告,我们可能会经历一个过渡期,在此期间 Misago 的某些部分将...
本站免费、广告极少。如果觉得有帮助,可以请我们喝杯咖啡 —— 任何金额都对持续运营有实际帮助。
☕请我喝杯咖啡