JavaScript框架-迈入2024年

内容

我不会是第一个说这个的人,但我还是要说,2023年对于JavaScript框架来说是相当不错的一年。在我们一直在关注的新技术终于展现出了它们的实力,以及老框架的复苏之间,如果你没有留意的话,你可能会错过一个相当重要的转变。

我预计2024年将在各个方面继续出现更大的变化。这一次不是关于新技术,而是关于改进。现在基础已经建立,有更多的东西可以实现。


服务器首杀

如果我要为过去几年选择一个主题,那就是这个。这一直是一个有争议的话题,但它是不可否认的。短短几年前,每个人都在谈论渐进式网络应用和离线优先。但这种对话几乎已经消失了。

相反,我们要接受 HTMX 的机智解释,说明 JavaScript 只是一个错误。而 Astro 则毫不妥协地接管内容站点的开发。甚至 React 核心团队也接受了使用 React 服务器组件的简单性,这一点在 Dan Abramov 的演讲中得到了令人信服的表达,他探讨了如果 React 一直是以服务器为先会怎样。

我们的单页面应用宝贝在这么短的时间内发生了什么事?它还活着吗,还是我们已经进入了多页面应用和仅服务器渲染 HTML 的时代?


2023年的反思

去年,我写了一篇非常相似的文章,分析了JavaScript框架在新一年的趋势,我认为这是一个很好的起点。

那篇文章中确定的三大技术趋势成为了去年讨论的重要内容。

信号无处不在

2022年底Preact和Qwik开始采用这些响应式原语,紧随SolidJS和Vue的步伐,这种趋势在2023年仍然持续增强。

在二月份,Angular团队宣布他们的采用。这一消息震动了社交媒体。不仅如此。这是导致Angular存在发生显著变化的几个因素之一。有些人甚至称之为Angular复兴。这也是过去几年中第一次看到React团队加入战团,因为人们开始真正询问的问题是,“Signal's in React, When?”

关于这个问题,我在以下文章中写了更详细的答案(以及在评论中与丹·阿布拉莫夫进行的讨论)。

但简短的回答是,至少作为一个API,Signals并不是他们感兴趣的东西,而他们备受期待的“Forget”编译器将扮演类似的角色。

信号传播并没有止步于此。来自谷歌的 Web 组件框架 Lit 推出了 Lit 3,并首次支持信号。Rich Harris 也揭示了 Svelte 的未来,他们基于信号的新 "Runes",将成为即将推出的 Svelte 5 中的主要响应性来源。

2023年结束信号是大多数前端JavaScript框架的重要组成部分。

混合路由

Image description

服务器端路由在过去一年中迈出了新的步伐并承担起了新的角色。从2022年底开始,到今年,我们看到人们开始适应这种范式转变,例如React服务器组件和Astro的视图过渡API集成

前提是,初始页面加载后的服务器渲染不应阻止客户端导航,客户端导航也不应意味着我们需要发送所有JavaScript来渲染页面的部分,这些部分本来可以在服务器端静态渲染。

需要注意的是,并非所有解决方案都是等效的,这仍然是一个正在积极探索的领域。我们正在进入一个新的空间,既不完全是单页面应用,也不完全是传统的多页面站点。这里存在新的权衡和新的理解。我们还有很多困难要克服。

边缘网络:最后的边界

Image description

边缘函数似乎是那种显而易见的胜利。将服务器移动到更接近终端用户的位置,可以大大减少延迟。使用更轻量级的运行时可以大大减少冷启动时间。我们终于可以提供我们一直梦寐以求的网络体验。动态体验,速度却如静态一般。

2023年对边缘计算来说是一个成长的一年。我们开始时充满热情。毕竟,Cloudflare发布了边缘数据库,我们喜爱的服务提供商开始提供边缘函数,我们喜爱的框架也开始提供开箱即用的支持。服务提供商成立了一个委员会WinterCG来讨论平台标准化的问题。未来已经来临。

我们最终意识到,即使在这些边缘函数中,某些 Node API 也是必不可少的。你可以感谢或者讨厌 Next 和 Vercel 将 AsyncLocalStorage 推入每个运行时,但我们确实需要它。

我们也意识到边缘数据库永远不足以满足所有应用程序的需求。即使使用流式处理,服务器瀑布也是真实而有影响力的。是的,即使使用 React 服务器组件。

但这确实推动了我去年提出的目标,即采用分布式部署的单体创作。我们在年初就看到了服务器函数(server$use server)以及变体如工作函数的出现,表明我们可以分布式部署API的方式得到了采纳,被Solid、Qwik和Next采用。

到年底,Next 14发布了新的实验性部分预渲染,允许单个请求从边缘提供静态内容,同时通过代理接近数据库的无服务器函数,所有内容都被流式传输,提供了类似边缘的体验,而无需部署整个应用程序。看到一些独创性提供了一个兼具两者优点的解决方案真是太棒了。


转至2024年

信号之年

我知道我已经在一篇文章中谈论了足够多的信号,但真正的回报还没有发生。我们在 JavaScript 中已经有了类似信号的细粒度原语 15 年了,那么为什么现在呢?

这不仅仅是拥有它们的问题,而是你如何使用它们。Vue 在幕后已经有这些基本组件多年了,React 与 MobX 也是如此,但这几乎没有触及事物发展的方向。而那个方向是细粒度渲染。SolidJS 推广的东西,现在以 Vue Vapor 的形式进入了 Vue,以及 Svelte 5 进入了 Svelte。而这些只是已经宣布的。

我期待其他人能更加自然地将已经采用的信号集成到框架中,以更好地从中受益。

这个领域对潜力充满了期待,致力于将信号引入浏览器的TC-39提案工作组包括来自每个主要JavaScript框架的代表,这个工作组并不总是与标准密切合作。

基础设施主导发展

现在,服务器端渲染框架已经得到了提振,下一个合乎逻辑的发展方向是继续寻求最大化利用这种新能力所带来的好处。标准发展缓慢,WinterCG 需要一些时间,但这并不会阻止这里的发展。

为了区分,我预计框架和基础设施提供商都会面临压力,提供可能只能在特定平台上运行的独特功能。虽然2023年推动各提供商实现功能均衡,超越基本的静态和函数托管,比如键值存储 Blob 等,但我只看到这里的竞争在加剧,以提供独特价值。

框架在其中的作用是在寻找利用所呈现给我们的新能力的同时,保持一致的创作体验和心智模型。这与2000年代末的浏览器之战并无二致,而且还有很多事情有待发展。

人工智能

Image description

去年从框架的角度来谈论人工智能还为时过早。明年可能也是如此。但它已经在地平线上了。代码迁移和生成工具都是很好的想法,但它们遇到了多年来视觉化无代码或低代码编辑器一直存在的问题。人类接口点仍然至关重要。毕竟,代码是一个活生生的东西。它会随着时间的推移而生长和维护。

在过去的一年里,与其他框架作者交流时,我们发现它引起了周围人的兴趣,但我们还没有弄清楚我们在其中的角色。但情况正在发生变化。

是的,那个人工智能正在回答为什么你的应用程序运行缓慢的永恒问题。

对开发工具的影响是一方面。但我们也看到实时性被构建到我们的框架中的潜力增加了。我不仅指持久后端的Websockets。元框架中的API已经发展到不仅仅是简单的JSON,而是完全流式跨网络JavaScript执行,例如在SolidStart、Qwik和Next中的“服务器函数”。很容易想象生成技术实时创建你的用户界面。


结论

Image description

2024年很可能会延续我们在过去几年中看到的成熟趋势。从2020年到2022年,我们看到了许多新的JavaScript(和WASM)框架(Qwik、Million.js、Astro、Next 13、Remix、Hydrogen、SvelteKit、SolidStart、Leptos、Dioxus、HTMX),但去年并非如此。我们已经找到了解决方案,现在需要充分发挥它们的潜力。

我不确定我们已经成功地控制了复杂性,这让我对像Astro或HTMX这样简化解决方案表示赞赏。但我仍然抱有希望。

也许期望每个人都就“单页面应用”到底是什么,以及何时应该使用我们面前提供的各种选项达成一致是不现实的,但这些解决方案每天都在变得更加能够实现它们既定的目标。

这不再是一个关于我们熟知的网页开发是否会发生变化的问题。即使方向并不完全清晰,革命已经到来。期待在那里见到你。

总结
2023年对JavaScript框架来说是一个重要的一年,新技术的出现和老框架的复兴带来了重大变化。预计2024年将继续看到更大的变化,主要是在技术的完善上。文章还总结了2023年的三大技术趋势:信号的普及、混合路由和边缘网络的发展。展望2024年,文章提到了信号技术的重要性、基础设施驱动的开发以及人工智能在前端开发中的作用。