美味值:🌟🌟🌟🌟🌟
口味:黑加仑乌龙茶
本期摘要
- 4 月登陆 Web 平台的新内容
- Angular v16
- Next.js 13.4
- Qwik v1.0
- 5 月 Svelte 的新功能
- Rspack v0.1.9
- TailwindCSS vs UnoCSS
- ECMAScript 2023 的新功能
- Vue 3.3 新特性前瞻和简单评价
- React 渲染交互式指南
大家好,我是童欧巴。欢迎来到前端食堂技术周刊,我们先来看下上周的技术资讯。
技术资讯
1. 4 月登陆 Web 平台的新内容
在 4 月份,Firefox 112,Chrome 112 发布稳定版本。
Firefox 112
Chrome 112
- 支持 CSS 嵌套,引入了一个新的嵌套选择器
>
- 支持 animation-composition
- 全新 无头模式
2. Angular v16
Angular v16 发布,主要特性如下:
- 开发者预览版引入全新的 Angular 反应性模型,提供 Angular Signals 库,与 RxJS 保持互操作
- 服务器端渲染和水合作用增强,Angular 服务端渲染的下一步计划
- 开发者预览版引入基于 esbuild 的构建系统
- 使用 Jest 和 Web Test Runner 进行更好的单元测试
- 一系列改善开发者体验的功能
3. Next.js 13.4
Next.js 13.4 发布,主要特性如下:
- App Router 稳定
- Turbopack(Beta)
- Server Actions(Alpha)
4. Qwik v1.0
Qwik 发布 v1.0,主要特性如下:
开箱即用获得惊人的用户体验
- JavaScript 流式传输的即时加载,使应用程序在 CWV 得分上保持出色的表现,即使应用程序越来越复杂
- 推测性代码获取,在用户需要时提供所需代码,以确保即使在慢速移动设备、不可靠的网络上也能实现即时用户交互
- 懒执行,给浏览器主线程最大的自由
- 优化渲染时间,Qwik 是响应式的,默认情况下,它只会更新肯定需要的内容,而不是更多内容
- 从服务器开始获取数据,以防止“瀑布”延迟
出色的开发体验
- 熟悉的 JSX,就内味儿
- 文件式路由,行业首选的声明路由的方式
- 一流的数据访问,Qwik 的 data loader 和 form actions 轻松访问服务器数据,并具有 100% 的端到端类型安全和用户输入验证功能
- 以一种可移植的方式声明中间件逻辑,能够部署到所有主要的主机供应商
- 统一的执行模式,通过
server$()
可以创建一个始终在服务器上执行的函数
5. 5 月 Svelte 的新功能
Svelte
- 支持 CSS @container queries
bind:innerText
可用于contenteditable
元素- 一个新的可访问性警告
a11y-interactive-supports-focus
,当交互式元素不可用时会发出警告
SvelteKit
- 当启用 HMR 时,页面将在修复错误后重新加载
- embedded 模式下支持同时加载两个应用程序到同一个 HTML 页面中
- Vite 的 compilation 现在会记录警告信息
6. Rspack v0.1.9
Rspack 发布 v0.1.9,主要提升了 Loader 兼容性,进行了性能改进,添加了一系列新功能。
下面我们来看技术资料。
技术资料
1. TailwindCSS vs UnoCSS
作者对 TailwindCSS 和 UnoCSS 进行了多方面的对比,从功能上来看:
- Tailwind 几乎提供了你能想到的所有 CSS 功能的对应类名,还有一些你可能不知道的有用的功能,比如
isolation
,支持自定义 CSS 以及使用插件扩展框架。 - UnoCSS 支持 Tailwind 的所有功能,还额外支持如 variant groups 、更多的动画效果、attributify mode 等。
2. ECMAScript 2023 的新功能
最终版本将于 6 月发布,新功能如下:
- Array find from last
- Hashbang Grammar
- Symbols as WeakMap keys
- Change Array by Copy
3. Vue 3.3 新特性前瞻和简单评价
Vue 3.3 本周将会正式发布,本篇博文提供了新特性前瞻。
4. React 渲染交互式指南
React 渲染,永恒的话题。
好了,以上就是本期的食堂周刊,观众老爷们如果觉得还不错,一键三连是对食堂老板最大的支持。
你的前端食堂,吃好每一顿饭,我们下期见。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。