htmx 只是另一个 JavaScript 框架吗?老外都吵上了

对 htmx 最常见的批评之一通常来自第一次听说它的人,如下所示:

你抱怨现代前端框架的复杂性,但你的解决方案只是另一个复杂的前端框架。

这是一个很好的反对意见!对于你引入到项目中的任何第三方 (3P) 代码,你都有权提出疑问。即使你没有亲自编写 3P 代码,但只要将其纳入项目,你就必须了解它–如果你想升级它,就必须重新了解它。

让我们将这些批评分解成其组成部分,并确定htmx在其声称要解决的伤害中到底有多少沉迷其中。

库和框架的区别

一些 htmx 捍卫者向我们求助:“htmx 不是一个框架,它是一个库。”这可能是不正确的。

“框架”是一个口语术语——对于某些第三方代码从“库”演变为“框架”的程度没有硬性规定——但我们仍然应该尝试定义它。在这种情况下:

  • - 3P 代码,其 API 不会显着影响应用程序的其余部分
  • 框架 - 3P 代码,其 API 决定应用程序的整体结构

如果你更喜欢比喻:库是你添加到机器上的一个齿轮,框架是一个预先构建的机器,你可以通过自定义其齿轮来控制它。

这种区别虽然可能很模糊,但很重要,因为它描述了替换某些第三方代码的容易程度。例如,使用 CSV 解析库的 JavaScript 服务可能可以轻松地交换不同的 CSV 解析库;然而,使用 NextJS 框架的 JavaScript 服务可能在其整个使用寿命中都依赖于 NextJS,因为大量代码是在假设它与 NextJS 结构交互的情况下编写的。

因此,如果你的服务是在框架之上构建的,则其使用寿命与该框架的使用寿命相关。如果该框架被放弃,或被鄙视,或以其他方式不受欢迎,那么修改项目的难度将稳步增加,直到你放弃修改它,并最终将其完全封存。

这就是人们在问“htmx 只是另一个 JavaScript 框架吗?”时所担心的问题。他们希望确保自己不会致力于一个很快就会过时的系统,就像过去的许多 Web 开发框架一样。

那么:htmx是一个框架吗?它是否会很快被淘汰,在其迅速消亡后留下一系列无法​​维护的网站?

htmx(通常)是一个框架

对我们社区关于这个问题的持续争论表示歉意——我认为 htmx 显然是一个框架,至少在大多数用例中是这样。但这确实取决于你如何使用它。

无论你在项目中的何处使用 htmx,你都会在 HTML 中包含 htmx 属性(即 hx-posthx-target ),编写使用 htmx 格式数据调用的端点(使用某些请求标头),并从这些端点返回以 htmx 期望的方式格式化的数据(带有 hx-* 控件的 HTML)。所有这些属性以及标头和端点相互交互以创建一个系统,元素通过该系统通过网络请求进入和退出 DOM。

如果你使用 htmx 来处理网站的大量网络请求,那么在应用程序中包含 htmx 会对项目的结构产生重大影响,从构建前端标记的方式到端点进行的数据库查询。这是类似框架的行为,在这种情况下,htmx 不能轻易被替换。

你绝对可以以类似库的方式使用 htmx,为网页的几个部分添加动态功能。但你也可以用这种类似于库的方式编写 React,没有人会说 React 不是一个框架。我只想说,许多在应用程序中使用 htmx 的人都是为了满足 htmx 的需求,将其作为构建超媒体应用程序的框架。

如果能发挥 htmx 的优势,那么使用 htmx 构建程序的效果会更好。如果你真的坚持,可以发送 JSON 格式的表单体。但你不应该这样做!application/x-www-form-urlencoded 格式的表单体并编写一个可接受它们的端点会更简单。如果你真的坚持,你可以编写一个在多个不同客户端之间重复使用的端点。但你不应该这样做!将数据和超媒体 API 分离到不同的 URL 中会更简单。是的,htmx 可以作为一个库使用,但或许也可以让它成为你的框架。

然而,这并不意味着 htmx 只是另一个 JavaScript 框架,因为 htmx 具有其他框架没有的巨大优势:HTML。

htmx 用于编写 HTML

假设你使用 htmx 作为框架 - 它是 JavaScript 框架吗?从一种明显的意义上来说,是的:htmx 是用大约 4k 行 JS 实现的。但从另一个更重要的意义上来说,它不是:React、Svelte、Solid 等等,你写的 JS(X) 框架会转换成 HTML; htmx 只是让你编写 HTML。这就免去了可能会让你放弃其他框架的各种维护工作。

当你想要升级或更改某些依赖项,但你使用的框架与该更改不兼容时,代码库往往会陷入困境。 Java 是这里最臭名昭著的罪犯——生产中有数百万行 Java 永远不会离开 Java 8,因为升级 Spring 太难了——但 npm 包生态系统紧随其后。当你使用 htmx“框架”时,你永远不会遇到这个问题,因为 htmx 是一个零依赖、客户端加载的 JavaScript 文件,因此保证它永远不会与你的服务器所依赖的任何构建过程或依赖链发生冲突。

浏览器渲染 HTML,因此无需编译器或转译器即可使用 htmx。虽然许多 htmx 用户很乐意使用 JSX 渲染 API 响应,但 htmx 与经典模板引擎配合得很好,使其可移植到你喜欢的任何语言。不管你对 Django 和 Rails 有何看法,但它们在 2008 年和今天都很重要 — htmx 与它们无缝集成。这是 htmx 驱动开发的一个反复出现的主题:htmx 与新旧开发工具都能很好地配合,因为所有这些工具的共同点是 HTML,而 htmx 是用于编写 HTML 的。

推动用户主要通过 HTML 而不是 JS 来定义其应用程序的行为有太多优点,本文无法一一介绍,因此我将重点谈谈人们最痛恨的 JavaScript 成名之作:“churn”。根据你编写 React 应用程序的时间,你可能在编写表单时使用了受控类组件、react Hooks 或这种实验性的 <form> 扩展。这确实让人抓狂,尤其是如果你和我一样,最初是通过类组件学习如何制作网络表单的。

然而,无论你是何时编写的 htmx 应用程序,htmx 表单的行为都是以与普通 HTML 表单大致相同的方式定义的:使用 <form>。随着 htmx 增加了额外的网络功能,你终于可以使用 PUT 请求并控制响应的去向,但在所有其他方面–验证、输入、标签、自动完成–你都只能使用默认的 <form> 元素行为。

最后,因为 htmx 只是在一个非常狭窄的域中扩展 HTML(网络请求和 DOM 替换),所以你编写的大多数“htmx”只是普通的旧 HTML。当你可以访问复杂的状态管理机制时,实现自定义可折叠 div 变得非常容易;如果不这样做,你可能会停下来足够长的时间来搜索 <details> 元素。每当问题可以通过本机 HTML 元素解决时,代码的寿命就会大大提高。这是一种学习 Web 开发的不太陌生的方式,因为只要 HTML 存在,你的大部分知识就将保持相关性。

在这方面,htmx 比 React 更像 jQuery(htmx 的前身 intercooler.js 是 jQuery 扩展),但它通过使用声明性的、基于 HTML 的界面对 jQuery 进行了改进:jQuery 让你转到 <script> 标签来指定AJAX行为,htmx只需要一个简单的 hx-post 属性。

简而言之,虽然 htmx 可以用作框架,但与 JavaScript 框架相比,它与 Web 语义的偏差要小得多,并且将受益于这些语义的改进,而无需用户进行额外的工作,这要归功于 Web 的出色性能向后兼容性保证。如果你想建立一个持续很长时间的网站,这些品质使 htmx 成为比许多同时代网站更好的选择。

注:尽管卡森(Carson)同意这一分析,认为这篇文章没有逻辑缺陷,并允许我在他的网站上发表,但他仍然坚持认为 htmx 是一个库。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/624109.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS 开发基础(八)Row和Column

HarmonyOS 开发基础&#xff08;八&#xff09;Row和Column 一、Column 容器 1、容器说明&#xff1a; 纵向容器主轴方向&#xff1a;从上到下纵向交叉轴方向&#xff1a;从左到右横向 2、容器属性&#xff1a; justifyContent&#xff1a;设置子元素在主轴方向的对齐格式…

实例分割论文精读:Mask R-CNN

1.摘要 本文提出了一种概念简单、灵活、通用的实例分割方法&#xff0c;该方法在有效地检测图像中的物体同时&#xff0c;为每个物体实例生成一个实例分割模板&#xff0c;添加了一个分支&#xff0c;用于预测一个对象遮罩&#xff0c;与现有的分支并行&#xff0c;用于边界框…

零知识证明的最新发展和应用

PrimiHub一款由密码学专家团队打造的开源隐私计算平台&#xff0c;专注于分享数据安全、密码学、联邦学习、同态加密等隐私计算领域的技术和内容。 当企业收集大量客户数据去审查、改进产品和服务以及将数据资产货币化时&#xff0c;他们容易受到网络攻击威胁&#xff0c;造成数…

RC4加解密源码

本文介绍RC4加解密源码。 RC4&#xff08;来自Rivest Cipher 4的缩写&#xff09;是一种流加密算法&#xff0c;密钥长度可变。它加解密使用相同的密钥&#xff0c;因此也属于对称加密算法。RC4具有加解密速度快&#xff0c;算法简单等优点&#xff0c;在算力不高场合&#xf…

昇腾910b部署Chatglm3-6b进行流式输出【pytorch框架】NPU推理

文章目录 准备阶段避坑阶段添加代码结果展示 准备阶段 配套软件包Ascend-cann-toolkit和Ascend-cann-nnae适配昇腾的Pytorch适配昇腾的Torchvision Adapter下载ChatGLM3代码下载chatglm3-6b模型&#xff0c;或在modelscope里下载 避坑阶段 每个人的服务器都不一样&#xff0…

Pixart PAR2861 蓝牙 keyboard 开发笔记

Pixart PAR2861 是一款采用32 bits ARM Cortex-M0 低功耗、高效能 2.4GHz RF 的 SoC。 该 SoC 整合了高效能的 2.4GHz RF 收发器、硬体Keyscan、硬体按键防弹跳、SPI、I2C、PWM LED、ADC、UART等。内建 DC/DC 转换器和 LDO 为独立 HID 应用提供完整的低功耗 SoC 解决方案。 1.…

2023年网络安全事件处罚盘点,文件销毁 硬盘销毁 物料销毁

《中华人民共和国网络安全法》是我国第一部全面规范网络空间安全管理方面问题的基础性法律&#xff0c;是我国网络空间法治建设的重要里程碑&#xff0c;《中华人民共和国网络安全法》从2013年下半年提上日程&#xff0c;到2016年年底颁布&#xff0c;自2017年6月1日起施行&…

滑动登陆注册同页面

这是一个登陆注册在同一个页面滑动选择的页面 技术&#xff1a;html、css、javascript 简单页面实现&#xff08;为了方便&#xff0c;已将代码放在同一文件引用&#xff09;&#xff1a; 1.1、效果图 1.2、完整代码&#xff1a; <!DOCTYPE html> <html lang"…

virtualbox Ubuntu 网络连接

一、网络连接需求1—— 上网&#xff1a; 虚拟机默认的NAT连接方式&#xff0c;几乎不需要怎么配置&#xff0c;即可实现上网。 enp0s17以太网必须要开启&#xff0c;才能上网&#xff1b; 但是主机ping不通虚拟机&#xff0c;貌似可以ping 127.0.0.1; 二、主机和虚拟机相互p…

语境化语言表示模型-ELMO、BERT、GPT、XLnet

一.语境化语言表示模型介绍 语境化语言表示模型&#xff08;Contextualized Language Representation Models&#xff09;是一类在自然语言处理领域中取得显著成功的模型&#xff0c;其主要特点是能够根据上下文动态地学习词汇和短语的表示。这些模型利用了上下文信息&#xf…

DrGraph原理示教 - OpenCV 4 功能 - 形态操作

形态类型 从OpenCV图像处理基本知识来看&#xff0c;膨胀腐蚀操作后&#xff0c;还有形态操作&#xff0c;如开运算、闭运算、梯度、礼帽与黑帽&#xff0c;感觉很多&#xff0c;其实&#xff0c;本质上就是批处理操作&#xff0c;如 开运算&#xff1a;先腐蚀&#xff0c;再膨…

大模型LLM Agent在 Text2SQL 应用上的实践

1.前言 在上篇文章中「如何通过Prompt优化Text2SQL的效果」介绍了基于Prompt Engineering来优化Text2SQL效果的实践&#xff0c;除此之外我们还可以使用Agent来优化大模型应用的效果。 本文将从以下4个方面探讨通过AI Agent来优化LLM的Text2SQL转换效果。 1 Agent概述2 Lang…

肯尼斯·里科《C和指针》第6章 指针(3)

肯尼斯里科《C和指针》第6章 指针&#xff08;1&#xff09;-CSDN博客 肯尼斯里科《C和指针》第6章 指针&#xff08;2&#xff09;-CSDN博客 前置知识&#xff1a;左值右值 为了理解有些操作符存在的限制&#xff0c;必须理解左值(L-value)和右值(R-value)之间的区别。这两个…

2024年百场进校公益安全培训开启

自2023年年底&#xff0c;上海风暴救援队积极策划并推动了2024年的“百场进校传安全”培训项目。经过在东方锦绣于2023年12月14日、上钢新村幼儿园于2023年12月28日的先期测试&#xff0c;项目于2024年1月5日在齐河路幼儿园正式启动。随后&#xff0c;于2024年1月11日在浦南幼儿…

顺序表和链表基础

定义动态的顺序表 typedef int SLDataType; typedef struct Seqlist {SLDataType* array;size_t size;size_t capacity; }Seqlist; 在顺序表中插入数据 bool ListInsert(Seqlist* l, int i, SLDataType e) {if (i < 1 || i > l->capacity)return false;int j;for (…

【大数据进阶第三阶段之Hue学习笔记】Hue的安装和使用

1、 Hue的安装 1.1 上传解压安装包 Hue的安装支持多种方式&#xff0c;包括rpm包的方式进行安装、tar.gz包的方式进行安装以及cloudera manager的方式来进行安装等&#xff0c;我们这里使用tar.gz包的方式来进行安装 Hue的压缩包的下载地址&#xff1a; http://archive.cloude…

python绘制热力图-数据处理-VOC数据类别标签分布及数量统计(-代码)

Python是一种功能强大的编程语言&#xff0c;它提供了许多库和工具&#xff0c;用于处理和可视化数据。在本文中&#xff0c;我们将介绍使用Python绘制热力图&#xff0c;并对VOC数据集中的类别标签进行分布及数量统计。 首先&#xff0c;我们需要导入所需的库。使用numpy库来…

查找算法(部分)

顺序查找 顺序查找是最简单的了&#xff0c;属于无序查找算法&#xff0c;它的原理就是从前往后一个一个的找&#xff0c;如果找到了就返回它的位置&#xff0c;否则就返回-1。 如果有多个相同元素的话&#xff0c;返回第一个该元素的位置。 代码&#xff1a; #include<…

Vue3 中使用 Vuex 和 Pinia 对比之 Vuex的用法

本文基于 Vue3 的 composition API 来展开 Vuex 和 Pinia 的用法比较 Pinia传送门 Vuex传送门 Vuex 状态管理的核心概念 状态- 驱动应用的数据源&#xff1b;视图 - 以声明方式将状态映射到视图&#xff1b;操作 - 响应在视图上的用户输入导致的状态变化 下面是源自Vuex 官…

进口零部件三维模型扫描替换抄数建模逆向造型设计服务CASAIM

三维扫描技术在现代制造业中发挥着越来越重要的作用&#xff0c;尤其在零部件建模领域&#xff0c;它能够快速、准确地获取物体的三维数据&#xff0c;为后续的逆向工程和快速原型制造提供了有力支持。 CASAIM三维扫描仪设备通过对零部件进行三维扫描&#xff0c;我们可以获得…