您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > HTML

Htmx意外走红,我们从React“退回去”后:代码行数减少 67%,JS 依赖项从 255 下降到 9

时间:2022-10-18 13:29:08  来源:搜狐号  作者:InfoQ

编译 | 核子可乐、Tina

技术和软件开发领域存在一种有趣的现象,就是同样的模式迭起兴衰、周而复始。

htmx 的走红

过去Web非常简单。URL 指向服务器,服务器将数据混合成 html,然后在浏览器上呈现该响应。围绕这种简单范式,诞生了各种JAVA框架,以前可能需要数月时间完成的一个应用程序基本功能,现在借助这些框架创建相对复杂的项目却只需要数小时,我们节省了很多时间,从而可以将更多精力花在业务逻辑和应用程序设计上。

但随着 Web 不断地发展,Java 失控了。不知何故,我们决定向用户抛出大量 App,并在使用时发出不断增加的网络请求;不知何故,为了生成 html,我们必须使用 JSON,发出数十个网络请求,丢弃我们在这些请求中获得的大部分数据,用一个越来越不透明的 Java 框架黑匣子将 JSON 转换为 html,然后将新的 html 修补到 DOM 中......

难道大家快忘记了我们可以在服务器上渲染 html 吗?更快、更一致、更接近应用程序的实际状态,并且不会向用户设备发送任何不必要的数据?但是如果没有 Java,我们必须在每次操作时重新加载页面。



现在,有一个新的库出现了,摒弃了定制化的方法,这就是 htmx。作为 Web 开发未来理念的一种实现,它的原理很简单:

  • 从任何用户事件发出 AJAX 请求。
  • 让服务器生成代表该请求的新应用程序状态的 html。
  • 在响应中发送该 html。
  • 将该元素推到它应该去的 DOM 中。

htmx 出现在 2020 年,创建者 Carson Gross 说 htmx 来源自他于 2013 年研究的一个项目 intercooler.js。2020 年,他重写了不依赖 jQuery 的 intercooler.js,并将其重命名为 htmx。然后他惊讶的发现 Django 社区迅速并戏剧性地接受了它!



图片来源:https://lp.jetbrAIns.com/django-developer-survey-2021-486/

Carson Gross 认为 htmx 设法抓住了开发者对现有 Java 框架不满的浪潮,“这些框架非常复杂,并且经常将 Django 变成一个愚蠢的 JSON 生产者”,而 htmx 与开箱即用的 Django 配合得更好,因为它通过 html 与服务器交互,而 Django 非常擅长生成 html。

对于 htmx 的迅速走红,Carson Gross 发出了一声感叹:这真是“十年窗下无人问,一举成名天下知(this is another example of a decade-long overnight success)”。

htmx 的实际效果

可以肯定的一点是 htmx 绝对能用,单从理论上讲,这个方法确实值得称道。但软件问题终究要归结于实践效果:效果好吗,能不能给前端开发带来改善?

在 DjangoCon 2022 上,Contexte 的 David Guillot 演示了他们在真实 SaaS 产品上实现了从 React 到 htmx 的迁移,而且效果非常好,堪称“一切 htmx 演示之母” (视频地址:https://www.YouTube.com/watch?v=3GObi93tjZI)。

Contexte 的项目开始于 2017 年,其后端相当复杂,前端 UI 也非常丰富,但团队非常小。所以他们在一开始的时候跟随潮流选择了 React 来“构建 API 绑定 SPA、实现客户端状态管理、前后端状态分离”等。但实际应用中,因为 API 设计不当,DOM 树太深,又需要加载很多信息,导致 UI“非常非常缓慢”。在敏捷开发的要求下,团队里唯一的 Java 专家对项目的复杂性表现得一无所措,因此他们决定试试 htmx。

九大数据提升

于是我们决定大胆尝试,花几个月时间用简单的 Django 模板和 htmx 替换掉了 SaaS 产品中已经使用两年的 React UI。这里我们分享了一些相关经验,公布各项具体指标,希望能帮同样关注 htmx 的朋友们找到说服 CTO 的理由!

  1. 这项工作共耗费了约 2 个月时间(使用 21K 行代码库,主要是 Java)
  2. 不会降低应用程序的用户体验(UX)
  3. 将代码库体积减小了 67%(由 21500 行削减至 7200 行)
  4. Python/ target=_blank class=infotextkey>Python 代码量增加了 140%(由 500 行增加至 1200 行);这对更喜欢 Python 的开发者们应该是好事
  5. 将 JS 总体依赖项减少了 96%(由 255 个减少至 9 个)

6. 将 Web 构建时间缩短了 88%(由 40 秒缩短至 5 秒)

7. 首次加载交互时间缩短了 50% 至 60%(由 2 到 6 秒,缩短至 1 到 2 秒)

8. 使用 htmx 时可以配合更大的数据集,超越 React 的处理极限

9. Web 应用程序的内存使用量减少了 46%(由 75 MB 降低至 40 MB)

这些数字令人颇为意外,也反映出 Contexte 应用程序高度契合超媒体的这一客观结果:这是一款以内容为中心的应用程序,用于显示大量文本和图像。很明显,其他 Web 应用程序在迁移之后恐怕很难有同样夸张的提升幅度。

但一些开发者仍然相信,大部分应用程序在采用超媒体 /htmx 方法之后,肯定也迎来显著的改善,至少在部分系统中大受裨益。

开发团队组成

可能很多朋友没有注意,移植本身对团队结构也有直接影响。在 Contexte 使用 React 的时候,后端与前端之间存在硬性割裂,其中两位开发者全职管理后端,一位开发者单纯管理前端,另有一名开发者负责“全栈”。(这里的「全栈」,代表这位开发者能够轻松接手前端和后端工作,因此能够在整个「栈」上独立开发功能。)

而在移植至 htmx 之后,整个团队全都成了“全栈”开发人员。于是每位团队成员都更高效,能够贡献出更多价值。这也让开发变得更有乐趣,因为开发人员自己就能掌握完整功能。最后,转向 htmx 也让软件优化度上了一个台阶,现在开发人员可以在栈内的任意位置进行优化,无需与其他开发者提前协调。

htmx 是传统思路的回归

如今,单页应用(SPA)可谓风靡一时:配合 React、Redux 或 Angular 等库的 JS 或 TS 密集型前端,已经成为创建 Web 应用程序的主流方式。以一个需要转译成 JS 的 SPA 应用为例:



但 htmx 风潮已经袭来,人们开始强调一种“傻瓜客户端”方法,即由服务器生成 html 本体并发送至客户端,意味着 UI 事件会被发送至服务器进行处理。



用这个例子进行前后对比,我们就会看到前者涉及的活动部件更多。从客户端角度出发,后者其实回避了定制化客户端技术,采取更简单的方法将原本只作为数据引擎的服务器变成了视图引擎。

后一种方法被称为 AJAX(异步 Java 与 XML)。这种简单思路能够让 Web 应用程序获得更高的响应性体验,同时消除了糟糕的“回发”(postback,即网页完全刷新),由此回避了极其低效的“viewstate”等.NET 技术。

htmx 在很多方面都体现出对 AJAX 思路的回归,最大的区别就是它仅仅作为新的声明性 html 属性出现,负责指示触发条件是什么、要发布到哪个端点等。

另一个得到简化的元素是物理应用程序的结构与构建管道。因为不再涉及手工编写 JS,而且整个应用程序都基于服务器,因此不再对 JS 压缩器、捆绑器和转译器做(即时)要求。就连客户端项目也能解放出来,一切都由 Web 服务器项目负责完成,所有应用程序代码都在.NET 之上运行。从这个角度来看,这与高度依赖服务器的 Blazor Server 编程模型倒是颇有异曲同工之妙。

技术和软件开发领域存在一种有趣的现象,就是同样的模式迭起兴衰、周而复始。随着 SPA 的兴起,人们一度以为 AJAX 已经过气了,但其基本思路如今正卷土重来。这其中当然会有不同的权衡,例如更高的服务器负载和网络流量(毕竟现在我们发送的是数据视图,而不只是数据),但能让开发者多个选择肯定不是坏事。

虽然不敢确定这种趋势是否适用于包含丰富用户体验的高复杂度应用程序,但毫无疑问,相当一部分 Web 应用程序并不需要完整的 SPA 结构。对于这类用例,简单的 htmx 应用程序可能就是最好的解决方案。

参考链接:

https://www.reddit.com/r/django/comments/rxjlc6/htmx_gaining_popularity_rapidly/

https://mekhami.Github.io/2021/03/26/htmx-the-future-of-web/

https://www.compositional-it.com/news-blog/more-on-htmx-back-to-the-future/

硅谷“网红”技术大牛 Steve Yegge:退休后面试工程主管,他们居然让我写点代码

智联招聘:Q3 全国平均招聘月薪 10168 元;曝特斯拉拒招小鹏前员工;英特尔或裁员数千人,国内公司涉多起劳动纠纷|Q 资讯

专访“MySQL 之父”:我曾创造 MySQL,也将颠覆 MySQL

另一种“推翻” VS Code 的尝试:JetBrains Fleet 现开放公测



Tags:Htmx   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
Htmx,它到底是框架还是库?
在最近的前端开发技术的探讨中,htmx经常成为热议的话题。一些人批评它,认为尽管htmx批评现代前端框架过于复杂,但它自己却似乎也是一个复杂的框架。这种看法值得我们深入思考。...【详细内容】
2024-03-28  Search: Htmx  点击:(17)  评论:(0)  加入收藏
前端工作方式要换了?HTMX简介:无需JavaScript的动态HTML
HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互,并支持许多其他交互需求,无需求助于 JavaScript。这是一个有趣的想法,可能...【详细内容】
2023-10-19  Search: Htmx  点击:(292)  评论:(0)  加入收藏
HTMX简介:无需借助JavaScript的动态HTML
译者 | 布加迪审校 | 重楼HTML让您可以使用扩展的HTML语法而不是JavaScript来实现交互性。HTMX直接在标记中为您提供了HTTP交互,它支持其他许多交互要求,无需借助JavaScript。...【详细内容】
2023-10-07  Search: Htmx  点击:(373)  评论:(0)  加入收藏
htmx:增强版 HTML 来了!
如今,Web 用户期望得到单页应用(SPA)提供的流畅、动态的体验。然而,创建 SPA 往往需要使用复杂的框架,如 React 和 Vue,学习和使用起来可能比较困难。这就是htmx的用武之地:一种通...【详细内容】
2023-09-03  Search: Htmx  点击:(221)  评论:(0)  加入收藏
Htmx意外走红,我们从React“退回去”后:代码行数减少 67%,JS 依赖项从 255 下降到 9
过去Web非常简单。URL 指向服务器,服务器将数据混合成 html,然后在浏览器上呈现该响应。围绕这种简单范式,诞生了各种Java框架,以前可能需要数月时间完成的一个应用程序基本功能,现在借助这些框架创建相对复杂的项目却只需...【详细内容】
2022-10-18  Search: Htmx  点击:(450)  评论:(0)  加入收藏
▌简易百科推荐
Htmx,它到底是框架还是库?
在最近的前端开发技术的探讨中,htmx经常成为热议的话题。一些人批评它,认为尽管htmx批评现代前端框架过于复杂,但它自己却似乎也是一个复杂的框架。这种看法值得我们深入思考。...【详细内容】
2024-03-28  前端达人  今日头条  Tags:Htmx   点击:(17)  评论:(0)  加入收藏
前端工作方式要换了?HTMX简介:无需JavaScript的动态HTML
HTMX允许你使用扩展的HTML语法代替 JavaScript 来实现交互性。HTMX 在标记中直接为你提供HTTP 交互,并支持许多其他交互需求,无需求助于 JavaScript。这是一个有趣的想法,可能...【详细内容】
2023-10-19  大迁世界  微信公众号  Tags:HTMX   点击:(292)  评论:(0)  加入收藏
HTMX简介:无需借助JavaScript的动态HTML
译者 | 布加迪审校 | 重楼HTML让您可以使用扩展的HTML语法而不是JavaScript来实现交互性。HTMX直接在标记中为您提供了HTTP交互,它支持其他许多交互要求,无需借助JavaScript。...【详细内容】
2023-10-07    51CTO  Tags:HTML   点击:(373)  评论:(0)  加入收藏
htmx:增强版 HTML 来了!
如今,Web 用户期望得到单页应用(SPA)提供的流畅、动态的体验。然而,创建 SPA 往往需要使用复杂的框架,如 React 和 Vue,学习和使用起来可能比较困难。这就是htmx的用武之地:一种通...【详细内容】
2023-09-03  前端充电宝  微信公众号  Tags:htmx   点击:(221)  评论:(0)  加入收藏
加入GitHub Accelerator,htmlx 2.0 要来了!
本文主要向大家介绍 htmlx 加入 GitHub Accelerator,关于 htmlx 的原理,以前有单独发表过文章介绍: 让 React 代码行数减少78%的 htmlx 有这么神?大家有感兴趣的可以阅读,话不多...【详细内容】
2023-08-25  高级前端进阶  今日头条  Tags:htmlx   点击:(365)  评论:(0)  加入收藏
爬虫解析HTML动态JS,技术应用揭秘
在当今互联网时代,大量的信息都储存在了各种网页中。而对于开发者、数据分析师和研究人员来说,获取并分析这些网页中的数据是非常重要的任务之一。然而,随着技术的不断发展,许多...【详细内容】
2023-06-29  反方向的鱼    Tags:HTML   点击:(220)  评论:(0)  加入收藏
利用ChatGPT辅助处理Html数据
使用chatgpt进行辅助编程首先要清晰描述自己需求,生成代码通过不断调试及优化,最终完成任务。有它,对程序员是好事也是坏事。一、确认功能请编程实现以下功能:1.所有html保存在a...【详细内容】
2023-05-31    51CTO  Tags:Html   点击:(422)  评论:(0)  加入收藏
一篇文章带你学会HTML以及最常用的标签
HTML是一种标记语言,用于创建网页。在本文中,我们将介绍HTML的基础知识,代码写入到本地文件,并以.html结尾,双击浏览器打开就可以查看效果。HTML文档结构HTML文档由标签组成,每个...【详细内容】
2023-05-16  你的老师父  今日头条  Tags:HTML   点击:(374)  评论:(0)  加入收藏
HTML代码混淆技巧:让爬虫无法抓取,保护你的网页!
随着互联网的发展,越来越多的网站开始使用爬虫技术来获取数据。但是,有些网站为了保护自己的数据安全,会对HTML代码进行混淆处理,使得爬虫无法直接抓取数据。本文将介绍HTML代码...【详细内容】
2023-04-13  倪沛童    Tags:HTML   点击:(239)  评论:(0)  加入收藏
HTML5第三节 初学者接触列表标签和div标签以及span标签
<ul> <li>为列表标签此为无序列表<type=“?”> <apuare>正方形<circle>空心圆环 <disc>默认 实心园 <ol> <li>为列表标签此为有序列表<type=“?”> <1> <a> <A>等 <dl> <dt>...【详细内容】
2023-02-07  那般热衷是你  今日头条  Tags:HTML5   点击:(228)  评论:(0)  加入收藏
相关文章
    无相关信息
站内最新
站内热门
站内头条