2024-第二十六周

该周报主要为各个地方内容的汇总整理

技术

⭐️BorisNPM and NodeJS should do more to make ES Modules easy to use

这篇文章讨论了 JavaScript 和 TypeScript 模块的演变，以及现在在 NodeJS 环境中使用 ES Modules（import/export）所遇到的问题。作者通过数据分析得出，ES Modules 的采用率仍然较低。文章提出了一些解决方法，包括简化文件扩展名、将 type=module 设为默认、升级常用库到 ES Modules，并呼吁 NPM 注册表和 NodeJS 提出改进措施。

• JavaScript 和 TypeScript 的模块系统经历了多次变革，从无模块到 CommonJS 再到 ES Modules，导致代码迁移和互操作性方面的挑战。
• 尽管 ES Modules 自 2015 年推出以来已有五年多时间，但在 GitHub 上最受欢迎的 JavaScript 和 TypeScript 项目中，仅有 9-27% 的项目声明自己采用 ES Modules。
• 为了推动 ES Modules 的更广泛采用，可以考虑简化规范，如取消 .mjs、.cjs 文件扩展名、将 type=module 设置为新 package.json 文件的默认值，并督促常用库升级到 ES Modules。

⭐️How to make draggable Framer Motion elements snap to breakpoints

这段文字介绍了使用 Framer Motion 库编写一个可重复使用的 React Hook，用于在拖拽元素时实现自动吸附到预定义位置。文中详细介绍了 hook 的实现原理，包括转换吸附点、处理惯性和速度传递，以及改进 API。

• Framer Motion 是一个强大的动画库，但是它没有内置的方式来添加拖拽元素的吸附点，因此需要通过编程实现。
• 通过编写自定义的 React hook，可以实现拖拽元素的吸附功能，包括在释放元素时将其吸附到预定义的位置，并且考虑了惯性和速度传递的影响。
• 优化 API，使得开发者能够跟踪当前吸附点的索引，并且可以编程方式将元素吸附到所选的吸附点，从而提高了该自定义 hook 的通用性和灵活性。

⭐️When I Use Valtio and When I Use Jotai

这篇文章讨论了两个状态管理库：valtio 和 jotai。作者指出，valtio 适合数据为中心的应用，而 jotai 适合以组件为中心的应用。文章介绍了作者开发的两个应用，分别使用了 valtio 和 jotai，并建议开发者学习并理解这两个库的特性，然后根据自己的喜好和需求进行选择。文章最后还提到了对其他状态管理库的简要建议。

• Valtio 适合数据中心的应用，Jotai 适合组件中心的应用。
• 数据中心的方法是先有数据，再设计 React 组件；组件中心的方法是先设计组件，再定义状态。
• 作者分别使用 Valtio 和 Jotai 开发了两个应用，展示了它们的用法和特点。

Uniting Web And Native Apps With 4 Unknown JavaScript APIs

这篇文章介绍了四种不太为人所知的 Web API，包括屏幕方向 API、设备方向 API、震动 API 和联系人选择 API。作者讨论了这些 API 如何能够增强渐进式 Web 应用的可用性和稳健性，但也指出它们在浏览器支持和使用上存在一定的挑战。文章结尾提出希望增加对这些新 API 的认识，以期望它们能在未来的浏览器更新中得到更广泛的支持。

• 展示了四个不太为人所知的 Web API，包括屏幕方向 API、设备方向 API、振动 API 和联系人选择 API，以及它们的潜在用途和用法。
• 重点介绍了屏幕方向 API 和设备方向 API 的使用方法，包括如何检测设备的方向、锁定屏幕方向以及利用设备的陀螺仪传感器来实现交互效果。
• 通过示例演示了振动 API 和联系人选择 API 的应用，展示了如何在 Web 应用中利用这些 API 来实现提醒功能和访问用户联系人信息。

Understanding React Compiler

这篇文章介绍了 React Compiler 以及它对 React 代码的转换过程。它解释了编译器、转译器、优化器的概念，以及抽象语法树的作用。文章讨论了 React 的核心架构、记忆化技术的重要性，以及 React Compiler 如何自动进行记忆化优化，从而提高 React 应用的性能。同时，文章也提到了使用抽象层对代码进行编译可能增加调试的复杂性，但建议开发者深入了解 React Compiler 的工作原理，以便更好地理解和调试生成的代码。

• React Compiler 是一个工具，能够分析 React 代码并自动生成新的代码，利用缓存和记忆化技术来提高应用性能。
• React Compiler 通过在缓存中存储函数计算结果以及优化渲染逻辑，减少了开发人员手动进行性能调优的繁琐工作。
• 使用 React Compiler 可能会增加设备内存的占用，因为它将处理器计算转换为存储数据，因此对于大型数据应用程序需要谨慎使用，并注意内存使用情况。

React 19 and Suspense - A Drama in 3 Acts

这篇文章讲述了 React 19 发布候选版引发的争议。新版本的 Suspense 行为改变导致了一系列讨论和不满，最终 React 团队决定推迟发布以寻求解决方案。作者从中得到的教训包括及时尝试早期版本并提供反馈的重要性，以及需要更好的沟通方式。文章强调了面对争议时冷静客观的沟通方式的重要性。

• React 19 的 Suspense 行为变化引发了社区热议，展现了 fetch-on-render 和 render-as-you-fetch 的对比，以及对性能和组件组合的影响。
• React 核心团队在 React Summit 上宣布 React 19 发布，但随后因社区反应而决定延迟发布，展现了对反馈的重视和开放沟通的态度。
• 作者从中学到了及早尝试早期版本、与团队沟通以及避免在社交媒体上过于激烈表达看法的重要性，呼吁建立更好的沟通渠道。

How to be a -10x Engineer

这段文字描述了如何成为一个效率极低的工程师（-10x engineer），通过浪费大量的工程时间和资源来达到这一目标。具体包括挑战团队的工作要求，创造大量无意义的工作任务，增加沟通成本，浪费资源，拖延决策，创建无用的工具和文档，以及培养不合格的工程师。

• 成为 -10x 工程师的关键策略：浪费 400 个工程小时，通过让团队做无用工作、增加沟通开销和编写低效代码等方式，将 10 名工程师的产出变成零。
• 如何浪费 400 个工程小时：增加会议和沟通的时间开销、编写低效的代码和测试、研发无用工具和糟糕的架构、以及频繁部署和维护失败的项目等方式。
• 招聘和保留低效工程师的策略：招聘 0x 和 -1x 工程师，以及不解雇低效工程师，使团队陷入低效和失败的循环中。

工具

rushlight

在您自己的基础设施上进行实时协作代码编辑

neobrutalism-components

一套采用新 brutalism 风格的 Tailwind 组件集合。

AI CSS Animations

利用你的声音和人工智能制作复杂动画。

simpleParallax.js

React 和 JavaScript 的简单视差效果

plyr

一个简单的 HTML5、YouTube 和 Vimeo 播放器

更新

Introducing React-Admin V5

React-admin v5 是一个重大更新，引入了许多新功能和改进，包括 UI 改进、应用初始化、数据提供程序、列表页面、表单和输入、开发体验改进、严格的 TypeScript 类型、易定制的主题和布局，以及企业版包在测试版中。升级到 v5 需要进行一些修改，但预计能够带来更强大和用户友好的体验。

• React-admin v5 引入了许多新功能和改进，包括更强大和用户友好的用户和开发者体验，以及对 UI 的改进和主题切换功能。
• 升级到 v5 主要涉及对中心组件（如布局、AppBar 和 Menu）的更改，需要更新许多文件以重命名包或组件，但可以使用 codemods 自动化这一过程。
• TypeScript 的严格类型化帮助在编译时捕获更多错误，同时 v5 还简化了表单设计和引入了新的中间件，使得编辑复杂表单更加灵活和高效。

Announcing TypeScript 5.5

TypeScript 5.5 发布了，引入了许多新功能和改进，包括推理类型断言、常量索引访问的控制流缩减、JSDoc @import 标签、正则表达式语法检查、ECMAScript Set 方法的支持、独立声明、配置文件的模板变量${configDir}、声明文件生成时的包依赖查询优化等。此外，还进行了编辑器和观察模式可靠性的改进、性能和大小优化等。同时，还介绍了一些值得注意的行为变化，包括禁用了 TypeScript 5.0 中被弃用的选项和行为、对装饰器进行更严格的解析、以及简化了声明文件中的引用指令。

• TypeScript 5.5 带来了推断类型断言、常量索引访问的控制流缩小、以及 JSDoc @import 标签等新特性，进一步提升了类型推断和代码编辑工具的功能。
• TypeScript 5.5 引入了新的模板变量 ${configDir} 来简化配置文件的相对路径问题，使得配置文件更易于在不同项目间共享和移植。
• TypeScript 5.5 对编辑器和监视模式的可靠性进行了改进，并进行了性能和包大小的优化，为用户提供更快速、更可靠的开发体验。

设计

Design Engineering at Vercel

这篇文字介绍了一个新兴角色——设计工程师，以及他们在 Vercel 的工作内容、技能和贡献。设计工程师在美学和技术技能之间取得平衡，致力于创造出色的用户体验，并在多个领域展开合作。他们关注页面速度、跨浏览器支持和无障碍性，同时拥有广泛的技能，可以在设计和工程领域独立进行工作。团队注重质量，鼓励持续改进，而非追求完美。最后，文章还介绍了设计工程师在 Vercel 的工作案例，并呼吁有兴趣的人申请这一职位。

• 设计工程师是一种新兴角色，需要融合美学和技术，致力于提供卓越的用户体验。
• 设计工程师在 Vercel 公司跨部门合作，从设计实现到产品发布都扮演着重要角色，注重质量而非数量。
• 设计工程师团队拥有多样化的技能和背景，能够以协作方式完成各种设计任务，并在 Vercel 的网站、产品和文档中展现出他们的成果。

其他

A Rant about Front-end Development

这篇文章是一位前端开发者对于当前前端开发中各种选择和技术所表现出的愤怒和挫败感的抒发。作者认为现在的前端开发普遍忽视了对内容的重视，过度复杂化简单问题的解决方案，并盲目追求新的技术和框架。他呼吁开发者们理性思考，重视内容，避免过度复杂化，并对新技术持谨慎态度。

• 前端开发者应该更关注网站内容，而不是盲目追随新技术和框架，因为用户最关心的是内容。
• CSS 和前端开发工具并非问题所在，问题在于开发者的选择和对技术的理解，以及对复杂性的追求。
• 在解决问题时，应该选择最简单的解决方案，而不是为简单问题创造复杂的解决方案，同时要对新技术保持理性，避免在生产环境中过早使用。

How is jotai different from zustand?

Kubernetes 和微服务都是重量级工具，会让你的软件变得更重。

使用它们之前，请务必想清楚，你能不能处理它们带来的额外的重量、运营成本、工程开销。

-- Arne Brasseur