盘点2023年前端大事件

659次阅读  |  发布于10月以前

本文约 9000 字,预计阅读需要 20 分钟。2023 年即将过去,这一年前端生态圈快速发展,发生了许多令人瞩目的事件和变化。从新技术的涌现到老技术的更新,前端技术正在经历着一次全面的变革。本文将梳理 2023 年前端界的重要事件,带你回顾那些令人难忘的历史时刻!

Astro 更新

Astro 是一个现代化的轻量级静态站点生成器,用于构建以内容为中心的高性能网站。

2023年,Astro 发布了两个主要版本,第三个主要版本已经在路上了。

CSS 支持嵌套语法

主流浏览器的最新版本都已经支持 CSS 嵌套语法。

对于以下 CSS 样式:

table.colortable td {
  text-align:center;
}

table.colortable td.c {
  text-transform:uppercase;
}

table.colortable td:first-child, table.colortable td:first-child+td {
  border:1px solid black;
}

table.colortable th {
  text-align:center;
  background:black;
  color:white;
}

使用嵌套:

table.colortable {
  & td {
    text-align:center;
    &.c { text-transform:uppercase }
    &:first-child, &:first-child + td { border:1px solid black }
  }
  & th {
    text-align:center;
    background:black;
    color:white;
  }
}

React 纪录片发布

2 月 11 日,Honeypot 发布了期待已久的 React 记录片,记录了 React 的发展历程。React 纪录片主要内容如下:

Rspack 发布

3 月 10 日,字节跳动自研 Web 构建工具 Rspack 正式发布。Rspack 是由 ByteDance Web Infra 团队孵化的基于 Rust 语言开发的 Web 构建工具,拥有高性能、兼容 Webpack 生态、定制性强等多种优点,解决了我们在业务场景中遇到的非常多的问题,让很多开发者的体验有了质的提升。

Rspack 的特性如下:

TypeScript 更新

2023 年,TypeScript 发布了一个主要版本,三个次要版本:

React 推出全新官方文档

3 月 17 日,在 React 新文档的 Beta 版上线一年之后,React 终于正式发布了全新的 React 官方文档!新文档已启用新的域名:https://react.dev/。

新文档主要包含以下部分:

Electeon 更新

2023 年,跨平台桌面应用开发工具 Electron 发布了四个主要版本:

Chrome 发布 WebGPU

经过多年的开发,Chrome 团队发布 WebGPU,它允许在 Web 上进行高性能 3D 图形和数据并行计算。WebGPU 默认在 Chrome 113 中可用。

WebGPU 是一种新的 Web API,它公开了现代硬件功能,并允许在 GPU 上进行渲染和计算操作,类似于 Direct3D 12、Metal 和 Vulkan。与 WebGL 系列 API 不同,WebGPU 提供了对更高级 GPU 功能的访问,并为 GPU 上的通用计算提供一流的支持。该 API 的设计考虑了 Web 平台,具有常用的 JavaScript API、与 Promise 的集成、对导入视频的支持以及带有大量错误消息的完善的开发人员体验。

Node.js 更新

2023 年,Node.js 发布了两个主要版本:

除此之外,Node.js 16 已于 2023.9.11 到达生命周期结束(EOL),届时 Node.js 16 已停止维护。

Vite 更新

Vue.js 推出框架能力官方认证

4 月 25 日,Vue 正式推出框架能力官方认证,即 Vue.js 框架能力证书,该认证由 Vue School 与 Vue.js 团队合作提供支持。

该认证的试题集和代码挑战由 Vue.js 核心团队审核,包括尤雨溪。他们的直接参与有助于确保所测试的能力是实现 Vue.js 框架最佳使用所必需的能力。计划收入的一部分将用于支持 Vue.js 开发。

Qwik 发布 1.0 版本

5 月 2 日,追求极致性能的前端框架 Qwik 发布了 1.0 版本!Qwik 类似于 React,它也使用用 JSX 编写的组件作为模板,主要区别在于其专注于在浏览器中传输最少的 JavaScript。

Qwik 不依靠水合来为服务器上生成的页面带来交互性,而是使用一种称为可恢复性的技术来提供即时交互的 HTML。它通过在 HTML 本身中序列化应用的状态来工作。该项目由 Miško Hevery 领导,他是 AngularJS 的创建者,他的口号是“为 Web 应用增强 HTML”,Qwik 就是“HTML 优先的框架”。

在 2022 年 JavaScript 明星项目的前端框架排行中,Qwik 排在第二位,仅次于 React。


Qwik 提供快速扩展的即用型集成,可以与您喜欢的库和框架轻松集成。只需在命令行上运行npx qwik add,然后从列表中选择所需的集成即可:- 一次编写,任意部署:支持多个主流云托管服务商,包括Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel等,而且这个列表还在不断增长。以与托管提供商无关的方式编写应用,避免厂商锁定。

React 推出 Canary 版本

React 团队希望给 React 社区提供一个选项,使其可以在新功能的设计接近完成时就可以选择使用这些功能,而不必等到它们发布为稳定版本,因此引入了一个新的官方支持的 Canary 发布渠道,这个渠道将使用单独的 React 功能与 React 发布计划解耦。

Vue 发布 3.3 版本

5 月 11 日,Vue 3.3 正式发布,代号为 Rurouni Kenshin。此版本更新主要针对开发者体验进行了改进,特别是在使用 TypeScript 时的 SFC <script setup>。与 Vue 语言工具(Volar)1.6 的发布相结合,解决了在使用 TypeScript 时存在的许多长期困扰问题。

此外,Vue 2 将于 2023 年 12 月 31 日达到生命周期结束(EOL),届时 Vue 2 将停止支持。

2023 Google I/O 大会举办

在近日的 2023 Google I/O 大会上,介绍了很多新的 CSS 特性,包括:

Nuxt 更新

React 发布十周年

2013 年 5 月 29 日,React 正式开源,至今已过去了十年!自发布以来,React 已经成为前端开发领域中最受欢迎的技术之一,其生态系统越来越丰富,Github 累计获得了 208k Star,每月 npm 平均安装量达到了 200w。

十年来 React 的重要里程碑总结如下:

  1. 【2011:早期原型】2011 年,Facebook 工程师 Jordan Walke 创建了 FaxJS,它是 React 的早期原型。
  2. 【2013:发布之年】在 2013 年的 JS ConfUS 会议期间,Jordan Walke 宣布 React 正式开源。
  3. 【2014:扩张之年】2014 年初,随着开发人员开始采用 React,React 的创建者计划了参观和会议来建立社区,来赢得开发者的认可,并帮助他们认识到 React 是为创新而设计的。
  4. 【2015:稳定之年】React v0.13 于 2015 年 3 月发布,最引人注目的新特性是对 ES6 类的支持,这让开发人员在编写组件时具有更大的灵活性。Dan Abramov 和 Andrew Clark 发布了,同时也推出了第一个稳定版的 React Developer Tools。彼时,React 开始获得广泛认可,并被一些大型企业使用,如 Netflix 和 Airbnb。
  5. 【2016:成为主流】2016 年 4 月,React 从版本 0.14.7 切换到主要稳定版本:React v15.0。同时,为了使生产环境下的调试更加容易,在推出的 15.2.0 中引入了错误代码系统
  6. 【2017:React Fiber 发布】React v16.0 于 2017 年 9 月发布,其中包含多项更改和新功能,其中包括:引入 Error Boundaries 以改进错误处理、改进服务端渲染、推出全新的 React Fiber 架构等。
  7. 【2019:React Hooks 发布】React v16.8 于 2019 年 2 月发布,正式推出 React Hooks,Hooks 让我们无需编写类就可以使用状态和其他 React 特性。
  8. 【2020:更新更简单】React v17.0 于 2020 年 10 月发布,此版本主要侧重于使从以前的版本更新 React 本身变得更简单,提供了一次升级整个应用或按认为合适的方式逐个升级应用的选项。
  9. 【2022:持续改进】React v18.0 于 2022 年 3 月发布,这个主要版本包括开箱即用的改进,例如自动批处理、新 API(例如 startTransition)以及支持 Suspense 的流式服务端渲染。
  10. 【未来规划】2022 年 6 月,React Labs 公布正在研究的方向:

多个框架宣布放弃TypeScript

6 月,前端框架 Svelte 的创建者 Rich Harris 提出要将 Svelte 从 TypeScript 切换到使用 JSDoc 的 JavaScript。这种转变得到了 Svelte 团队的大力支持,他们决定在 Svelte 4 代码库中从 TypeScript 迁移到 JavaScript JSDoc。


8 月,前端工具 Turbo 宣布放弃 TypeScript。

Stack Overflow 2023 开发者调查报告

6 月 15 日,程序员社区 Stack Overflow 正式发布了 2023 年度的开发者调查报告。报告显示,今年,JavaScript 已经连续第 11 年成为最常用编程语言。


Node.js 和 React.js 是所有受访者最常用的两种 Web 技术。值得注意的是 Next.js 从 2022 年的第 11 位上升到今年的第 6 位。
Visual Studio Code 仍然是所有开发人员的首选 IDE,今年它在所有开发人员中的使用率从 75% 增加到 81%。
Rust 是最受推崇的语言,超过 80% 使用它的开发人员希望明年再次使用它。

React Native 发布 0.72 版本

6 月 21 日,React Native 0.72 正式发布,该版本增加了 Metro 强烈要求的功能,改进了错误处理和其他开发者体验方面的改进。

Svelte 发布 4.0 版本

时隔四年,6 月 22 日,前端框架 Svelte 发布了全新的主要版本:4.0。Svelte 4 主要是一个维护版本,提高了最低版本要求,并在特定领域优化了设计。它为下一代 Svelte 发布(Svelte 5)奠定了基础。

ECMAScript 2023 标准发布

2023 年 6 月 27 日,第 125 届 ECMA 大会正式批准了 ECMAScript 2023 语言规范,其正式成为最新 ECMAScript 标准。

ECMAScript 2023 的更新内容包括:

React 核心成员 Dan Abramov 离职

7 月 20 日,React 团队核心成员、Redux 作者 Dan Abramov 在社交平台表示,他即将离开 React 团队,开启新的旅程。


离开 Meta 就意味着要离开 React 团队,也意味着以后不会杯被任何公司积极赞助全职从事 React 工作,但是 Dan 表示会继续参与团队的工作并参加会议。

WebStorm 更新

2023 年截止至今,WebStorm 发布了两个主要版本,最后一个主要版本已经在路上了。

2023 State of CSS 调查结果

8 月 26 日,2023 年度 State of CSS 调查(CSS 现状调查)结果正式公布。

State of CSS 调查旨在确定 Web 开发生态系统中即将出现的趋势,以帮助开发人员做出技术选择。因此,这些调查的重点是预测未来几年会发生什么,而不是分析现在流行的趋势。此外,浏览器供应商会使用调查数据来确定功能的优先级并为 Interop 2023 等计划提供信息。

htmx 发布

今年,前端出现了一个名为 HTMX 工具,引发了热议,它可以说是增强版的 HTML。

HTMX 允许在不使用 JavaScript 的情况下添加现代浏览器功能。可以直接在 HTML 中使用属性来访问 AJAX、CSS 过渡效果、WebSockets 和服务器推送等功能,以便以超文本的简单性和强大性构建现代用户界面。

HTMX 的设计理念是通过解除HTML在前端开发中的一些限制,使其成为一个更加完整和强大的超文本工具。通常情况下,在传统的Web开发中,只有<a><form>标签可以发起HTTP请求,只有点击和提交事件可以触发这些请求,只有GET和POST方法可用,并且只能替换整个屏幕内容。而HTMX打破了这些限制,允许使用额外的HTML属性来实现更多的功能,而不需要编写大量的JavaScript代码。例如,在HTML中使用特定的属性即可实现进度条、懒加载、无限滚动、内联验证等特性。

htmx 成功地将 HTML 的简洁性与通常与复杂JavaScript库相关的动态功能相结合,为创建交互式网络应用程序提供了一个全新的选择。然而,它并不是适用于所有情况的解决方案。对于更复杂的应用,我们可能仍然需要使用JavaScript框架。但是,如果目标是创建一个快速、交互性强且用户友好的Web应用,而又不增加太多复杂性,那么 htmx 绝对是值得考虑的。

了解更多:《htmx:增强版 HTML 来了!

Rome 停止维护.

9 月 2 日,Facebook 出品的前端工具 Rome 宣布停止维护,储存库已存档。


发布仅三年的前端工具链 Rome 凉了。

Bun 发布 1.0 版本

9 月 8 日,前端运行时 Bun 1.0 正式发布,如今,Bun 已经稳定并且适用于生产环境。Bun 不仅是一个专注性能与开发者体验的全新 JavaScript 运行时,还是一个快速的、全能的工具包,可用于运行、构建、测试和调试JavaScript和TypeScript代码,无论是单个文件还是完整的全栈应用。

2022 年 7 月,Bun 发布,随即爆火,成为年度最火的前端项目:


仅一个月内,就在 GitHub 上获得了超过两万颗 Star。
Bun 不仅仅是一个运行时。它也是:- 一个包管理器 (类似 Yarn、 NPM、 PNPM)

由于是一个新的工具,所以难免存在一些问题。1.0 版本发布之后,Bun 的作者一直积极的改Bug、增加新功能。


延伸阅读:JS三大运行时全面对比:Node.js vs Bun vs Deno
Chrome 更新

9 月,Chrome 迎来了 15 岁生日。尽管过去 15 年发生了很多变化,但最初的目标仍然不变——构建一个快速、可靠、安全且易于使用的浏览器

这一目标推动着 Chrome 团队对 Chrome 所做的每一项改进。我们以比任何其他浏览器更快的速度向数十亿用户发布有用的功能和更新,并与开发人员合作,帮助他们提高网站性能。今年,Chrome在基准测试中实现了最快的加载速度。为了增强安全性,帮助将网络默认转向 HTTPS,并使人们更容易管理和保护其密码。除此之外,还融入了机器学习,以提供更易于访问和个性化的浏览体验。

为了庆祝 15 岁生日,新版 Chrome 桌面版带来了全新的外观、全新的搜索功能、全新的应用商店、全新的安全策略,以让用户继续在 Chrome 上轻松、快速、安全地浏览。

Remix 发布 2.0 版本

9 月 16 日,全栈 Web 框架 Remix 正式发布了 2.0 版本,Remix 团队在发布 1.0 版本后经过近 2 年的持续努力,发布了 19 个次要版本、100 多个补丁版本,并解决了数千个问题和拉取请求,终于迎来了第二个主要版本!

Remix 是一个由 React Router 开发团队所开发的基于 React 和 TypeScript 的全栈框架。2021 年 11 月,Remix 正式开源,至今已在 Github 上获得了 24.6k star。Remix 正式开源时,引发了前端圈不小的关注,其被普遍认为是 Next.js 的强劲对手。

时隔两年,Next.js 拥有 112k star,是 Remix 的近 5 倍。Next.js 周下载量 279 万,而 Remix 仅有 1.4 万,Next.js 是 Remix 的近 200 倍。可见,Remix 并没有像大家预料的那样,成为 Next.js 的有力竞争对手,在开发者社区中只有较小的市场份额。尽管如此,Remix 仍然吸引了一些开发者,并且在特定领域或项目中有其优势和适用性。

Next 更新

ViteConf 2023

10 月 5 日 - 6 日,ViteConf 2023 在线举行,Vue 和 Vite 的创建者尤雨溪发表了题为《The State of Vite》 的演讲,在演讲中,尤雨溪总结了 Vite 的版本发布情况、Vite 增长和采用情况,并对 Vite 的未来进行了展望。


Vite 团队正在研发 Rolldown,它是使用 Rust 开发的 Rollup 替代品。从零开始用 Rust 编写一个打包工具并非易事,这需要花费大量的努力。下面来看一下 Rolldown 的路线图,以及从短期到长期的关键节点。

第一阶段:聚焦基础打包功能

第一阶段的目标是能够替代 esbuild 进行依赖预打包,其中关键的挑战在于处理 CommonJS 和伪 ESM 依赖项。

第二阶段:实现 Rollup 的功能

第二阶段的目标是实现与 Rollup 相当的功能,尤其是与 Rollup 插件生态系统的兼容性,以及实现 tree-shaking 和高级块分割控制。最终目标是在 Vite 中使用 Rolldown 作为生产构建的替代品,以提供功能更强大、高效、易用和灵活的打包工具。

第三阶段:常见需求的内置转换

第三个阶段会稍微遥远一些,它将包括一些最常见需求的内置转换,例如 TypeScript、JSX、代码压缩,以及基于目标环境进行语法降级。这个阶段的目标是实现 esbuild 的功能,最终将用 Rolldown 取代 esbuild 和 Rollup。

第四阶段:使用 Rust 重构 Vite

从长远来看,Vite 团队也在考虑如何让 Vite 本身能够更好地受益于原生级别的速度。一种可能的实现方式是通过 Rust API 来公开 Rolldown 的插件容器,并将 Rolldown 作为 Vite 引入自己的Rust核心的依赖项。这样一来,Vite 就可以将许多内部插件和转换使用 Rust 重构,从而提高性能关键路径上的效率。此外,为那些开发过程中有太多未打包模块的项目引入完全打包模式也是一个备选方案。

最终,Rolldown 的目标并不是取代现有的工具,而是更好地满足在 Vite 中所面临的独特需求,并最终使所有使用 Vite 的用户受益。

Angular 更新

2023 年,Angular 发布了两个主要版本:16 和 17。

Prittier 重金悬赏用 Rust 重构

Facebook 法国前端工程师、React Native 和 Prettier 的联合创始人 Vjeux 在社交平台发帖,寻求有能力的开发者来使用 Rust 重写前端代码格式化工具 Prettier,并悬赏 1 万美元。Vercel 的首席执行官 Guillermo Rauch 也跟帖表示,进一步对该悬赏进行加码,将赏金升级到了 2 万美元。此外,Wasmer 官方也附议了 Vjeux 的这一提议,并表示将额外提供 2500 美元的奖励。

最终,Biome 赢得 Prettier 挑战的 $22.5K 奖金。

Copyright© 2013-2019

京ICP备2023019179号-2