一年一度的年更系列又来了。
看看 2024 年前端发生了哪些值得关注的事情吧:
太长不看版(这次不是 AI 生成的哈!):
语言特性 :今年发布的 EcmaScript 2024
版本平平无奇,没有什么比较大的改动,几项新特性顺利进入标准,数组分组方法是最实用的;TC39 今年召开了 4 次会议,新增了 Stage 2.7
阶段,推进了十几项提案的进展,其中最让我感兴趣的 Signals
,这个去年爆火的概念今年进入标准了;TypeScript 一共发布了 5.4-5.7 四个大版本,新的 NoInfer
类型,支持未初始化变量检查,都是不错的更新。
运行时 :今年 Node.js 发布了 22、23 两个大版本,其中比较重要的一项更新就是支持 require('esm')
,但是因为在顶层 await 上存在兼容性问题,使这两个版本可能会带开破坏性更新。Deno 今年发布了 2.0 版本,带来了不小的增强,Bun 也在今年支持了 Windows 系统。另外今年还新发布了一款比较轻量级的运行时 WinterJS
,而去年发布的 LLRT
也在今年迎来了不少更新,得到更广泛应用。不过在 JS 年度调查报告里,Bun、Deno 还都没能撼动 Node.js
的地位。
前端框架 :今年前端框架最大的更新就是 React 19
版本了,React 也发布了 Compiler
,这意味着 React 终于不再只关注运行时,把性能优化的重担全部抛给开发者了,这个版本的出现会一定程度降低 React 的开发门槛;Angular 在今年发布了 18、19 两个大版本,开发体验上有所提升,在今年的 JS 年度调查报告里开始反转了;另外 Vue 在今年引入了 alien-signals
,噱头很大,号称响应式性能提升了 400%;其他还包括 Svelte
发布了迄今最大更新的 v5 版本。
全栈框架 :Next.js 15
主要是配合 React 19
版本,另外还带来了一些开发体验上的优化;SolidJS
今年也推出了全栈框架 SolidStart
,首次引入了服务器函数的概念;Astro 5.0
也在今年发布,带来了 Astro Content Layer
和 Server Islands
这两个新功能;在 JS 年度调查报告里,Next.js
在这个领域还是绝对王者。
编译工具 :Vite
在今年势头非常强劲,生态体系中重点更新包括 Vite 6.0、Vitest 2.0、VitePress 1.0
以及 Rolldown 1.0
,更是在今年的 JS 年度调查报告里更是独揽 4 项大奖。另外字节也推出了基于 Rust 的编译工具 Rspack 1.0
。
浏览器 :浏览器生态方面,今年 Chrome 共发布了 121-131
10 个大版本,重点包括 CSS 锚点定位、scheduler.yield() API
以及大量的 AI
集成能力,另外 Chrome 的性能面板今年也迎来重大改版,INP 取代 FID 成为新的 Core Web Vitals
。
跨端开发 :Electron 在今年发布了 29-33
5 个大版本,基本属于常规更新;值得关注的是这个领域的新星 Tauri
发布了 2.0 版本,带来了移动平台(iOS、Android)的支持,已经给 Electron 带来不小的压力。Meta 在今年开源了面向 Web
和 Native
的跨平台 React
解决方案;React Native
在今年的 0.76
版本启用了全新架构,相当于一次全面重写,官方宣称其已经具备了生产环境的条件。
AI工具 :今年是 AI 工具爆发的一年,AI 代码编辑器 Cursor 编程能力迎来全面升级,最强竞品 Windsurf
相继发布;AI 辅助编码工具 Github Copilot
迎来重大升级,并且宣布免费额度,字节也推出了类似的产品 Marscode
;在 AI 网站生成领域,V0 支持了 Vue,并且也支持了创建全栈项目,而且类似的项目如 Bolt.new
,也相继出现。虽然这些 AI 工具本身和前端并无绑定关系,但是大家应该也能明显的感觉到,受这些 AI 编码工具的影响,前端的开发方式正在发生质的改变。
以下是按时间轴的详细介绍:
[1-4] Chrome 三方 Cookie 禁用已正式开始 根据之前公布的计划(自 2024
年 1 月 4 日起),Chrome 已经开始对 1% 的用户默认限制第三方 Cookie
以方便进行测试(达到剩余 1% 用户可能需要数天),这个限制计划在 2024
年第三季度逐步实施到达 100%
的用户。
但后续 Chrome 又发布了一项声明,表示不再寻求全面禁用三方 Cookie ,而是给用户提供可以选择的新体验,但是时至今日,1% 的三方 Cookie 禁用仍然存在!
了解更多:Chrome 三方 Cookie 禁用已正式开始!
[1-23] Chrome 121 发布 Chrome 121 带来了如下更新:
Element Capture API :允许捕获并记录特定 HTML 元素,尤其适用于 Web 视频会议应用,可以去除遮挡内容。Speculation Rules API 更新 :支持 document rules 文档规则,使浏览器从页面元素获取预渲染 URL 列表,提升用户体验。CSS 语法更新 :新增 scrollbar-color 和 scrollbar-width 属性,允许自定义滚动条;font-palette 属性支持动画;伪元素 ::spelling-error 和 ::grammar-error 允许自定义拼写和语法错误显示。Devtools 更新 :提供更友好的 COXP、CSP 等安全 Header 显示,以及 CSP 违规示例展示。了解更多:Chrome 121 发布,新特性一览!
[2-6] TC39 第 100 次会议,新增 Stage 2.7 阶段 每个新特性在被正式纳入 JavaScript 规范之前,需要通过一个提案流程。这一流程从 0 阶段(初步想法)一直到 4 阶段(准备发布)。所有提案流程都是以零为编号开始的,通常包含 0(草案提案)、1(提案通过)、2(特性定义)、3(推荐实施)、和 4(完成并发布)。
新增的 2.7 阶段相当于过去的 3 阶段,但更强调测试的编写和验证。提案进入 2.7 阶段时,设计已经完成,规范也已完整,此时需要编写实际代码(包括测试和非 polyfill 实现)来获取反馈,以便进一步推进。
今年 TC39 的最新提案推进进展我会在后面的 104 次会议介绍。
了解更多:https://tc39.es/process-document/
[2-6] jQuery 4.0 Beta 版本发布 jQuery 4.0.0 Beta 版本经过长时间开发,包含了一些重大更改,包括优化性能和修复错误。支持已被移除对 IE 10 及更旧版本的支持,虽对 IE 11 仍过渡保留支持。已弃用多版本的 API 被移除,还有一些内部参数及复杂的“魔法”行为被删除。源代码迁移到 ES 模块;优化 slim 版本体积,删除了 Deferred 和 Callbacks,推崇使用原生 Promise。jQuery.ajax 现在支持二进制数据,包括 FormData。
后来 7 月份又发布了第二个 beta 版本,其中包括新增了 jQuery.fn.off
方法用于更方便地移除事件监听器,同时对 jQuery.fn.on
方法也进行了优化,提高了效率和稳定性。此外,该版本在选择器性能和 DOM 操作方面都有了显著的提升。在兼容性方面,开发团队进行了广泛的测试并修复了一些已知问题。安全性方面,该版本也对 jQuery 代码做出了改进,修复了一些潜在的安全漏洞。
了解更多:https://blog.jquery.com/2024/07/17/second-beta-of-jquery-4-0-0/
[2-9] HONO 发布 4.0 版本,支持静态站点生成 Hono
号称可以在任何 JavaScript 运行时环境中运行,包括 Cloudflare Workers、Fastly Compute、Deno、Bun、Vercel、Netlify、AWS Lambda、Lambda@Edge 和 Node.js
。
Hono v4.0.0 新增了包括静态网站生成、客户端组件和基于文件的路由三个主要功能。新的静态网站生成工具使得从 Hono 应用生成静态页面变得简单,并支持多种部署平台。客户端组件允许使用类似 React 的 JSX 语法进行开发,支持多种 Hook 以及易于使用的视图过渡 API。基于文件的路由通过名为 HonoX 的独立包实现,为构建大规模应用提供灵活支持,同时确保快速的服务器端渲染。整体上,Hono 继续保持其轻量级的核心,仅 12KB 的代码提供基础功能。
了解更多:Hono - 适用于任何 JavaScript 运行时的 Web 框架!
[2-20] Node.js 正式推出吉祥物 Node.js 自 2009 年诞生以来,一直没有属于它的吉祥物,在公开征集了大家的意见后,终于去推出了它的吉祥物:“火箭龟”。
了解更多:Node.js 正式推出吉祥物
[3-4] Claude 3系列模型发布 Claude 3.5 Sonnet
是目前业界公认的写代码能力最好的模型(GPT4-O3 除外,太贵了),目前主流的 AI 编辑器、代码生成网站默认采用的都是此模型。
Claude 3
系列在编程领域的优势在于其卓越的推理和数学能力、长上下文窗口支持、多模态输入处理、高效的代码生成和图像处理能力、快速响应性能、高准确性和成本效益,使其成为处理复杂编程任务的强大 AI
助手。
了解更多:https://h5ma.cn/Claude3
[3-9] WebAssembly 支持 JavaScript Promise API WebAssembly
的 JavaScript Promise
集成 (JSPI) API 在 Chrome M123
版本中进入原产地试用阶段。JSPI API 旨在允许编译为 WebAssembly
的顺序代码访问异步的 Web API,该架构使得 WebAssembly
应用可以在 Promise
返回时挂起,并在其被解析后恢复。
了解更多:https://v8.dev/blog/jspi-ot
[3-12] WinterJS 1.0 发布 WinterJS
是一款极快的 WinterCG
兼容的 Javascript
运行时,它使用 SpiderMonkey
引擎执行 JavaScript
,并使用 Tokio 处理底层的 HTTP 请求和 JS 事件循环。WinterJS
运行时还可以被编译为 WebAssembly
,因此它也是第一个可以完全在 Wasmer Edge
上运行的生产级别的运行时。
了解更多:号称迄今最快?又一个新的 JavaScript 运行时发布了!
[3-12] Meta 开源面向 Web 和 Native 的跨平台 React 解决方案 Meta 开源了 react-strict-dom
库,该库使用 Web API 来渲染组件,从而改进和标准化了用于 Web 和 Native 跨平台 React 组件的编写方式,使开发者可以更轻松地创建通用 React 组件,同时提高了兼容性和开发效率。
了解更多:Meta 最新开源!面向 Web 和 Native 的跨平台 React 解决方案
[3-16] INP 成为 Web Core Vital
“交互到下一次绘制(Interaction to Next Paint
,简称 INP)在 3 月份取代首次输入延迟成为核心网络关键指标,以帮助你更全面地衡量页面响应能力,而不仅仅局限于首次用户输入。从那时起,在移动设备上具有 "良好" INP 的网站数量增加了9%,这意味着整个网络上的用户体验更快、更愉快。”
了解更多:https://web.dev/articles/inp
[3-21] VitePress 1.0 发布 VitePress
是一种由 Vue 团队推出的现代化静态站点生成器。VitePress 旨在构建快速、以内容为中心的网站,并能够将 Markdown 格式的内容转换为静态 HTML 页面,支持多平台部署。
VitePress
基于 Vite 和 Vue,作为 VuePress 的继任者,提供了多样化的使用场景,包括技术文档编写、博客、作品集与营销网站等。它支持自定义主题和灵活的 API,能够简化开发者体验并支持实时内容更新。此外,VitePress 结合静态和单页应用程序 (SPA) 模型,实现了初始快速加载和导航时的无缝交互体验,在提升性能的同时,优化了用户体验和 SEO。
了解更多:https://blog.vuejs.org/posts/vitepress-1.0
[4-1] Bun 支持了 Windows
系统 Bun 1.1 正式支持了 Windows
系统,也意味着其覆盖了所有主流操作系统。
性能方面也大幅提升,如在 Windows
上安装依赖速度更快,文件系统操作等方面也有优化;改进了 Node.js
兼容性,修复上千个 bug
并新增大量 API
支持;新增了如 .bunx
文件类型等新特性;WebSocket
客户端趋于稳定;内置的测试框架得到更新,增加了更多期望方法以及模块模拟功能等。
了解更多:https://bun.sh/blog/bun-v1.1
[4-3] TypeScript 5.4 发布 TypeScript 5.4
版本带来一些新特性和一些破坏性变更。新特性包括优化闭包中的类型收窄、引入了 NoInfer
工具类型以改善类型推断过程、为 Object.groupBy
和 Map.groupBy
添加类型声明。破坏性变更包括更准确的条件类型约束和更灵敏的类型交集处理。文章详细解释了这些特性的实现以及可能带来的影响,使开发者可以更好地理解和应用这些更新。
了解更多:TypeScript 5.4:带来新的类型和一些 Break Change
[4-8] TC39 推出 Signals 的标准化提案 在前端开发领域,状态管理总是一个绕不开的话题。随着 Web 应用程序越来越复杂,对于高效且可靠的状态管理解决方案的需求也水涨船高。2022 年,JavaScript
世界中出现了一个新概念:Signals
,这个概念一度被大家炒作为前端状态管理的未来。
Rob Eisenberg
以及 Daniel Ehrenberg
正式公开发布了 Signals
的 TC39 标准化草案,目前处于 Stage0 阶段,并且也推出了符合规范的 polyfill
。
了解更多:Signals 的标准化提案,来了!
[4-22] Node.js 22 发布 Node.js 22
版本主要更新包括:增强的 require()
函数以支持 ECMAScript
模块(ESM
)的直接导入,内置 WebSocket
客户端的引入,以及 V8 JavaScript
引擎的更新。
了解更多:https://nodejs.org/en/blog/announcements/v22-release-announce
[4-27] Iterator Helper 提案正式获得浏览器支持 Iterator
(迭代器)和数组的概念类似,在 JavaScript
中都是用于存储和管理数据集合的机制。但实际开发中,我们使用数组的场景要远远多于 Iterator
,主要原因还是因为 Iterator 太难用了,它不像数组一样给我们提供了很多便捷的高阶函数(如 map、filter 等) 。
Iterator helpers
提案正式出来解决这个问题的,它已经有几年时间了,目前处于 Stage3 阶段。
Iterator helpers
提供了一整套方法,使得迭代器的操作变得像数组一样简单。它允许你可以以链式调用的方式来组合方法,比如可以先用 .map() 处理数据,紧接着用 .filter()
筛选出需要的部分,最后用 .toArray()
将其转换成数组。
在 V8 12.2/Chrome 122
中,Iterator helpers
正式获得了支持。
了解更多:ECMAScript 的 Iterator Helper 提案正式获得浏览器支持!
[5-10] Chrome 125 支持 CSS 锚点定位 Chrome 125 新增了一个比较重要的特性:CSS 锚点定位 API。这个新功能允许开发者通过原生方式定位相对于其他元素的元素,从而简化复杂布局的实现,例如菜单、工具提示和对话框等。具体实现方式包括隐式锚点和显式锚点,通过 anchor-name
和 position-anchor
属性进行元素定位。
了解更多:Chrome 125:CSS 锚点定位来了!
[5-14] Google I/O 2024:下一代 Web 应用的新模型 Google I/O 2024 的值得关注的重点内容就是 Web AI 的新模型、工具和 API,可以直接在用户设备的浏览器中运行 AI 任务,通过 WebAssembly 和 WebGPU 等现代 Web 技术实现即时、隐私友好且低延迟的 AI 服务。
同时,Google 推出了 Visual Blocks,这是一种基于节点图编辑器的机器学习原型工具,简化了 AI 项目的原型设计。此外,还介绍了如何在 Chrome 中使用 JavaScript 大规模实现 Web AI 和进行模型测试。
了解更多:Web AI:下一代 Web 应用的新模型、工具、API
[5-22] SolidStart 1.0 发布 SolidStart
是一个新的 JavaScript
框架,用于构建和部署 SolidJS
应用。
SolidStart
强调服务器端渲染和优化,采用灵活的路由机制,并首次引入“服务器函数”功能,可以让函数仅在服务器上执行。其基础轻量级设计,支持多种服务器端和客户端功能,旨在提供开发者一个灵活、高效的框架,以更好地抓住日益增长的系统复杂性。
了解更多:https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come
[5-22] Angular v18 发布 Angular v18
版本正式发布,带来了一系列新功能和改进。
此次更新的亮点包括实验性的无区分检测(zoneless change detection
),该功能旨在提高性能和开发者体验;Angular.dev
成为新的官方开发者文档网站;Material 3
、可延迟视图和内置控制流现已稳定;以及服务器端渲染方面的增强。这个版本还改进了调试体验,增加了事件重播功能,并引入了用以渐进式提高应用性能的部分水化技术。通过这些更新,Angular
继续推进其架构的演进,提高开发效率和应用性能。
了解更多:https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe
[6-10] WWDC24 - iOS18 下的 WebKit 更新 在 WWDC 2024
上,iOS 18 中 WebKit 的主要更新包括支持 View Transitions API
、样式查询、背景滤镜内容可见性优化、新的 Web API 功能(如空间照片和 WebXR 支持)、加强的安全策略和 JavaScript 正则表达式的改进。这些更新提升了动画效果、性能优化、安全性和功能丰富性,实现了更好用户体验的浏览器表现。
了解更多:WWDC24 - iOS18 下的 WebKit 有哪些更新?
[6-11] Chrome 126:新元素
、多页 View Transitions API
元素是 HTML 中的新元素,用于改进 Web 权限的请求和管理。主要特点包括:
声明式请求权限 :通过
等声明方式请求特定权限,如摄像头、麦克风等。用户交互 :用户可以直接通过与该元素交互来允许或拒绝权限请求,提升用户体验和安全性。动态文本 :元素会根据权限状态自动更新其显示内容,提供即时反馈。这个版本另一个值得关注的是 View Transitions API
的多页面支持,也就是跨文档视图过渡(cross-document view transitions
)是当视图过渡发生在两个不同文档之间时使用的技术,适用于多页面应用(MPA)。与相同文档视图过渡相似,跨文档视图过渡利用了元素快照和 CSS 动画,但其触发机制不同。跨文档过渡不需要调用 API,只需用户在同一来源的两个页面间导航即可触发。
了解更多:一个新的 HTML 元素:
!
[6-15] React Compiler 开源 React Compiler
于 2024 年 6 月在 React Conf 2024
上开源,并在 10 月 22 日发布了 beta 版本。
React Compiler
是一款针对 React 的优化编译器,目前已在 Instagram 的网页门户中投入生产使用 。它旨在通过自动生成类似 memo
、useMemo
和 useCallback
的调用等先进编译技术,强化 React 的核心编程模型,减少不必要的重新渲染,从 “自动记忆化编译器” 演进为 “自动响应性编译器”,确保 React 应用仅在状态值发生实质性变化时才触发重新渲染,进而提高性能,简化开发流程,降低开发者的工作量和代码复杂度。
了解更多:React Compiler 介绍
[6-26] ECMAScript 2024 发布 ECMAScript 2024 语言规范新增六项提案:
文章主要介绍了 ECMAScript 2024 语言规范中的几个新提案。摘要如下:
格式良好的 Unicode 字符串提案 :引入方法 String.prototype.isWellFormed()
和 String.prototype.toWellFormed()
,检查和转换字符串中存在的孤立代理对。异步 Atomics 等待提案 :提供异步的 Atomics.waitAsync()
方法,支持在主线程上操作共享内存而不会阻塞。RegExp v 标志提案 :增强正则表达式的功能,支持 Unicode 字符串属性的检查,并提供减法、交集和并集匹配。ArrayBuffer 转移提案 :增加 ArrayBuffer.prototype.transfer
和 transferToFixedLength
方法,支持 ArrayBuffer 大小调整和数据迁移。数组分组提案 :引入静态方法 Object.groupBy
和 Map.groupBy
,实现类似 Lodash 和 Ramda 的数组分组功能。Promise.withResolvers 提案 :添加 Promise.withResolvers
方法,方便创建和管理延迟的 Promise 实例。了解更多:ECMAScript 2024 新特性解读!
[7-15] Chrome 首次推出 LLM API Chrome 宣布提供内置的 Gemini Nano
支持,这意味着我们的网站或网络应用现在可以直接运行 AI 功能,而不需要自己去部署或管理 AI 模型。
了解更多:Chrome 居然提供了可以直接调用 LLM 的 API!
[8-22] Node.js 对 TypeScript 提供了原生支持! Node.js 22.7.0 版本中,引入了一个新的实验性标志,--experimental-transform-types
。
通过这个标志,可以启用将仅用于 TypeScript 的语法转换为 JavaScript 代码的功能。这个特性使得 Node.js 能够原生支持 TypeScript 语法,例如枚举(Enum)和命名空间(namespace) 等,而不需要引入额外的编译工具。
[8-28] Rspack 1.0 发布 Rspack
是基于 Rust 编写的下一代 JavaScript 打包工具, 兼容 webpack 的 API 和生态,并提供 10 倍于 webpack 的构建性能。
了解更多:Rspack 1.0 正式发布了!
[9-1] Vue 3.5 发布 Vue.js 3.5 版本代号为 "Tengen Toppa Gurren Lagann",此更新没有破坏性更改,主要包含内部优化和新功能。关键亮点包括响应系统的重大重构,提升性能,减小内存使用,以及解决了服务端渲染(SSR)中的一些问题。新特性方面,有反响式属性解构,服务器端渲染改进(如延时激活),自定义元素的增强,新的 API useId()
和模板引用(useTemplateRef()
)等功能。
了解更多:https://blog.vuejs.org/posts/vue-3-5
[9-13] CSS Values and Units Module Level 5 CSS 工作组于 2024 年 9 月 13 日发布了 CSS 值和单位模块第 5 级(CSS Values and Units Module Level 5
)的首个公众工作草案。这个模块描述了 CSS 属性接受的通用值和单位及其语法,并且引入了一些有趣的新特性。
这些功能中的很多功能都有一个共同点:它们简化了 CSS 代码。以前需要多条规则或复杂解决方案才能实现的功能,现在只需一行或两行 CSS 即可实现。
了解更多:CSS 即将迎来一波新的值和函数!
[9-14] HTTP QUERY 方法草案发布 在传统的 HTTP
协议中,GET
和 POST
是最常用于请求数据的两种方法。然而,它们各自有着一定的局限性。特别是当请求数据量较大时,通过 GET 方法将参数嵌入 URL 中显得不够灵活。另一方面,尽管 POST
方法允许在请求体中传递大量数据,却无法保证操作的幂等性和安全性。
为了弥补这些不足,HTTP
工作组提出了一种新的方法 — QUERY
,该方法既能承载大量请求数据,又能保证请求的幂等性和安全性。
了解更多:HTTP 将增加一个新的方法类型!
[9-17] Chrome 129 :推出原生的 “时间切片” 能力 Chrome 129 发布,其中一项最值得关注的就是 scheduler.yield() API:
scheduler.yield() API :这一API允许开发者将长时间运行的JavaScript任务分块执行,以防止阻塞主线程,从而提高浏览器响应用户输入的能力。这有助于避免网页卡顿及优化关键性能指标,如INP。Intl.DurationFormat 支持 :该功能允许以多种语言格式化时间持续时间,例如法语。CSS interpolate-size 属性和 calc-size() 函数 :这些新特性简化了基于尺寸关键词的CSS动画,以便实现更流畅的过渡效果。CSS 锚点定位的变更 :经过CSS工作组内部讨论,调整了相关命名以提升可读性和记忆性,其中 inset-area
改名为 position-area
,position-try-options
改名为 position-try-fallbacks
。了解更多:Chrome 129:正式推出原生的 “时间切片” 能力!
[10-1] 尤雨溪创办新公司,宣布打造下一代 JavaScript 工具链! 尤雨溪创办了新公司 VoidZero Inc.
,并成功获得了 460
万美元的融资,目标是打造下一代 JavaScript
工具链。这家公司旨在构建高性能并具备统一开发体验的开源工具链,以解决当前 JavaScript
生态系统中的碎片化问题。
VoidZero
引入了一些创新组件,如 Oxc-parser、Rolldown
等,提升了整体的解析和打包速度。公司计划在未来几个月稳定和推广这些工具,与生态系统的其他参与者协作,确保平稳过渡并保持开源战备状态。
了解更多:融资三千万!尤雨溪创办新公司,宣布打造下一代 JavaScript 工具链!
[10-2] PC 跨端框架 Tauri 2.0 发布 Tauri
是一个用于构建轻量级、快速二进制文件的框架,支持所有主流的桌面平台(macOS、Linux、Windows
)和移动平台(iOS、Android
)。开发者可以将任意前端框架(如 HTML、JavaScript
和 CSS
)与 Rust、Swift
和 Kotlin
等语言编写的后台逻辑结合起来,创建用户体验出色的应用程序。
这次更新的一大亮点是对 iOS 和 Android 的原生支持,扩大了其应用场景。开发者可以无缝将现有的桌面应用逻辑重用于移动平台。Tauri 提供了全新的 create-tauri-app
项目,简化开发流程,并引入了热模块替换功能、全新的权限系统和重构的插件系统。此外,Tauri 2.0
提供了更高效的内部通信和多渠道分发支持。与 Electron
相比,Tauri 2.0
提供了更轻量级和现代的跨平台开发体验。
了解更多:Tauri 2.0 发布:这次能击败 Electron 吗?
[10-5] Bolt․new 发布 Bolt.new
是一个基于浏览器的全栈开发平台,利用AI和 WebContainer
技术,可在浏览器中完成从代码编写到应用部署的全栈开发流程,能创建和运行完整项目,包括与第三方 API
交互等,AI
还可控制开发环境及自动修复错误;
相比 V0 ,Bolt.new
给程序员的冲击会更大,因为它是真正意义上的可以基于 AI 生成全栈项目了,而 V0 当时大多数情况还是在以生成原型、DEMO 在使用。
了解更多:https://bolt.new/
[10-9] Deno 2.0 发布 Deno 2.0 版本经发布:
全局变量变化 :移除了 window
全局变量,建议使用 globalThis
或 self
。同时,引入了 process
全局变量来增加与 Node.js 的兼容性。依赖管理改进 :deno add
和 deno remove
子命令被增强,并引入了新的 lock 文件格式。权限系统更新 :引入了新的 Deno.errors.NotCapable
异常类型,以便更好地区分 Deno 权限和操作系统错误。API 稳定化 :许多不稳定的 API 已经在 Deno 2 中稳定,不再需要特定的标志启用。兼容性增强 :改进了对 CommonJS 模块的支持,并允许通过 require
导入 ES 模块,进一步提升了与 Node.js 和 npm 的兼容性。TypeScript 支持 :升级到 TypeScript 5.6,增强了对 Node.js API 的类型检查支持。了解更多:Deno 推出 2.0 版本,研发体验迎来大幅增强!
[10-12] TC39 104 次会议,推进诸多新提案进展 ECMA 国际技术委员会 39(TC39)在东京召开了第 104 次大会,讨论了多项 ECMAScript(JavaScript)提案的进展情况,批准了其中多项提案进入下一个阶段。
「Stage 4」迭代器助手(Iterator Helpers) 「Stage 4」导入属性与 JSON 模块(Import Attributes & JSON Modules) 「Stage 4」正则表达式修饰符(Regular Expression Modifiers) 「Stage 3」精确求和(Math.sumPrecise) 「Stage 2.7」迭代器序列化(Iterator Sequencing) 「Stage 2」结构体与共享结构体(Structs & Shared Structs) 「Stage 1」不可变的 ArrayBuffer(Immutable ArrayBuffers) 了解更多:12 项 ECMAScript 提案的最新进展!
[10-15] Express v5 版本发布 Express.js 5.0
版本带来了一些值得注意的新特性和改进。其中最显著的是完全重构了路由系统,提供了更灵活和直观的 API。开发者现可以使用专门的 app.route()
方法来定义路由,从而让代码更加清晰易读。此外,路由处理函数现在也支持异步操作,可以更好地处理复杂的业务逻辑。
在错误处理方面,5.0 版本引入了中间件错误处理能力,可以更方便地集中处理各种异常情况。开发者只需定义一个专门的错误处理中间件即可。性能优化也是此版本的一大亮点,对框架的核心组件进行了重构,大幅提升了系统的吞吐量和响应速度。
了解更多:https://expressjs.com/2024/10/15/v5-release.html
[10-16] Node.js 23 发布 Node.js 23
正式发布,推出了多项新的改进和功能:默认支持 require(esm)
引入原生 ES 模块、放弃对 Windows 32
位系统的支持、稳定版 node --run
命令、更强大的内置测试运行器,以及实验性 TypeScript
支持、Web
存储 API
和 SQLite
集成,同时改进了性能,提升代码启动时间和文件系统性能。
了解更多:Node.js 23 正式发布! 、注意,使用这个 API 可能导致你的 Node.js 出现兼容性问题!
[10-21] Next.js 15 发布 Next.js 15 带来如下重要更新:
Turbopack Dev: Turbopack Dev作为默认开发服务器,为开发者提供更快的开发体验。异步请求 API: 新增的fetch
API让异步请求变得更加容易,并支持在服务器组件中进行数据获取。缓存语义: 新增的cache
API,让开发人员能够更好地控制缓存行为,提高页面加载速度。React 19支持: Next.js 15完全支持最新的React 19版本,并提供了多种改进,简化React应用的开发。TypeScript支持: 提供了对next.config
的TypeScript支持,让配置更加安全和可靠。性能优化: 在构建速度和运行效率上进行了优化,从而提升整体性能。了解更多:https://nextjs.org/blog/next-15
[10-22] Svelte 5 发布 经过近 18 个月的开发,Svelte 5
是该项目历史上最重要的发布之一,是从头开始重写的版本,能够使应用程序更快、更小、更可靠。
新版本引入了符文(runes)的概念,提供了一种显式机制来声明响应状态,并对组件构成、事件处理程序等进行了改进,同时具有原生 TypeScript 支持,许多 bug 修复,以及全面的性能和扩展性改进。对于正在使用 Svelte 3 的用户,建议首先迁移到 Svelte 4,然后逐步将组件迁移到使用新语法和功能。Svelte 5 的发布奠定了许多改进的基础,展望未来还有更多想法要在 Svelte 中实现。
了解更多:https://svelte.dev/blog/svelte-5-is-alive
[10-23] React Native 推出全新架构 React Native
框架进入了一个全新的阶段。新架构的核心改变是引入了一个新的 JavaScript
引擎 - Hermes
。Hermes
可以大幅提升应用的启动速度和整体性能表现。同时,新架构还重新设计了通信层,使得 Native
组件和 JavaScript
运行时之间的交互更加高效和稳定。
了解更多:https://reactnative.dev/blog/2024/10/23/the-new-architecture-is-here
[10-29] 微软推出全新的生成式 AI 脚本:GenAIScript 微软推出了全新的生成式 AI 脚本语言 GenAIScript
,它将生成式人工智能与脚本编写结合。GenAIScript
支持 JavaScript
和 TypeScript
,集成大型语言模型(LLM),简化了自然语言处理任务,并且提升了开发者创建自动化任务的灵活性。
这一全新语言使开发者能够直接调用AI进行复杂的内容生成和数据处理,提供了高效的自动化能力。安装与使用方面,GenAIScript
需要 Node.js
和 Visual Studio Code
扩展,脚本文件以 .genai.mjs
或 .genai.mts
命名。
了解更多:微软推出全新的生成式 AI 脚本:GenAIScript!
[11-3] State Of CSS 2024 发布 2024年的《State Of CSS》报告显示,CSS 的发展正处于经典和现代之间的转折点。现代 CSS 引入的新特性如 Subgrid
和 :has()
显著减少了对外部工具和复杂 JavaScript
方案的依赖,在 CSS 框架中,Tailwind CSS
继续领先。
尽管 Sass/SCSS
依旧被广泛使用,但 CSS 本身逐渐吸收了许多关键功能。浏览器不兼容仍是一个问题,但新功能如容器查询得到了一定的支持,未来将进一步推动 CSS 的高效和灵活应用。
了解更多:State Of CSS 2024 出炉!开发者最喜欢的 CSS 新功能是?
[11-5] NPM 作者推出全新的 JavaScript 包管理器! 在爱尔兰举行的 NodeConf EU
上,NPM 作者正式宣布,推出全新的 JavaScript 包管理器 vlt 及 Serverless
注册表 vsr!
此次首发版本带来了令人印象深刻的 Node.js 依赖安装和管理能力。在大多数情况下,vlt 可以直接替换你现有的包管理器。乍一看,vlt 客户端可能与普通的包管理器类似,但我们兴奋地推出了一些创新功能,如全新的依赖查询选择器语法、各种导出格式(包括 Mermaid)以及直观的图形界面体验,帮助开发者更轻松地理解项目的依赖关系图。
了解更多:NPM 作者推出全新的 JavaScript 包管理器!
[11-10] Chrome 推出大量 AI 能力 Chrome
在 AI 领域做出了重大的更新,推出了多项内置 AI API,包括 Translation API、Summarizer API 和 Prompt API
。
这些 API 可以在浏览器本地运行,减少了对服务器的依赖,实现更快速和安全的数据处理。借助这些功能,开发者可以更有效地整合 AI 技术来增强用户体验,同时提高AI模型的运行效率和安全性。
了解更多:Chrome 全面拥抱 AI !
[11-13] Vue 宣布引入 alien-signals,性能大幅提升 Vue.js 3.5 版本通过引入 alien-signals 库,大幅提高了响应式系统性能,减少了内存使用,并优化了代码抽象,使其在性能测试中表现优秀。新的实现带来了超过 30 倍的性能提升,并在 JS Reactivity Benchmark 中领先其他框架。
了解更多:Vue.js 高调宣布:我们将成为最快的响应式框架!
[11-16] AI 编辑器 Windsurf 发布 Windsurf
编辑器可谓是 Cursor 的最强竞品,也是作者目前使用比较多的一款编辑器。
Windsurf
由 Codeium
推出,其以其创新的 AI Flows
协作模式、Cascade
上下文感知功能和多文件编辑能力,为开发者提供了一个高效、智能的编程环境,旨在通过先进的 AI 技术提升编程效率和协作体验。
了解更多:只花了 2 小时,我快速打造并上线了一款 AI 小程序!
[11-18] State of Frontend 2024 发布 《State of Frontend 2024
》报告显示 React、Vue.js
等框架仍主导市场,而 Svelte 等新技术受到关注。微前端使用率下降,反映行业对架构方法的变化。TypeScript
普及率增加,渐成 Web 标准。PWA 在移动应用中的应用增长,多数开发者已将 AI
整合到工作流程中。Vite
因高效性能得到了高度认可,前端开发领域呈现多样性和技术进步的趋势。
了解更多:2024 年,前端的开发方式正在发生着显著变化!
[11-19] Angular 19 发布 Angular 19
重点更新包括:在性能优化方面,引入了增量水合的开发者预览版,可减少初始加载的 JavaScript
体积,还默认启用事件重放功能,并提供了新的
接口来配置路由级别的渲染模式,同时继续实验无 zone
支持。
在开发者体验上,默认支持样式的热模块替换,实验性支持模板 HMR
,更新了独立组件的默认设置及相关检查,改进了测试工具链,还通过集成架构和语言服务简化了代码更新过程;在响应式系统中,稳定了核心反应性 API,新增了 linkedSignal
和 resource
等API;另外,在安全性上提供了自动生成基于哈希的内容安全策略功能,并且 Angular Material
和 CDK
也有所增强,如简化自定义主题创建、新增二维拖放和标签重新排序功能以及新的时间选择器组件等.
了解更多:https://angular.love/angular-19-whats-new/
[11-22] TypeScript 5.7 发布 TypeScript 5.7
版本发布,带来多项新特性和优化,包括未初始化变量更严格的检查、相对路径重写、支持更高版本的 ECMAScript
、改进的模块和配置文件处理、新的 V8 编译缓存支持以及泛型类型化数组更新。
了解更多:TypeScript 5.7 发布
[11-25] Deno 要求 Oracle 放弃 JavaScript 商标 Deno 正式向美国专利商标局(USPTO)提交了一份请愿书,要求取消 Oracle 对 “JavaScript” 的商标权。
如果此次请愿成功,将消除限制社区使用 JavaScript 名称的障碍。各类会议可以重新使用类似 “JavaScript 大会” 这样的名称,而非妥协为 “JSConf”。语言规范也可以更名为 “JavaScript 规范”,抛弃冗长的 “ECMAScript” 名称。此外,像 “JavaScript 开发者的 Rust 社区” 这样的组织也不再需要因名称使用问题担心法律威胁。
了解更多:Oracle 应该放弃 JavaScript 商标!
[11-26] Vite 6.0 发布 自从一年前发布 Vite 5
以来,Vite 的采用率不断增长,每周的 npm 下载量从 750 万增长到 1700 万。Vitest
在用户中受到偏爱,开始形成自己的生态系统。多个新框架加入了 Vite 生态系统,如 TanStack Start、One、Ember
等。Vite
还被诸多大公司使用,如 OpenAI、Google、Apple、Microsoft、NASA
等。
Vite 6.0
是自 Vite 2 以来的最重要的主要发布,为生态系统提供了新的 API,并提供更加精致的基础来构建。新版本引入了实验性的 Environment API
,允许框架作者提供更接近生产环境的开发体验,并为生态系统共享新的构建模块。Vite 6.0
支持 Node.js
18、20 和 22+,不再支持 Node.js 21。
了解更多:https://vite.dev/blog/announcing-vite6.html
[12-1] Web Almanac 2024 发布 Web Almanac 是一份关于全球网络状况的年度报告,汇集了数以百计的网络开发人员和分析员的协作努力。Web Almanac 提供了关于网站性能、技术使用、SEO、设计趋势和其他多个领域的全面数据洞察与分析。通过这些深入的分析和统计,开发人员和决策者可以了解当前的网络趋势以及未来可能的发展方向。这份报告通常涵盖多个章节,每个章节聚焦于特定的主题或技术领域,通过详实的数据来揭示行业的现状和未来趋势。
我整理了今年的性能、安全两个部分的报告。
网络安全方面,强调了TLS、HSTS、CSP等技术的使用及存在的配置问题;网站性能方面,首次内容绘制(FCP)和最大内容绘制(LCP)有所改善,但首字节时间(TTFB)变化不大。此外,新技术如现代图像格式的采用提高了网站的加载速度和视觉稳定性,而交互性能指标 INP 的提升揭示了用户体验的持续改善。
了解更多:2024 年前端性能报告 、2024 年前端安全报告
[12-3] Astro 5.0 发布 Astro 5.0 的发布,其中包括了 Astro Content Layer
和 Server Islands
这两个新功能。Astro Content Layer
提供了一种灵活且可插拔的方式来管理内容,统一了定义、加载和访问内容的 API,无论内容来自何处。而 Server Islands
则将高性能的静态 HTML 与动态生成组件结合在同一页中,为用户提供更个性化、更动态化的内容体验。此外,还介绍了简化的预渲染、类型安全的环境变量、Vite 6
等新功能和实验性功能。这些更新将带来更高效、更灵活和更可靠的开发体验,为用户构建内容驱动的网站提供了更好的工具和支持。
了解更多:https://astro.build/blog/astro-5/
[12-5] React 19 正式发布 自从 4 月份 React 发布了 19 RC 版本后,经过 8 个月的漫长等待,React 终于发布了 19 的正式版本。
React 19 引入了许多新功能和改进,包括支持异步函数的 Actions、用于乐观更新的 useOptimistic 钩子、新的 useActionState 钩子、改进的表单处理、以及新的 use API。新增的 React DOM 静态 API 和服务器组件功能使得静态站点生成和服务器端渲染更加高效。此外,React 19 还改进了 ref 的处理、支持文档元数据和样式表的渲染、以及对异步脚本和资源预加载的支持。错误报告和第三方脚本兼容性也得到了增强。
了解更多:React 19 正式发布
[12-20] V0 支持生成全栈项目 V0
是 Vercel
推出的 AI
驱动生成式 UI
系统,应该是感受到了 Bolt.new
的巨大压力,今日迎来一波重大更新。
此次重大更新支持一键生成并部署全栈项目,可一次性创建多个文件运行和预览完整 Next.js
应用,涵盖复杂架构元素,能访问 Vercel
环境变量以连接外部服务,可直接部署到 Vercel
并设自定义子域名,付费用户可从 Figma
导入设计稿,还有UI快速编辑、控制台输出查看、文件管理功能改进等,免费版用户项目创建上限提升,以电子商务网站构建为例展示其应用,更新后 V0
从原型图生成工具转变为具备全栈项目开发能力。
了解更多:V0 迎来重大更新,支持一键生成 & 部署全栈项目
[12-25] Rolldown v1.0.0-beta.1 版本发布 Rolldown
于今年 3 月开源,经过几个月的迭代,于 12-25 发布了第一个 1.X 版本。
Rolldown
是由尤雨溪主导的一款基于 Rust
开发的 JavaScript
打包工具,与 Rollup
兼容且类似 esbuild
的功能架构,具有快速性能和便利的开发体验,其核心优势包括通过 tree-shaking
等智能优化方式减少最终打包文件体积、提升打包速度,以及提供直观的 API
以方便集成和迁移,旨在成为 Vite
未来的主要打包工具。
了解更多:https://github.com/rolldown/rolldown/releases
相关阅读:
一文看尽2024年最受欢迎开源前端框架、UI组件库、构建工具、CSS框架等明星项目