Table of contents
Open Table of contents
HTMX是如何改变我开发web的流程？
抛开传统的fetch或者ajax代码去获取服务器端数据，也不用流行框架自带的服务比如httpClient，useFetch以及第三方axios。我们可以直接在HTML中使用hx属性即可处理请求。
<button hx-get="/clicked" hx-swap="outerHTML">Click</button>
为什么HTMX和Django很搭？
或者其他SSR框架比如Flask, ASP.NET Core Blazor等等
我是一名python开发者，对Django也特别地依赖。之前的项目比如clipod，echostack都是用Django开发的。
作为一名独立开发者，我的主要目标还是快速试错迭代，尽量把精力放在产品开发上，而不是如何把代码写得让别人看得懂，模块化让耦合降低。因此我避免了Vue，Angular和React（虽然工作一直都是用Angular）。
在HTMX之前，一直都是用Vanilla JS，因为我觉得原生的API在mdn web docs的加持下几乎可以满足我所有的需求，虽然代码量会大一点。后来接触到HTMX之后发现，我艹，这妥妥的就是为了Django而生啊！以template的形式返回结果，替换局部页面，泰酷辣！
传统的PRG(POST/Redirect/Get)可以解决表单被重复提交的问题，但是全局刷新势必会带来额外的payload。虽然用Ajax的话，回调函数可以实现HTMX一样的效果（HTMX背后就是Ajax），但是需要写大量的代码。
综合以上，HTMX不仅可以实现局部刷新，又能减少代码量，何乐而不为呢？！
对于有些同仁来说，在web2.0时代，你说你的产品不是前端+API的架构，他们或许会嗤之以鼻。但我想说的是我的产品要的是快速迭代，满足客户的需求，不是跨平台，也不需要详尽的API测试。如果真的哪一天产品需要规模化或者需要重构了，只能说明产品被客户认可了，到那时再做也不迟。
为什么HTMX和Alpine.js很搭？
想必有人猜到了一些原因。没错！Alpine.js也可以用特殊属性来完成大多数数据绑定和用户交互的逻辑。
正因为如此，我不用在JS和HTML中来回切换，只需要在一个HTML文件中实现大部分的逻辑。而且HTMX的HX-Trigger和Apline.js的x-on结合地非常默契，特别是在触发消息弹框时非常好用。
为什么HTMX和tailwindcss很搭？
熟悉tailwindcss的同仁肯定也猜到原因了。对的，“大饼卷一切”，我们用HTML实现了所有的前端逻辑和渲染。
缺点
凡事都有两面性，这一套框架不可能完美无缺。首当其冲的就是臃肿的HTML，因为结合了tailwindcss和Alpine.js，一个父节点可能既有大量的style class，又有组件的初始化和内部方法。这就导致代码看上去比较杂乱，我截取了一部分示例代码，如下：
<div class="task-form-htmx">
<form x-data={ open: false }>
{% csrf_token %}
{{ form|crispy }}
<button class="btn-blue"
hx-post="{% url 'modal-task-create-htmx' %}"
hx-swap="outerHTML"
hx-target=".task-form-htmx"
>
<svg class="htmx-indicator animate-spin -ml-1 mr-3 h-5 w-5 text-white" xmlns="http://www.w3.org/2000/svg" fill="none"
viewBox="0 0 24 24">
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
<path class="opacity-75" fill="currentColor"
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
</svg>
Submit
</button>
</form>
</div>其次，因为代码的臃肿会导致和别人共同开发时带来一些麻烦，比如对code reviewer不友好，前端调试不友好。
当然，对我个人而言，比起在js/ts，css和html中跳转，我更喜欢单个html。而且，现在又涌现出了daisyUI和shadcn/ui，它们简化了tailwindcss，提供了现成的组件，配置好后就可以复制黏贴了。个人开发的好处也正是想怎么写就怎么写，没有code review，后果就是“苦果子都得自己吃，坑得自己填”。
总结
这些是我个人的使用感想，适用性也比较窄，若您正好有和我一样的使用习惯，欢迎一起探讨，一起学习！别忘了“一键三连”，哦不，是别忘了关注我的X，哈哈哈哈哈哈哈