百度360必应搜狗淘宝本站头条
python判断字典是否为空crontab每周一执行aes和des区别安装指定版本npmadb pull
当前位置：网站首页 > IT知识 > 正文

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

liuian 2024-12-26 15:05 45 浏览

【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开发将发生变化。即使方向还不完全明确，革命已经来临。期待与你一同见证这一变革。

相关推荐

git的撤销、删除和版本回退_git撤销删除的文件

备注：本文参考于廖雪峰的博客Git教程。依照其博客进行学习和记录，感谢其无私分享，也欢迎各位查看原文。知识点：1、gitstatus，查看git仓库的状态2、gitdiff查看git修改了的内容...

程序员开发必会之git常用命令，git配置、拉取、提交、分支管理

整理日常开发过程中经常使用的git命令！git配置SSH刚进入项目开发中，我们首先需要配置git的config、配置SSH方式拉取代码，以后就免输入账号密码了！#按顺序执行gitconfig-...

Git使用指南 | 教你轻松学会Git_git用法详解

4000字，教大家学会Git使用。一、Git基础1、Git介绍Git是目前世界上最先进的分布式版本控制系统。版本控制系统：设计师在设计的时候做了很多版本经过了数天去问设计师每个版本都改了些啥，设计师此...

深入浅出 Git_深入浅出 gRPC

git初体验使用git前需设置用户名和Email，这些信息会出现在提交记录中以标识作者。gitconfig--globaluser.name"YeHanlin"gitc...

Git不提交指定文件的方法_git不提交指定文件的方法有哪些

大家在开发项目的时候都很喜欢使用git作为代码管理工具，但是在开发项目的时候我们的本地配置文件不应该覆盖服务器中的配置文件，我们使用命令gitstatus查看待提交文件的时候需要注意不要把本地的配...

相见恨晚的 Git 命令动画演示，一看就懂

虽然Git是一个强大的工具，但是我觉得大部分人都会同意我说的：它也可以是一个……噩梦！我一直觉得，使用Git的时候把操作过程在脑海里视觉化会非常有用：当我执行某个命令的时候，分支之间是如何交互...

GitCode的一些命令_git命令大全

GitCode的一些命令配置工具对所有本地仓库的用户信息进行配置$gitconfig--globaluser.name"[name]"对你的commit操作设置关联的用户名$...

【git】 如何删除所有 tag(本地和远程)

要删除所有本地和远程的Git标签，可以按照以下步骤进行：删除本地标签首先，删除本地标签。你可以使用以下命令删除本地的所有标签：gittag-d$(gittag-l)这将列出并删除所有本地...

互联网大漏洞:每600个网站就有1个暴露了.git文件夹

对于Web开发人员来说，向外界暴露你的.git文件夹绝对是一个菜鸟级错误。因为这样会允许任何人下载你的整个源代码存储库，包括数据库密码、加密盐、Hash和第三方接口密钥API，还有你的用户名和密码。多...

git常用命令整理_git 常用

一、Git仓库完整迁移完整迁移，就是指，不仅将所有代码移植到新的仓库，而且要保留所有的commit记录1.随便找个文件夹，从原地址克隆一份裸版本库gitclone--bare旧的git地址...

项目常用GIT操作命令_git常用操作命令 简书

Git仓库更新依赖的命令：gradle--refresh-dependenciesgradleaR完全编译；./gradlewecomm:packages:telephony:larges...

【超详细】Git 所有常用命令 + 提交规范全指南(建议收藏!)

Git命令大全初始化类命令作用gitinit初始化一个本地Git仓库（当前目录会出现.git文件夹）gitclone<仓库地址>克隆远程仓库到本地，一般用来拉项目提交代...

Git 常用的alias命令大全_git -a

Git的alias（别名）功能可以将常用的复杂命令简化，大幅提升操作效率。以下是一些实用的Gitalias配置和常用示例：一、配置alias的方法通过gitconfig命令设置，分...

Git使用教程:最详细、最傻瓜、最浅显、真正手把手教

导读：因为教程详细，所以行文有些长，新手边看边操作效果出乎你的预料。GitHub虽然有些许改版，但并无大碍。一、Git是什么？Git是目前世界上最先进的分布式版本控制系统。工作原理/流程：Work...

实用干货分享(3)- Git常用操作干货分享

官方学习地址https://git-scm.com/book/zh/v2简单的代码提交流程1.gitstatus查看工作区代码相对于暂存区的差别；2.gitadd.将当前目录下修改的所有...

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