一文了解今年 10 大 JavaScript 更新

大家好,我是 ConardLi

ECMAScript 新特性

每年,都会有很多新的语言特性在 ECMAScript 中得到标准化,然后在浏览器中实现。今年我最喜欢的新特性之一是对象的 groupBy

试想一下,你有一个来自数据库的对象数组,每个对象都有一个 age 字段。你可以利用 groupBy 函数将年龄在 21 岁以下的人划归为儿童,年龄在 21 岁以上的人划归为成人,最终结果是一个按年龄分组的对象。

55fc1f10d9941e8df906d30a8dc8d8de.png

但是,我发现自己更常用的是数组的 toSorted 函数,与此同时还有 toSplicetoReversed

9d7bcce71dfd32f8c6dc03450f93a045.png

JavaScript 已经有了 sortreverse 方法,但问题是它们会直接修改原数组。有的时候可能挺疑惑的,因为像 mapfilter 等其他方法并不会直接修改原数组,而是复制数组并返回一个新的数组。通过这些新的方法,你现在可以将原数组视为不可变值来排序、反转和切割数组,这种方式写代码更为理智。

新的 HTML 元素

8e4a65d1f040df88cf5ca1b811a0f5be.png

Web 开发者也从新的 HTML 元素方面获得了新的更新。例如,Search 标签提供了一种更具语义化的定义网站搜索框的方式,取而代之的是更为泛化的 Form 标签。

9f8081e445d1016f859a82c9b8e284bf.png

更强大的 Dialog 元素可以让我们创建一个实际的模态对话框,并通过内置方法如 showModalclose 来使用 JavaScript 进行控制。

iOS Web Push

4d08832f10b6b2840dbec9394262ac71.png

经过多年广大开发者的苦苦哀求 ,iOS 终于支持从 Web APP 接收推送通知。

d11328d0a2e2257fa7806b5083368cd0.png

这对于那些实际上允许网站向他们发送推送通知的 0.00001% 的网站用户来说,无疑是一项重大的胜利。

Next.js 更新

e40014597ff1e43be20cc4dbc79cdb1c.png

接下来我们再来谈谈框架的变动,作为世界上最受欢迎的 JavaScript 框架之一,Next.js 在过去的一年里发生了翻天覆地的变化,这要归功于在 5 月发布的 13.4  稳定版本中引入了的 App Dir

6eea01fee237450e3de99d6ce91c4556.png

其中最引人注目的就是现在可以直接在 React 组件中获取数据,这要归功于 Server Component,它们是可以在服务器上运行的 React 组件。

对于这些更新开发者们众说纷纭。一方面,这确实带来了很多出色的新特性,极大地简化了代码;但另一方面,许多人也在抱怨这很像半成品,感觉就像现在游戏公司发布新游戏时的心态,先推出产品,然后在接下来的几年里逐步完成和完善。

eb2b2518b6c70e3c208a6eb14786fd31.png

人们抱怨必须在各处使用 "user client" 指令,因为它会导致现存的 React 库出现各种各样的问题。

019e6ac3393f0bcb25184bd8a3849c70.png

人们也抱怨 Server Component 的运行速度非常慢,这是基于 rust 实现的,这很奇怪,因为大家往往会认为任何基于 rust 实现的东西都应该很快。

9fc68e8eb40aafc6387f23091504929b.png

人们将新的 ReactServer 上的特性嘲笑为 PHP,这是对 JavaScript 框架的一种最具侮辱性的侮辱。

73fc1c4ea3c599581555702381c3daff.png

然而,最大的问题却是在 Verell 之外,很难正常运行 Next.js

830edad0431129ad83ea9da935d47b32.png

所以现在又开始产生了一些新的项目,比如 open next,它们致力于将 Next.js 运行在任何地方。

Vue.js 更新

bbeaf39fa0b304f2df71df5fa63150d3.png

Nuxt.jsVue.js 生态系统也在 2023 年有了很多酷炫的更新,比如它的 Devtoos

53a2e427060be69bc73c5203051eaf18.png

这些工具可以直接在浏览器中运行,让你更容易理解复杂应用的结构。

1fa1141b738d6e84dbf84e9415af928f.png

但你可能不知道的是,很多组件都是通过统一的 JavaScript 工具生态系统来提供的,比如,如果你不在乎 Vue.js,只想要一个 Web 服务器,你可以使用 Nitro 来用纯 JavaScript 构建一个快速的服务器。

67275af25ae383a137ee3c6cbae790a6.png

有趣的是,我觉得 Vue.js 生态系统在 2023 年变化最小,它给我的感觉像是最稳定和可预测的生态系统。

Svelte 更新

9983fa0a450d0fe55fcb346c2d202ef4.png

对比之下, Svelte 就在 2023年好像遭到了重创。Svelte 宣布了一项新特性 "runes",这个特性将在版本5中大幅改变开发者的体验。

4510993806ca03ed97ee9be79255410d.png

有些用户感觉这个变化使 Svelte 看起来更像 React,但是这正是他们试图摆脱的开发者体验。但另一方面,很多人也对这项更新表示支持,将它们视为框架在正确方向上发展的必要步骤。作为一名 Svelte 的忠实用户,我决定等待版本5的最终发布后再下定论。

Angular 更新

73e4c84dced8c1563047453f8cb05247.png

2023 年变化最大的框架奖颁给 Angular,新增了很多特性。

d657c73a42120068250de8314225beb7.png

最值得注意的是全新的模板语法,提供了更简洁的方式处理条件与循环,取代之前的 ngfor 之类的写法。

ec9657e03456489ba426246b637072a8.png

同时,Angular还有了一个全新的 Logo,这无疑打破了它成为世界上最流行框架的最后一道阻碍。

Node.js

8e6a1abd5514c7218fb226ba3cc00643.png

前端有着大起大落,后端则沉稳稳健地在不断提升。Node.js20 版本中引入了一种新的权限模型。

991af8b9226f1699528e48af87bc10c3.png

通过控制脚本访问某项特性来提高安全性,类似之前 Deno 提出的概念。

ede51520c0ea8d389b57a2d26c226d89.png

Node 21 的发布中,引入了它自己的 Websocket 客户端,基于浏览器的 Websocket API 实现。

Bun

9e1225da26916922e1a89d7d4c36e2b5.png

然而,2023 年后端 JavaScript 的最大颠覆者毫无疑问是 Bun,这是一款用 Zig 编写的新 JavaScript 运行时。

7ea918d3d92d7df01f3da57f6eae4c3c.png

虽然在发布初期发现了许多 Bug,但它凭借卓越的开发体验和对性能的激进声明,依然被人们看作是 JavaScript 在未来进行后端开发的一种有潜力的新方式。

HTMX 的出现

4a80e1066db337a6d5c42bc76448b25a.png

HTMX 可以直接让我们在无需编写任何 JavaScript 代码的情况下使用 AJAX、SSEWebSockets 的力量进行动态更新页面。

这是一个为整个 JavaScript 生态系统带来更多想象力的框架,它实际上可以消除一个项目里的大量 JavaScript,比起所有主要框架采取的常规方法,它是 JavaScript 仇恨者最理想的 JavaScript 框架。

最后

大家有什么看法,欢迎来评论区留言。

抖音前端架构团队目前放出不少新的 HC ,又看起会的小伙伴可以看看这篇文章:抖音前端架构团队正在寻找人才!FE/Client/Server/QA

点赞在看是最大的支持⬇️❤️⬇️

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值