HTML 优先，框架次之：JavaScript 终于成长起来了吗？

本文最初发布于 THENEWSTACK 博客。

图片来自 Unsplash+，由 Katelyn Perry 上传

长期以来，JavaScript一直是现代Web的主角，被用来在浏览器中构建各种规模的应用。但最近，一种相反的趋势正在悄悄兴起。开发者们正在回归HTML优先的方法——更快、更简单、更有弹性。

不再默认使用框架，越来越多的团队再次将HTML和CSS视为一等公民，只有在真正需要增强体验时才依赖 JavaScript。这不是怀旧，而是一个经过深思熟虑的修正。现在，真正的问题是：这种转变是 JavaScript 成熟的标志，还是一种更为脚踏实地的 Web 开发哲学的兴起？

框架后遗症

十多年来，Web 开发一直深陷 JavaScript 优先的思维。随着单页应用（SPA）的兴起，JavaScript 不再只是一种脚本语言，而是成了整个前端的基础——以至于 HTML 和 CSS 常常由 JavaScript 生成、由 JavaScript 操作，甚至被 JavaScript 抽象所取代。我们告诉自己这是进步，为开发体验做出的这些权衡是值得的。

在某些方面，确实如此。SPA 让我们能够构建动态交互式界面。像 React 这样的框架给了我们比静态 HTML 模板更强大的组件模型。但我们走得太远了。应用因为没有 JavaScript 而崩溃。页面在水合完成之前一片空白。整个内容部分爬虫或屏幕阅读器都无法访问。曾经旨在增强用户体验的东西已经成为可能给它带来破坏的依赖项。

开发人员变成了运维工程师——管理构建管道、webpack 配置、打包工具、Tree Shaking 和水合策略。一个原本简单的网站现在成了一个基于 JS 的有几十个活动部件的机器。结果呢？性能更差，学习曲线更陡峭，Web越来越多地迎合开发者而不是用户。潜在的问题日益显现：我们是在解决正确的问题，还是在构建更复杂的解决方案？

除了像Elixir这样的创新型解决方案，许多开发者现在正在回归古老而可靠的 HTML。

HTML 优先工具的崛起

像Astro、HTMX、Enhance和MarkoJS这样的新工具及其开发哲学正在颠覆传统的前端范式。它们不是从框架开始，而是从干净的语义化 HTML 开始，并逐步用 JavaScript 增强。它们关注的是速度、可访问性和简单性。

以 Astro 为例，它默认不包含任何JavaScript，让开发者根据需要来引入。你主要是编写 HTML 和 CSS，只在有交互要求时才使用客户端水合组件。这不是回归静态网站，而是一种更为深思熟虑的、性能优先的架构。

与此同时，HTMX 允许你通过网络发送 HTML，并使用属性声明性地附加行为。它优雅、简洁，可以非常有效地构建交互式应用，而不需要使用完整的 JS 框架。

这些工具不仅仅是为开发人员提供了新的选项，它们还标志着更深层次的文化转变，即认识到 Web 的基础语言 HTML 仍然可以上头版头条。

JavaScript 的成熟时刻

JavaScript 不会因此消失，相反，它正在逐步进化。它的角色正在从“随时随地渲染一切”转变为“在重要的时候提供增强”。从许多方面来看，这都是成熟的标志。JS 并没有被抛弃，只是（终于）被要求表现得更成熟。

例如，服务器端渲染（SSR）在Next.js和SvelteKit等工具的推动下卷土重来。即使是传统上重度依赖 JS 的框架也在调整适应：React Server Components、Remix对服务器的强调和更轻量化的 Vue 生态系统，这反映了一种广泛存在的愿望，即控制客户端膨胀。

随着对分布式拒绝服务（DDoS）攻击的担忧日益增加，现代 JavaScript 生态系统正在拥抱 SSR 和边缘计算，为的是减少攻击面，分散工作负载瓶颈，并缓解客户端漏洞。

默认思维模式正在发生转变，即鼓励开发者优先使用原生浏览器功能：HTML 用于内容，CSS 用于样式，JavaScript 用于交互（仅在必要时）。这种发展变化再现了许多现代开发者在框架潮流中忽视的渐进增强和可访问性理念。

这种转变为何重要？

这不仅仅是一场关于开发者偏好的辩论，还是一场直接影响用户的对话。HTML 优先的设计加载更快，降级体验更好，与搜索引擎和辅助技术更搭配。网站变得更富有弹性，更易于维护，通常构建过程也更令人愉快。

其次，你还必须考虑一种将Core Web Vitals作为排名因素的新兴趋势，或者无处不在的移动优先性能预算。开发者不再仅根据功能进行评判，他们还要根据这些功能的实现效率和表现进行评判。HTML 优先方法完美地契合了这一现实。

此外，它还降低了入门门槛。新手可以在不受 webpack 配置或 JSX 语法树困扰的情况下学习 Web 构建块。由此看来，HTML 优先不仅是性能上的胜利，还是教学上的胜利。

但它支持扩展吗？

一个很自然的问题是，HTML 优先的架构是否能够支持复杂的动态应用。答案越来越肯定。

像 Enhance 和 Qwik 这样的项目已经证明了渐进增强可以与可扩展性共存。它们不是重新发明轮子，而是使用平台的原生功能，如 Web 组件和 DOM 本身。在这样做的同时，它们也允许懒加载、水合和动态更新，只是不再采用传统框架那种全有或全无的方法。

即使是谷歌、Netlify 和 Shopify 等公司的大型团队也在探索 HTML 优先或基于岛屿的架构，目的是驯服他们不断增长的前端代码库。事实证明，当你停止将浏览器视为一个愚蠢的画布并开始利用其原生行为时，你可以走得更远。

复杂性并没有消失。但是它变得更加深思熟虑，更加模块化，并且更少地依赖于单个框架的生命周期或状态模型。这是件大事。

哪些东西需要开发者重新学习？

如果在过去的五年里，你一直在围绕 props、state 和客户端路由思考问题，那么转变为 HTML 优先可能听上去很刺耳。但这并不是说你要放弃自己辛苦学来的技能。这是关于再现 Web 的初衷。

因此现在，开发者需要知道如何：

• 编写语义化、可访问的 HTML，清晰地向浏览器和辅助技术传达结构和意图。

• 拥抱HTTP动词，如 GET 和 POST，并依赖服务器渲染的响应来处理状态转换，而不是将一切卸载给客户端。

• 使用 CSS 功能，如过渡动画、响应式布局媒体查询、组件级响应容器查询，当原生解决方案足够时避免使用 JavaScript。

• 围绕表单和可导航的 URL 设计交互，实现更好的回退、共享及降低前端复杂性，而不是仅依赖封装的 shadow DOM 或通过 API 路由。

这不是倒退。这是关于重新发现一直都有效的工具。HTML 优先的开发哲学迫使开发者从一开始就考虑架构、交付和性能。它鼓励有意识地行动。

未来是分层的，而不是堆叠的

框架并没有消亡；它们正在进化。前端的未来不是回归到纯 HTML，而将是一个以 HTML 为基础的分层方法。你仍然可以使用 React、Svelte 或 Vue，但是作为增强，而不是作为基础。

这是 JavaScript 能做的最成熟的事情：学会何时领导，何时跟随。让 HTML 结构化你的页面，让 CSS 绘制它，让 JavaScript 在需要时谨慎、精确地赋予它生命。

我们可能正在见证人们期待已久的 JavaScript 成熟期：不张扬，不教条，不再试图主导技术栈，而只是试图融入。

老实说？这可能是多年来前端最令人兴奋的事情。

亚历山大·威廉姆斯是一位全栈开发者和技术作家。作为一名独立 IT 顾问，他帮助新企业主创建他们的网站。

声明：本文为 InfoQ 翻译，未经许可禁止转载。

原文链接：https://thenewstack.io/html-first-framework-second-is-javascript-finally-growing-up/