请尝试 Htmx。
Please just try HTMX

原始链接: http://pleasejusttryhtmx.com/

## HTMX:对简洁的呼吁 本文论述了开发者应该考虑HTMX,这是一个允许HTML元素发起HTTP请求并将内容直接交换到页面中的库——有效地在无需复杂JavaScript框架的情况下添加交互性。作者批判了当前的Web开发环境,将其描述为在有限的原始HTML和React、Vue或Angular等框架的巨大复杂性之间的虚假选择。 HTMX提供了一个中间地带:使用HTML属性触发服务器请求,返回HTML片段,动态更新页面。这种方法拥有极小的库大小(约14kb),消除了构建步骤和大量的依赖列表,并促进了“行为的局部性”——使代码更易于理解和维护。 一家公司使用HTMX重建了一个SaaS应用程序,取得了显著的改进:代码减少了67%,依赖项减少了96%,构建速度提高了88%,页面加载速度提高了50-60%。虽然不适合像Google Docs这样高度复杂的应用程序,但HTMX在表单、列表和仪表板等常见任务中表现出色,为许多Web项目提供了一个更简单、更快、更易于维护的解决方案。作者敦促开发者仅仅*尝试* HTMX,即使在一个小型项目上,也能亲身体验其好处。

## HTMX 在 Hacker News 上的讨论 一篇最近推广 HTMX 的文章在 Hacker News 上引发了热烈讨论,HTMX 的作者 iNic 对对其优越性的夸大说法表示不满。讨论的核心在于 HTMX 是否代表了 Web 开发的重大转变,还是仅仅是另一种具有特定优缺点的新工具。 许多评论者同意 HTMX 在简单用例中表现出色,减少了对 JavaScript 的依赖。然而,人们对它在复杂应用程序中的可扩展性和可维护性表示担忧,可能导致代码脆弱。一些人认为坚持使用 React 等成熟框架更实用,而另一些人则强调了服务器端渲染 HTML 以及避免大型 JavaScript 包的好处。 Turbo 和 Unpoly 等替代方案也被提及。一个关键点是需要对后端进行调整才能充分利用 HTMX,并且在采用它之前需要考虑项目的整体复杂性。最终,共识倾向于 HTMX 是一种有价值的工具,但并非通用解决方案,而“最佳”方法很大程度上取决于具体的项目需求。
相关文章

原文
Please Just Fucking Try HTMX

A measured-yet-opinionated plea from someone who's tired of watching you suffer

Look. I'm not going to call you a fucking moron every other sentence. That's been done. It's a whole genre now. And honestly? HTMX doesn't need me to scream at you to make its point.

The sweary web manifesto thing is fun—I've enjoyed reading them—but let's be real: yelling "JUST USE HTML" or "JUST FUCKING USE REACT" hasn't actually changed anyone's stack. People nod, chuckle, and then go right back to fighting their raw JS or their webpack config.1

So I'm going to try something different. I'll still swear (I'm not a fucking saint), but I'm also going to show you something, in the course of imploring you, for your own sanity and happiness, to at least please just try htmx.

The False Choice

Right now, the shouters are offering you two options:

Option A: "Just use HTML!" And they're not wrong. HTML is shockingly capable. Forms work. Links work. The <dialog> element exists now. The web was built on this stuff and it's been chugging along since Tim Berners-Lee had hair. And a little tasteful CSS can go a long motherfucking way.

But sometimes—and here's where it gets uncomfortable—you actually do need a button that updates part of a page without reloading the whole damn thing. You do need a search box that shows results as you type. You do need interactivity.

So you turn to:

Option B: React (or Vue, or Svelte, or Angular if you're being punished for something).

And suddenly you've got:

  • A package.json with 847 dependencies
  • A build step that takes 45 seconds (if the CI gods are merciful)
  • State management debates polluting your pull requests
  • Junior devs losing their minds over why useEffect runs twice
  • A bundle size that would make a 56k modem weep

For what? A to-do list? A contact form? A dashboard that displays some numbers from a database?

This is the false choice: raw HTML's limitations or JavaScript framework purgatory.

There's a third option. I'm begging you, please just try it.

HTMX: The Middle Path

What if I told you:

  • Any HTML element can make an HTTP request
  • The server just returns HTML (not JSON, actual HTML)
  • That HTML gets swapped into the page wherever you want
  • You write zero JavaScript
  • The whole library is ~14kb gzipped

That's HTMX. That's literally the whole thing.

Here's a button that makes a POST request and replaces itself with the response:

<button hx-post="/clicked" hx-swap="outerHTML">
    Click me
</button>

When you click it, HTMX POSTs to /clicked, and whatever HTML the server returns replaces the button. No fetch(). No setState(). No npm install. No fucking webpack config.

The server just returns HTML. Like it's 2004, except your users have fast internet and your server can actually handle it. It's the hypermedia architecture the entire freaking web was designed for, but with modern conveniences.

Don't Believe Me? Click Things.

This page uses HTMX. These demos actually work.

Demo 1: Click a Button

This button makes a POST request and swaps in the response:

Demo 2: Load More Content

This button fetches additional content and appends it below:

Here's some initial content.

That's HTMX. I didn't write JavaScript to make those work. I wrote HTML attributes. The "server" (mocked client-side for this demo, but the htmx code is real) returns HTML fragments, and HTMX swaps them in. The behavior is right there in the markup—you don't have to hunt through component files and state management code to understand what a button does. HTMX folks call this "Locality of Behavior" and once you have it, you'll miss it everywhere else.

The Numbers

Anecdotes are nice. Data is better.

A company called Contexte rebuilt their production SaaS app from React to Django templates with HTMX. Here's what happened:

67%

less code

(21,500 → 7,200 lines)

96%

fewer JS dependencies

(255 → 9 packages)

88%

faster builds

(40s → 5s)

50-60%

faster page loads

(2-6s → 1-2s)

They deleted two-thirds of their codebase and the app got better. Every developer became "full-stack" because there wasn't a separate frontend to specialize in anymore.

Now, they note this was a content-focused app and not every project will see these exact numbers. Fair. But even if you got half these improvements, wouldn't that be worth a weekend of experimentation?

For the Skeptics

"But what about complex client-side state management?"

You probably don't have complex client-side state. You have forms. You have lists. You have things that show up when you click other things. HTMX handles all of that.

If you're building Google Docs, sure, you need complex state management. But you're not building Google Docs. You're building a CRUD app that's convinced it's Google Docs.

"But the React ecosystem!"

The ecosystem is why your node_modules folder is 2GB. The ecosystem is why there are 14 ways to style a component and they all have tradeoffs. The ecosystem is why "which state management library" is somehow still a debate.

HTMX's ecosystem is: your server-side language of choice. That's it. That's the ecosystem.

"But SPAs feel faster!"

After the user downloads 2MB of JavaScript, waits for it to parse, waits for it to execute, waits for it to hydrate, waits for it to fetch data, waits for it to render... yes, then subsequent navigations feel snappy. Congratulations.

HTMX pages load fast the first time because you're not bootstrapping an application runtime. And subsequent requests are fast because you're only swapping the parts that changed.

"But I need [specific React feature]!"

Maybe you do. I'm not saying React is never the answer. I'm saying it's the answer to about 10% of the problems it's used for, and the costs of reaching for it reflexively are staggering.

Most teams don't fail because they picked the wrong framework. They fail because they picked too much framework. HTMX is a bet on simplicity, and simplicity tends to win over time.

When NOT to Use HTMX

I'm not a zealot. HTMX isn't for everything.

  • Real-time collaborative editing (Google Docs, Figma)
  • Heavy client-side computation (video editors, CAD tools)
  • Offline-first applications (though you can combine approaches)
  • Genuinely complex UI state (not "my form has validation" complex—actually complex)

But be honest with yourself: is that what you're building?

Or are you building another dashboard, another admin panel, another e-commerce site, another blog, another SaaS app that's fundamentally just forms and tables and lists? Be honest. I won't tell anyone. We all have to pay the bills.

For that stuff, HTMX is embarrassingly good. Like, "why did we make it so complicated" good. Like, "oh god, we wasted so much time" good.

So Just Try It

You've tried React. You've tried Vue. You've tried Angular and regretted it. You've tried whatever meta-framework is trending on Hacker News this week.

Just try HTMX. One weekend. Pick a side project. Pick that internal tool nobody cares about. Pick the thing you've been meaning to rebuild anyway.

Add one <script> tag. Write one hx-get attribute. Watch what happens.

If you hate it, you've lost a weekend. But you won't hate it. You'll wonder why you ever thought web development had to be so fucking complicated.

Learn more:
htmx.org — The official site and docs
hypermedia.systems — The free book on hypermedia-driven apps


联系我们 contact @ memedata.com