之前，我写过一篇文章：《为什么前端开发变得越来越复杂了？这可能是我们的错》。

在那篇文章里，咱们聊到了一件让很多同学都深有感触的事：前端学起来越来越“头大”了。从最初的 Angular、到后来的 React、Vue、再到 Svelte、Solid...

前端框架一个接一个，生态工具也是层出不穷。每个都说自己比别人简单，但是整个项目却变得越来越大....

弄到现在，做个小功能，都得引入一大堆的库才行，各种依赖导致出现各种巨大的 node_modules。不知道还有多少同学记得下面这张图...

不过，物极必反，盛极必衰。当复杂度超过了一定的界限之后，接下来大家就会开始调转方向，来思考如何解决 “复杂” 的这个问题，就好像一个轮回一样。

这不，最近有不少同学提到 htmx，这个只有 14KB 的小工具。不用 npm、不用构建工具，甚至几乎不用写 JS，只要在 HTML 上加几个属性，就能实现 Ajax、懒加载、甚至 WebSocket。

挺有意思的，对吧。

所以，今天这篇文章，咱们就来看看 htmx，顺道琢磨下 从 jQuery 到 htmx，前端到底经历了怎样的复杂度轮回？

1. jQuery 的极简时代

如果你是 2010 年前后开始接触前端开发的同学，应该对 jQuery 这个名字非常熟悉。

那时候的前端是什么样子？

• 浏览器之间“互相不待见”：IE6 一家独大，还要兼容 Firefox、Safari。
• 写个 Ajax 要 20 多行代码，还得写 if-else 来区分不同浏览器 API。
• 操作 DOM 像拆炸弹，一不小心就各种报错。

就在这种背景下，2006 年 John Resig 发布了 jQuery。

结果呢？简直是 降维打击：

• 选择器简化：

$('.btn')

就能替代冗长的 document.getElementsByClassName。

• Ajax 统一（那时候还没有 axios）：

$.ajax({ url: '/api/data', success: fn })

跨浏览器差异？一行代码全解决。

• 链式调用：

$('#box').addClass('active').fadeIn().slideDown()

一口气把多个操作串起来。

再加上爆炸式的插件生态，什么轮播图、模态框、富文本编辑器……几乎你能想到的效果，都有人帮你写好封装。拷贝一段代码，就能立刻上线。

最夸张的时候，全世界 90% 的网站都在用 jQuery。微软、Google 把它放进官方 CDN，Visual Studio 直接内置为默认库。哪怕是现在，依然有很多网站还在使用 jQuery。具体可以参考我之前写的这篇文章 2025 了，jQuery 还有价值吗？

在当年，那句著名的口号：Write Less, Do More 完美地诠释了 jQuery 所代表的“极简时代”。

2. 各种框架开始崛起

但好景不长。

随着 Web 应用的规模越来越大，前端不再只是写几个动效、搞搞 Ajax 请求，而是要承担起 单页面应用（SPA） 的重任：路由、状态同步、组件复用……一大堆问题涌了上来。

这时候，Angular、React、Vue 等框架陆续登场，前端正式进入了“框架时代”。

但是，复杂度也随之而来

• 构建工具越来越重：从 Grunt、Gulp 到 Webpack，再到 Vite。光是配置文件，就能写出 200 行。
• 状态管理成了新坑：Redux、MobX、Vuex、Pinia、Zustand……一个比一个复杂。
• 生态洪水泛滥：写个表单，要引入三四个库；做个 SSR，还得选择 Next、Nuxt、Remix。
• TypeScript 绑架：简单项目也要 interface、类型声明一大堆。

有个段子说得特别形象：

2015 年用 jQuery 写一个后台管理系统，1000 行代码搞定。2020 年用 React + TS + Redux，写了 5000 行，还没调通状态更新。

再然后 “框架疲劳” 开始出现了 Angular -> React -> Vue、React class -> React Hooks、Vue Options -> Vue Compositions，还有一些新的竞争者 Solid、Svelte 等

框架迭代速度比项目周期还快，很多同学产生了强烈的 “学不动了” 的焦虑感。

更尴尬的是，其实 很多的业务其实并不需要这么复杂的框架。

比如：一个内部管理系统，几张表单、几个表格，结果却被硬生生套上全家桶，node_modules 百 MB 起步，首屏还要加载好几秒。。。

3. 物极必反 htmx

复杂到一定程度，行业自然会开始反思：我们是不是走得太远了？

就在大家被各种框架和工具折腾得头大时，又有一个新的东西 htmx 开始被很多同学提到了。

htmx 到底是什么？

一句话总结：让 HTML 重新拥有超能力。

• 体积只有 14KB，引入 CDN 即可使用；
• 不需要 npm、不需要打包工具；
• 很多场景下甚至不用写一行 JavaScript；
• 只要在标签里加几个 hx-* 属性，就能完成异步请求、懒加载、甚至 WebSocket。

比如我们要做一个点赞按钮：

<button hx-post="/like" hx-swap="outerHTML">点赞</button>

点击后会自动发送 POST 请求，后端返回新的 HTML 片段，htmx 会直接替换按钮区域。

是不是有点 jQuery 那味儿？

所以，有人调侃它是 “jQuery 的精神续作” 😂😂

4. jQuery VS 框架 VS htmx

说到这，咱们不妨把 jQuery、现代框架、htmx 放在一起横向对比一下，看看它们各自的定位：

最后总结一下

前端复杂度，本质上就是在 简单 ↔ 复杂 之间不断循环。

jQuery 代表了“从复杂到简单”，框架代表了“从简单到复杂”。

而 htmx 现在还真不好说，也许 它意味着一种新的“轮回”，也许 它也只是昙花一现......

阅读原文：原文链接