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/"