文章摘要
文章描述了Misago项目当前使用React.js和Django模板双重渲染页面带来的问题:代码重复、用户自定义模板被React覆盖、以及需要维护两套视图和API。因此计划移除React.js,改用HTMX实现UI交互。
文章总结
根据原文,Misago论坛软件当前采用React.js实现前端交互,但存在诸多问题:页面需同时用Django模板和React组件实现两次,导致代码重复;用户自定义HTML时,编辑的Django模板会被React组件覆盖;每个视图需同时支持Django和React,还需额外API和JSON序列化,拖慢响应速度;翻译文件重复,JavaScript文件体积过大影响性能;插件开发者需同时掌握Django和React技术。
作者考虑过两种解决方案:一是完全放弃Django视图,仅保留最小版本供搜索引擎,专注React应用;二是将Django降级为API,配合Next.js等服务器端渲染框架。但最终发现,传统论坛软件仍采用服务端渲染为主、JavaScript局部增强交互的方式,用户对此满意,且避免了上述问题。
因此,作者决定采用HTMX替代React.js。HTMX是一种轻量库,允许将HTML部分标记为动态区域,通过服务端渲染的HTML进行交互更新。例如,帖子列表可作为动态区域,切换分类时仅请求新列表的HTML,无需JSON序列化或编写JavaScript。这类似于20年前jQuery的$.get("url", "#outlet")或Rails Turbolinks的声明式方法。
迁移过程将分步进行:例如,一个版本将导航栏迁移至HTMX,后续版本依次迁移帖子列表、帖子页面、用户资料等。但插件、权限和新解析器的开发需优先完成,因此HTMX迁移预计在2024年下半年启动。过渡期间,部分页面可能暂时无React.js也无HTMX,仅作为多页面应用,但关键交互(如点赞、投票)会保留AJAX或HTMX。
目前,Misago已取得初步进展:账户设置页面已完全改用Django视图和HTMX,JavaScript文件从615KB减至578KB;帖子列表页面也已重写为Django视图和HTMX,JavaScript文件进一步减至530KB。
评论总结
根据评论内容,总结如下:
支持HTMX的观点(多数评论): - HTMX适合服务端渲染,多数情况下应优先采用(作者sgt) - "Htmx is a great fit for server rendering - which in many or most cases is what you should do in any case" - 论坛类网站非常适合HTMX,可实现部分渲染和实时更新(作者snorremd) - "With HTMX you can do partial rendering and live updates via server-sent events" - 作者prologic和n4pw01f均表示已用HTMX替代React/Vue,并搭配其他工具长期使用 - "I basically use HTMX for all my Web Apps" (prologic) - "Replace React / Vue with HTMX 2 years ago and still going strong" (n4pw01f)
批评HTMX的观点(少数评论): - HTMX是“在寻找问题的解决方案”,忽视了20年的技术积累(作者asdfsa32) - "htmx is basically a solution in the search of a problem" - "a solution that overlooks 2 decades of learnings" - 认为HTMX假装是声明式语言,实质上是命令式(作者asdfsa32) - "pretending to be a declarative language while entirely imperative"
其他观点: - 作者hazrmard提到Django与前端框架结合困难,考虑用Django模板处理内部工作、React处理面向客户页面 - 作者thrownaway561质疑该新闻为何时隔3年再次被报道