2023 年即将曩昔,这一年前端生态圈快速开展,发生了许多令人瞩目的事情和改变。从头技能的涌现到老技能的更新,前端技能正在阅历着一次全面的变革。本文将整理 2023 年前端界的重要事情,带你回顾那些令人难忘的历史时刻!

Astro 更新

Astro 是一个现代化的轻量级静态站点生成器,用于构建以内容为中心的高功用网站。2022年,Astro 在 Github 上新增 15K Star,位列2022年JavaScript 明星项目第 7 位。

2023年,Astro 发布了两个首要版别,第三个首要版别现已在路上了。

  • 1 月 24 日,Astro 2.0 发布,更新内容如下:
    • Markdown 和 MDX 的主动类型安全;
    • 支撑静态烘托和动态烘托;
    • 从头规划的过错界面;
    • 改善的开发服务器 (HMR);
    • 支撑 Vite 4.0;
  • 8 月 30 日,Astro 3.0 发布,更新内容如下:
    • 图片优化(安稳版):已撤销标志,而且比以往更好。
    • 更快的烘托功用:Astro 组件的烘托速度进步了 30-75%。
    • 用于 Serverless 的 SSR 改善:与保管途径连接的新办法。
    • 用于 JSX 的热更新改善:支撑 React 和 Preact 的快速改写。
    • 优化的构建输出:更干净、更高效的 HTML。
  • 11 月 28 日,Astro 4.0 Beta 发布

CSS 原生支撑嵌套语法

干流阅读器的最新版别都现已支撑 CSS 嵌套语法。

盘点2023年前端大事情
关于以下 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 纪录片首要内容如下:

  • 前期,当 Jordan Walke 试图说服 Facebook 的一小群工程师时,他有一个解决计划可以改善用户界面并明显缩短实施改变的时刻。
  • Facebook 的工程团队不得不面对的第一个困难,以及收购 Instagram 对 React 项目的含义。
  • 当 Tom Occhino 和 Jordan Walke 在 2013 年的美国 JS 会议上展现新结构时,JavaScript 社区出乎意料的做出了负面反应。
  • “前期运用者”怎么协助开源 React 更上一层楼。Sophie Alpert 成为团队一员的那一刻,以及 React 对 JS 社区的“从头介绍”。
  • Netflix 是怎么成为第一家选用 React 的大型科技公司的。
  • JS 社区在构建今天的结构方面发挥了要害效果。
  • Dan Abramov 和 Andrew Clark 加入了 React 团队。

Rspack 发布

3 月 10 日,字节跳动自研 Web 构建东西 Rspack 正式发布。Rspack 是由 ByteDance Web Infra 团队孵化的根据 Rust 言语开发的 Web 构建东西,具有高功用、兼容 Webpack 生态、定制性强等多种长处,解决了咱们在业务场景中遇到的非常多的问题,让许多开发者的体会有了质的进步。

Rspack 的特性如下:

  • 发动速度极快:根据 Rust,项目发动速度极快,带给你极致的开发体会。
  • 闪电般的 HMR:内置增量编译机制,HMR 速度极快,彻底担任大型项目的开发。
  • 兼容 webpack:针对 webpack 的架构和生态进行兼容,无需从头搭建生态。
  • 内置常见构建才能:对 Typescript、JSX、CSS、CSS Modules、Sass 等供给开箱即用的支撑。
  • 默许出产优化:默许内置多种优化战略,如 Tree Shaking、代码紧缩等等。
  • 结构无关:不和任何前端结构绑定,保证满足的灵活性。

TypeScript 更新

2023 年,TypeScript 发布了一个首要版别,三个非必须版别:

  • 3 月 17 日,TypeScript 5.0 发布,更新内容如下:
    • 全新装修器
    • const 类型参数
    • extends 支撑多装备文件
    • 一切枚举都是联合枚举
    • --moduleResolutionbundler
    • 自界说解析标志
    • --verbatimModuleSyntax
    • 支撑 export type *
    • JSDoc 支撑 @satisfies
    • JSDoc 支撑 @overload
    • 编辑器中不区分巨细写的导入排序
    • 完善 switch/case
    • 优化速度、内存和包巨细
  • 6 月 1 日,TypeScript 5.1 发布,更新内容如下:
    • 改善函数返回值类型 undefined 的类型推断
    • gettersetter支撑设置不同类型
    • JSX 元素和 JSX 标签类型之间解耦类型查看
    • 带命名空间的 JSX 标签
    • typeRoots在模块解析中被查询
    • JSX 标签支撑链接光标
    • @Param JSDoc 标签中支撑代码补全
  • 8 月 22 日,TypeScript 5.2 发布,更新内容如下:
    • 支撑显式资源管理
    • 装修器元数据
    • 命名和匿名元组元素
    • 联合类型数组办法调用
    • 方针成员的逗号主动补全
    • 内联变量重构
    • 重大改变和正确性修正
  • 11 月 14 日,TypeScript 5.3 发布, 更新内容如下:
    • 导入特点
    • 导入类型中安稳支撑 resolution-mode
    • 一切模块形式均支撑 resolution-mode
    • switch (true) 缩小规模
    • 对布尔值进行比较的缩小规模
    • 经过 Symbol.hasInstance 进行 instanceof 类型缩小
    • 实例字段上的 super 特点拜访查看
    • 嵌入提示支撑跳转到类型的界说
    • 经过跳过 JSDoc 解析进行优化
    • 经过比较非规范交集进行优化
    • 整合 tsserverlibrary.jstypescript.js

React 推出全新官方文档

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

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

  • 教程和攻略:供给了许多的教程和攻略,协助开发者从零开始学习React或深入研讨特定主题。
  • 代码示例和演示:供给了一系列的代码示例和演示,展现了React的强壮和灵活性。
  • 最佳实践和技巧:了解最新的 React 最佳实践和技巧,学习怎么优化代码以完结更好的功用。
  • 社区论坛:与其他 React 开发人员联系,在项目中取得协助或在社区共享专业知识。
  • 新闻和更新:第一时刻了解 React 开发团队的最新版别、更新和新闻。

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 发布了两个首要版别:

  • 4 月 18 日,Node.js 20 发布, 更新内容如下:
    • 全新的 Node.js 权限模型
    • 自界说 ESM loader hooks
    • 安稳的测验运转器
    • Web Crypto API
    • 更新 V8 JavaScript 引擎到 11.3
    • 功用进步
  • 8 月 28 日,Node.js 20.6 发布,该版别原生支撑 .env 文件。
  • 10 月 17 日,Node.js 21 发布,更新内容如下:
    • 将 V8 引擎晋级到 11.8 版别
    • 安稳的WebStreamsfetch 功用
    • 用于更改模块默许值的新实验性标志
    • 对测验运转器进行更新
    • 内置 WebSocket 客户端

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

Vite 更新

  • 2 月,Vite 4.1 发布,该版别首要是将 Rollup 和 esbuild 的版别进行同步。值得注意的是 React 插件的晋级:Plugin-react 插件修正了许多热更新(HMR)方面的问题,而且选用 SWC 的版别增加了对 SWC 插件的支撑。
  • 3月,Vite 4.2 发布,该版别的首要改善是进步了 source map 的调试体会。Vite 团队与 Chrome Devtools 团队进行协作,修正了一些长时间存在的路径显现问题。经过x_google_ignoreList source map 扩展增加了扫除文件的选项来扫除仓库盯梢。
  • 4 月,Vite 4.3 发布,该版别专心于改善 devServer 的功用,功用大幅进步:

盘点2023年前端大事情

  • 7 月,Vite 4.4 发布,该版别增加了对 Lightning CSS 的实验性支撑。这是一个运用 Rust 编写的快速 CSS 编译东西,它可以加快 CSS 的处理速度。这个功用是可选的,需求显式地安装 Lightning CSS,并将其用于处理 Vite 内部的 CSS 转化,如导入内联和 CSS 模块化,还可以用于对 CSS 进行紧缩处理。
  • 11 月,Vite 5.0 发布,该版别专心于整理 API(删去不推荐运用的功用),并简化了解决长时间问题的几个功用,例如切换界说以运用正确的 AST 替换而不是 regex。团队还将继续采纳办法来完结未来的 Vite(Node.js 18+ 现在是必需的,CJS Node API 已被弃用)。

Vue.js 推出结构才能官方认证

4 月 25 日,Vue 正式推出结构才能官方认证,即 Vue.js 结构才能证书,该认证由 Vue School 与 Vue.js 团队协作供给支撑。

盘点2023年前端大事情
该认证的试题集和代码应战由 Vue.js 中心团队审核,包含尤雨溪。他们的直接参与有助于确保所测验的才能是完结 Vue.js 结构最佳运用所必需的才能。计划收入的一部分将用于支撑 Vue.js 开发。

Qwik 发布 1.0 版别

5 月 2 日,寻求极致功用的前端结构 Qwik 发布了 1.0 版别!Qwik 相似于 React,它也运用用 JSX 编写的组件作为模板,首要区别在于其专心于在阅读器中传输最少的 JavaScript。

Qwik 不依靠水合来为服务器上生成的页面带来交互性,而是运用一种称为可恢复性的技能来供给即时交互的 HTML。它经过在 HTML 自身中序列化运用的状况来作业。该项目由 Miko Hevery 领导,他是 AngularJS 的创立者,他的标语是“为 Web 运用增强 HTML”,Qwik 就是“HTML 优先的结构”。

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

盘点2023年前端大事情
Qwik 供给快速扩展的即用型集成,可以与您喜欢的库和结构轻松集成。只需在命令行上运转npx qwik add,然后从列表中挑选所需的集成即可:

  • 一次编写,任意布置:支撑多个干流云保管服务商,包含Azure、Cloudflare、Google Cloud Run、Netlify、Node.js、Deno、Vercel等,而且这个列表还在不断增长。以与保管供给商无关的办法编写运用,避免厂商确认。
  • UI组件:挑选运用QwikUI、Papanasi UI或经过实战检验的UI类库,如Material UI、ChakraUI、Radix或经过Qwik-React运用其他根据React的组件库。
  • 图画优化:运用 @unpic/qwik 和 qwik-image 对图画进行优化,以取得最佳用户体会。
  • 国际化:运用 $localize 和 qwik-speak 支撑多言语交给运用。
  • 身份验证:运用业界领先的AuthJS为运用增加多种认证战略。
  • CMS:Qwik 与 Builder.io 原生集成,可用于结构化数据和组件级头部内容创立和发布。
  • 款式:Qwik 答应延迟加载和组件级款式封装。结合PostCSS、Vanilla Extract或Tailwind等盛行解决计划,完结款式需求。
  • 测验:运用 Vitest 进行单元测验,运用 Playwright 和 Cypress 进行端到端测验。运用 Storybook 开发和测验组件。
  • 企业预备:运用qwik-nx为企业规模的运用和monorepo开发供给特殊的生成器和执行器。

React 推出 Canary 版别

React 团队期望给 React 社区供给一个选项,使其可以在新功用的规划挨近完结时就可以挑选运用这些功用,而不用等到它们发布为安稳版别,因而引进了一个新的官方支撑的 Canary 发布途径,这个途径将运用独自的 React 功用与 React 发布计划解耦。

  • React 团队为 React 引进官方支撑的 Canary 发布途径。由于它得到官方支撑,假如呈现任何回归,将像对待安稳版别中的过错相同紧迫处理。
  • 运用 Canary 可以在它们被发布为安稳的语义化版别之前开始运用独自的新 React 功用。
  • 与实验功用不同,React Canaries 仅包含有理由相信可以选用的功用,鼓舞结构考虑绑缚固定的 Canary React 版别。
  • 将在 React 官方博客上宣告 Canary 版别中的重大更改和新功用。
  • React 将在每个安稳版别中继续遵从语义化版别(Semver)。

Vue 发布 3.3 版别

5 月 11 日,Vue 3.3 正式发布,代号为 Rurouni Kenshin。此版别更新首要针对开发者体会进行了改善,特别是在运用 TypeScript 时的 SFC <script setup>。与 Vue 言语东西(以前称为 Volar)1.6 的发布相结合,解决了在运用 TypeScript 时存在的许多长时间困扰问题。

2023 Google I/O 大会举办

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

  • 容器查询
  • 款式查询
  • :has()
  • nth-of
  • text-wrap: balance
  • initial-letter
  • 动态视口单位
  • 广色域色彩空间
  • color-mix()
  • 嵌套
  • 级联层
  • 效果域款式
  • 三角函数
  • 单个改换特点
  • popover
  • 定位锚点
  • selectmenu
  • 离散特点过渡
  • 翻滚驱动的动画
  • View transitions

Nuxt 更新

  • 5 月 16 日,Nuxt 3.5 发布,该版别支撑了最新的 Vue 3.3 版别、新的默许设置、交互式服务端组件、类型化页面、环境装备等。
  • 6 月 23 日,Nuxt 3.6 正式发布,该版别带来了功用优化、彻底静态的服务端组件、更好的款式内联、静态预设、增强的类型安全等许多功用改善。
  • 8 月 25 日,Nuxt.js 3.7发布,该版别带来了全新的 CLI,原生Web流和呼应,烘托优化,异步上下文支撑等功用。
  • 10 月 19 日,Nuxt 3.8 发布,该版别带来了内置 Devtools、主动安装 Nuxt Image、新的运用清单等功用。

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 发布】** 于 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 公布正在研讨的方向:
  • React Server Components (RSC)
  • 优化资源加载
  • 静态服务端烘托优化
  • React 优化编译器
  • 离屏烘托
  • 过渡盯梢
  • 新的 React 文档

多个结构宣告放弃TypeScript

6 月,前端结构 Svelte 的创立者 Rich Harris 提出要将 Svelte 从 TypeScript 切换到运用 JSDoc 的 JavaScript。这种改变得到了 Svelte 团队的大力支撑,他们决定在 Svelte 4 代码库中从 TypeScript 迁移到 JavaScript JSDoc。

盘点2023年前端大事情
8 月,前端东西 Turbo 宣告放弃 TypeScript。
盘点2023年前端大事情

Stack Overflow 2023 开发者查询陈述

6 月 15 日,程序员社区 Stack Overflow 正式发布了 2023 年度的开发者查询陈述。陈述显现,本年,JavaScript 现已连续第 11 年成为最常用编程言语。

盘点2023年前端大事情
Node.js 和 React.js 是一切受访者最常用的两种 Web 技能。值得注意的是 Next.js 从 2022 年的第 11 位上升到本年的第 6 位。
盘点2023年前端大事情
Visual Studio Code 依然是一切开发人员的首选 IDE,本年它在一切开发人员中的运用率从 75% 增加到 81%。
盘点2023年前端大事情
Rust 是最受推重的言语,超越 80% 运用它的开发人员期望明年再次运用它。
盘点2023年前端大事情

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 的更新内容包含:

  • 自始至终查找数组:findLast()findLastIndex()
  • Hashbang 语法
  • 经过副本更改数组:toReversed()toSorted()toSpliced()with()
  • Symbol 作为 WeakMap 的键

React 中心成员 Dan Abramov 离任

7 月 20 日,React 团队中心成员、Redux 作者 Dan Abramov 在社交途径表明,他即将脱离 React 团队,敞开新的旅程。

盘点2023年前端大事情
脱离 Meta 就意味着要脱离 React 团队,也意味着今后不会杯被任何公司活跃资助全职从事 React 作业,可是 Dan 表明会继续参与团队的作业并参加会议。
盘点2023年前端大事情

WebStorm 更新

2023 年截止至今,WebStorm 发布了两个首要版别,最后一个首要版别现已在路上了。

  • 3 月 28 日,WebStorm v2023.1 发布,该版别的首要新功用和改善包含:
    • 结构和技能:Astro 支撑、Vue 改善、复制粘贴时增加的组件导入、React 特点的形参信息、将大局符号和导出符号主动导入 Angular 模板、Svelte 过错修正等。
    • JavaScript 和 TypeScript:将字符串主动转化为模板文字,为主动导入更好地确认导入库的优先级,在 TypeScript 和 JavaScript 之间对齐导入行为等。
    • HTML和 CSS:Tailwind CSS 装备、装备 HTML 代码完结的选项、在 Markdown 文件中从头格局化表格的才能等。
    • 全新 UI:东西窗口的垂直拆分、紧凑形式、macOS 上的项目选项卡、从头规划的 run 小部件等。
    • 用户体会:完好的 IDE 缩放、每个东西窗口设置的新记住巨细、为新项目装备保存操作的设置、在智能形式下扫描文件以树立索引等。
    • 版别操控:改善了 GitHub 的代码检查作业流程、Structure 东西窗口中的 VCS 状况色彩提示、改善的 Branches 弹出窗口等。
  • 7 月 24 日,WebStorm v2023.2 发布,该版别的首要新功用和改善包含:
    • JavaScript、TypeScript 和 CSS:改善了 JavaScript 和 TypeScript 的过错格局、快速修正和实时模板的主动导入、CSS 嵌套支撑、将色彩转化为 lch 和 oklch 等。
    • 结构和技能:Vue 言语服务器支撑以及对供给/注入和界说模型的支撑、对 Next.js 中 App Router 的更好支撑、React hooks 的新实时模板、SolidJS 和 Preact 改善等。
    • 新 UI:改善了主东西栏自界说、彩色项方针题、带有浅色标题的浅色主题、从头规划的汉堡菜单等。
    • 集成开发东西:AI Assistant 预览、GitLab 集成、提交特定代码行的选项、Docker 改善、HTTP 客户端改善等。
    • 用户体会:“Search Everywhere”中的文本查找、“项目”视图中按修正时刻对文件进行排序、“设置”中的主张插件等等。
    • 插件开发:为插件开发人员供给 LSP 支撑。

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 宣告中止保护,储存库已存档。

盘点2023年前端大事情

发布仅三年的前端东西链 Rome 凉了。

盘点2023年前端大事情

Bun 发布 1.0 版别

9 月 8 日,前端运转时 Bun 1.0 正式发布,如今,Bun 现已安稳而且适用于出产环境。Bun 不仅是一个专心功用与开发者体会的全新 JavaScript 运转时,还是一个快速的、全能的东西包,可用于运转、构建、测验和调试JavaScript和TypeScript代码,无论是单个文件还是完好的全栈运用。

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

盘点2023年前端大事情
仅一个月内,就在 GitHub 上取得了超越两万颗 Star。
盘点2023年前端大事情
Bun 不仅仅是一个运转时。它也是:

  • 一个包管理器 (相似 Yarn、 NPM、 PNPM)
  • 一个构建东西 (相似 Webpack、 ESBuild、 Parcel)
  • 一个测验运转器

由所以一个新的东西,所以难免存在一些问题。1.0 版别发布之后,Bun 的作者一直活跃的改Bug、增加新功用。

盘点2023年前端大事情
延伸阅览:JS三大运转时全面比照:Node.jsvsBunvsDeno

Chrome 更新

9 月,Chrome 迎来了 15 岁生日。尽管曩昔 15 年发生了许多改变,但开始的方针依然不变——构建一个快速、牢靠、安全且易于运用的阅读器

这一方针推进着 Chrome 团队对 Chrome 所做的每一项改善。咱们以比任何其他阅读器更快的速度向数十亿用户发布有用的功用和更新,并与开发人员协作,协助他们进步网站功用。本年,Chrome在基准测验中完结了最快的加载速度。为了增强安全性,协助将网络默许转向 HTTPS,并使人们更简略管理和保护其密码。除此之外,还融入了机器学习,以供给更易于拜访和个性化的阅读体会。

为了庆祝 15 岁生日,新版 Chrome 桌面版带来了全新的外观、全新的查找功用、全新的运用商铺、全新的安全战略,以让用户继续在 Chrome 上轻松、快速、安全地阅读。

盘点2023年前端大事情

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 更新

  • 4 月7 日,Next.js 13.3 发布
  • 5 月 5 日,Next.js 13.4 发布,在该版别中,App Router 现已安稳,可用于出产。
  • 9 月 19 日,Next.js 13.5 发布,该版别经过以下办法进步了本地开发功用和牢靠性:
    • 本地服务器发动速度进步 22%:运用App和Pages Router可以更快地进行迭代
    • HMR(快速改写)速度进步 29%:在保存更改时进行更快的迭代
    • 内存运用量减少 40%:在运转next start 时丈量
    • 优化的包导入:运用盛行的图标和组件库时进行更快的更新
    • next/image 改善:支撑标签、暗形式等
    • 修正了超越 438 个过错!
  • 10 月 26 日,Next.js 14 发布,该版别的首要更新如下:
    • Turbopack:App & Pages Router 经过 5000 个测验
      • 本地服务器发动速度进步了 53%
      • 经过快速改写,代码更新速度进步 94%
    • 服务端操作(安稳):逐步增强的数据改变
      • 集成了缓存和从头验证
      • 简略的函数调用,或者与表单原生配协作业
    • 部分预烘托(预览):快速的初始静态呼应 + 流式动态内容
    • Next.js Learn(全新):教授 App Router、身份验证、数据库等内容的免费课程。

ViteConf 2023

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

盘点2023年前端大事情
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。

  • 5 月 4 日,Angular 16 发布,首要特性如下:
    • 开发者预览版引进全新的 Angular 呼应式模型,供给 Angular Signals 库,与 RxJS 坚持互操作
    • 服务器端烘托和水协效果增强
    • 开发者预览版引进根据 esbuild 的构建体系
    • 运用 Jest 和 Web Test Runner 进行更好的单元测验
    • 其他一系列改善开发者体会的功用
  • 10 月 7 日,Angular 发布全新官方文档:Angular.dev。并发布了全新 Logo。

盘点2023年前端大事情

  • 11 月 8 日,Angular 17 发布,该版别带来了许多重要更新,包含:
    • 引进了可延迟的视图,将功用和开发者体会进步到新的高度。
    • 内置操控流循环使运转速度在公共基准测验中进步了高达90%。
    • 混合烘托和客户端烘托的构建速度别离进步了87%和67%。
    • 全新的外观表现了 Angular 未来的功用。
    • 全新的互动学习之旅,带来更好的用户体会。

Prittier 重金赏格用 Rust 重构

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

终究,Biome 赢得 Prettier 应战的 $22.5K 奖金。