百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

减少复杂性!JavaScript 2024 发展趋势预判

zhezhongyun 2025-04-24 10:32 42 浏览

【CSDN 编者按】这是一篇由 Ryan Carniato 于2023年12月29日发表的关于「2024年JavaScript 框架发展趋势」的文章。作者认为 2023 年是 JavaScript 框架发展的重要一年，预计 2024 年将继续看到更大的变化，其中包括服务器优先、混合路由、边缘网络和人工智能等方面的发展。此外，2024年可能会继续加强框架的成熟化趋势。作者对于简化方案，如 Astro 和 HTMX，仍然持乐观态度，并期待框架能够更好地履行其承诺，专注于提供更有力的解决方案，减少复杂性。


作者 | Ryan Carniato 责编 | 梦依丹
出品 | CSDN（ID：CSDNnews）

岁末年初，恰逢年度总结时刻。不少开发者也在积极参加 CSDN 举行的年度征文活动——2023年，我的编程之旅。晒出自己过去一年的技术成就与所在领域的技术变化，GET 到的新功能、新技术等。

近日，知名前端爱好者，SolidJS UI 库作者，同时也是 MarkoJS 核心团队的成员 Ryan Carniato 撰写了《进入2024 的 JavaScript 框架》，本文总结了 JavaScript 框架在 2023 年的技术趋势与 2024 年的预期变化。

以下为译文：

对于 JavaScript 框架来说，2023 年是相当重要的一年。新技术终于展示出了它们的实用性，而旧框架也在卷土重来。如果你没注意到的话，可能就错过了一个相当重大的转变。
我预计，2024 年将继续带来更大的变化。这一次的重点不再是新技术，而是对现有技术的改进和完善。基础已经打下，我们有更多的内容可以实现和呈现给用户。

服务器优先（Server First）
如果要为过去几年选择一个主题，那就是"服务器优先"。这个观点一直备受争议，但无可否认。短短几年前，人们都在谈论渐进式 Web 应用和离线优先的概念。但是，这种讨论几乎销声匿迹。

https://twitter.com/htmx_org/status/1725241732260847914
相反，HTMX 以其犀利的观点，解释了为什么 JavaScript 是一个错误。Astro 也毫不掩饰地接管了内容站点开发。甚至 React 核心团队也接受了服务器的简洁性，正如 Dan Abramov 在演讲中所强有力表达的那样，他探讨了如果 React 一直以服务器为优先会怎样。
那么，我们曾经钟爱的单页面应用（Single Page App）在这么短的时间里经历了什么？它现在是否还存在，我们现在是生活在多页面应用（Multi-Page App）和只有服务器渲染的 HTML 时代吗？

回顾 2023
去年，我也写了一篇类似的文章，探讨 JavaScript 框架的发展趋势。那篇文章所提到的三大技术趋势成了过去一年讨论的重点。
无处不在的 Signals
自从 SolidJS 和 Vue 开始采用反应性原语之后，Preact 和 Qwik 紧随其后，这种趋势在 2023 年变得更加强劲。

https://github.com/angular/angular/discussions/49090

在二月，Angular 团队也宣布采用了这一技术。该消息在社交媒体上引起了很大的轰动。不仅如此，这也是导致 Angular 引起重大关注的几个因素之一。有人甚至称之为 Angular 的复兴。而且，这是过去几年来 React 团队首次加入了这场争论，因为人们开始纷纷问道：“React 何时会采用 Signal 呢？”
关于这个问题，我在下面的文章中写了更详细的回答（还附有与 Dan Abramov 在中评论的讨论）。
不过，简单来说，React 团队对 Signal 这种 API 并不太感兴趣，他们更期待的是「Forget」编译器，因为它能起到类似的作用。当然，Signal 的应用并没有到此结束。谷歌的 Web 组件框架 Lit 发布了原生支持信号的 Lit 3。Rich Harris 则透露了 Svelte 的未来发展方向，他们基于 Signal 的新「Runes」将成为即将发布的 Svelte 5 中主要的响应式来源。到 2023 年底，Signal 已经成为大多数前端 JavaScript 框架的重要组成部分。
混合路由

服务器端路由在过去一年中变得越来越重要。从 2022 年底开始，这种模式逐渐被人们所接受，比如使用 React Server Components 和 Astro 的 View Transition API 集成。
它的基本原则是，在初始页面加载后，服务器端的渲染不应影响客户端的导航，而客户端的导航也不应意味着我们需要发送所有的 JavaScript 来渲染那些可以在服务器端静态渲染的页面部分。
需要注意的是，不同的解决方案产生的效果也不同，这一领域仍在发展之中。我们正在进入一个全新的领域，它既不是传统的单页应用程序，也不是传统的多页站点。我们需要了解新的权衡和概念。而且，我们还远没有解决所有的问题。
边缘网络：最后的前沿

边缘函数似乎是显而易见的成功案例之一。将服务器靠近最终用户来大大减少延迟。使用更轻量级的运行时，可以大大减少冷启动时间。
如果说 2023 年有什么不同的话，那就是边缘技术发展的一年。我们一开始非常热情。毕竟，Cloudflare 发布了边缘数据库，我们所有喜欢的提供商都开始提供边缘函数，我们最喜欢的框架也添加了开箱即用的支持。供应商已经成立了一个名为 WinterCG 的委员会，来讨论平台的标准化问题。未来就在眼前。


我们最终意识到，即使在这些边缘函数中，某些 Node API 也是必不可少的。你可以感谢或讨厌 Next 和 Vercel 将 AsyncLocalStorage 推广到每个运行时，但我们需要它。
我们还意识到，边缘数据库对于所有应用程序来说永远是不够的。即使有流媒体，服务器水瀑仍然真实存在且影响很大。是的，即使使用 React Server Components 也是如此。但这确实推进了我去年提出的目标，即使用分布式部署进行整体创作。我们看到服务器函数（server$，使用 server）甚至像工作器函数这样的变体在年初就出现了，表明我们可以分布我们部署 API 的方式，被 Solid、Qwik 和 Next 采用。
到年底，Next 14 发布了新的实验性部分预渲染，允许单个请求从边缘提供静态内容，同时通过代理到更靠近数据库的无服务器函数，所有内容都被流式传输，以提供类似于边缘的体验，而无需在那里部署整个应用程序。看到一些独创性提供了两全其美的解决方案，真是令人敬畏。

https://twitter.com/rickhanlonii/status/1722704383064842280


2024 年的趋势
Signals 的年代
我已经讲了很多关于 Signals 的内容，但真正的好处还没有显现出来。JavaScript 中已经有了类似 Signals 的细粒度原始函数 15 年了，那为什么是现在呢？

https://twitter.com/t3dotgg/status/1730711700805140908


预计 JavaScript 框架将进一步整合 Signal 机制，例如 Vue Vapor 和 Svelte 5 中的新反应性模型。
基础实施驱动开发
既然服务器端渲染框架已经得到了很大的支持，那么下一个合理的发展方向就是继续探索如何最大限度地发挥这种新功能的作用。标准的制定比较慢，WinterCG 也需要一些时间，但这并不会阻止发展的势头。
为了实现差异化，我预计框架和基础设施提供商将面临提供独特功能的压力，而这些功能可能仅在特定平台上可用。虽然 2023 年看到了各提供商在提供类似功能方面的平等化趋势，例如在基本静态和函数托管之外提供键值存储 Blob 等功能，但我认为在提供独特价值方面的竞争将会加剧。
框架的作用是保持一致的创作体验和思维模型，同时寻找利用新功能的方法。这与 21 世纪初的浏览器大战类似，未来还有很多发展空间。
AI
去年，从框架的角度来看，谈论人工智能还为时尚早。明年可能也是如此。但它已经渐渐出现在我们的视野中。代码迁移和生成工具都是很好的想法，但它们与多年来使用的可视化无代码或低代码编辑器面临着同样的问题。人与机器的交互界面仍然至关重要。毕竟，代码是一个活生生的存在。它随着时间的推移不断生长和维护。
在过去的一年里，与其他框架的作者交流时，我们发现人工智能引起了周围人的极大兴趣。

https://twitter.com/aidenybai/status/1737616282210738650

人工智能正在回答一个长久以来的问题，那就是为什么你的应用程序运行缓慢。

对开发工具的影响只是其中一方面。我们还越来越多地看到实时性能被融入到框架中。这不仅指的是用于持久化后端的 Websockets。元框架中的 API 已经发展到超越简单的 JSON，实现了完全流式的跨网络 JavaScript 执行，这在 SolidStart、Qwik 和 Next 中通过“服务器函数”实现。现在，我们可以很容易地想象出生成技术实时创建你的用户界面的情景。

https://twitter.com/mhevery/status/1722928972789408240

总结
2024 年可能会延续我们在过去几年看到的成熟趋势。从 2020 年到 22 年，我们看到了很多新的 JavaScript（和 WASM）框架（Qwik、Million.js、Astro、Next 13、Remix、Hydrogen、SvelteKit、SolidStart、Leptos、Dioxus、HTMX），但去年的情况发生了改变。不再出现大量新的 JavaScript 框架，相比之下相对较少。然而，我们已经找到了解决问题的方法和途径。现在的关键是要充分发挥这些方法和途径的潜力，将它们应用到实际开发中，取得更好的效果。
我不确定我们是否已经成功地解决了复杂性问题，这给像 Astro 或 HTMX 这样简化的解决方案带来了很大的肯定。但我仍然充满希望。
也许不太可能期望每个人都对“单页应用程序”的确切定义以及何时使用各种选项达成一致，但这些解决方案每天都变得更加强大，能够实现它们既定的目标。
现在不再怀疑我们熟悉的Web开发将发生变化。即使方向还不完全明确，革命已经来临。期待与你一同见证这一变革。

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法，你知道几种

Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...

解锁Shell编程:变量_shell $变量

引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...

一周热门
最近发表
标签列表