本期播客聚焦前端技术前沿,深入探讨了 Firefox 144 的新特性,特别是 View Transitions API 的全面支持。同时,节目还详细介绍了 React 生态系统的重大更新,包括 React Compiler 1.0 稳定版、Bun 1.3 的“全栈运行时”升级,以及 Next.js 16 Beta 的发布,为前端开发者带来了性能提升和开发体验的优化。
Firefox 144:View Transitions API 全面支持与更多更新
Firefox 144 的发布标志着 View Transitions API 获得了所有主流浏览器的支持,为前端开发者提供了更流畅、更具表现力的页面切换体验。除了这一核心功能,新版本还带来了 moveBefore() 方法支持、改进的配置文件管理、画中画功能调整以及新的可视化搜索选项。MDN 也同步发布了 View Transitions 的入门指南,帮助开发者快速上手。
前端生态系统演进:W3C、React 与 Lit
前端生态持续演进,W3C 更换了新 Logo,React 将由一个独立基金会接管,而 Lit 框架则加入了 OpenJS 基金会,这些都预示着 Web 平台未来的发展方向。
CSS 新思维与实用工具
CSS 方面,有文章分享了理解 CSS Grid 的新思维模型,强调网格线在精确布局中的强大作用。Firefox 团队推出了 Interop Feature Ranking 网站,让开发者可以投票影响未来 Web 平台特性的开发优先级。此外,节目还探讨了现代 CSS 圆角标签的实现、contrast-color() 函数、progress() 函数的实用场景,以及 :is()、:where() 和 :has() 伪类组合使用的技巧。
Web Components 与开发工具创新
Web Components 领域,Custom Elements Manifest (CEM) 被誉为一个被低估的“杀手级特性”,它提供了一个强大的 JSON 格式来展示组件 API 信息。在工具方面,Mirrow 提供了一种 DSL 来创建和动画化 SVG;Triplex 这个 React Three Fiber 的可视化工作区已开源;还有免费的 Open Graph 图片生成器 ogImage.click、隐私优先的开发者生产力工具集,以及在线图表制作工具 Make Graph。
React 生态系统重磅更新:编译器、运行时与框架
React Compiler 1.0 稳定版发布
React Compiler 1.0 稳定版的发布,意味着它现在可以自动为 React 应用进行 memoization 优化,通过分析代码减少不必要的重新渲染,提升应用性能。开发者仍可使用 useMemo 和 useCallback 进行精细控制,但编译器将处理大部分优化工作。
Bun 1.3:迈向“全栈运行时”
Bun 1.3 带来了巨大飞跃,不再仅仅是高性能 JavaScript 运行时,而是朝着“全栈运行时”迈进。新版本包含带热重载的开发服务器(支持 React Fast Refresh),可以直接开箱即用地搭建 React 项目,并默认支持隔离的包安装,为 React 开发者带来极大便利。
Next.js 16 Beta:Turbopack 稳定与新架构
Next.js 16 Beta 的最大亮点是 Turbopack 稳定并成为新应用的默认打包工具,大幅提升开发速度。它还集成了 React 19.2 和 React Compiler 支持,并增加了额外的缓存功能。尽管路由和导航系统进行了改革,官方表示无需代码改动,但仍强烈建议充分测试。
React Native 0.82:新架构与 Hermes V1
React Native 0.82 开启了“新时代”,它是第一个完全运行在新架构上的 React Native 版本,并实验性地引入了更快的新版 Hermes JS 引擎(Hermes V1)。
其他 React 工具与生态更新
- Triplex 开源:原本用于可视化布局 React Three Fiber 组件的商业工具,现已开源并加入 Poimandres Collective,扩展支持常规 React DOM 元素和 VS Code 扩展。
- React Chrono 3.0:带来动态交互式时间线组件。
- React-to-Print:提供更好的 React 组件打印输出控制。
- React Knob Headless:提供无样式的圆形旋钮控制组件。
- GitHub 加强 npm 安全性:可能影响发布包的开发者。
- Vite+ (Viteplus):作为扩展版 Vite 出现,增加了 linter、测试运行器等功能,但需注意其许可协议。