2024-第四十周

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

技术

通过 Cloudflare Workers 实现的部分预渲染，让每个人都能受益

这篇文章介绍了如何在普通的 React SSR 应用中实现类似 Next.js 风格的部分预渲染（PPR）功能。通过调用 React 的新的 prerender() 和 postpone() API，结合 Cloudflare Worker 和 React 的渲染流 API，在用户就近位置提供高性能的初始加载体验，同时保持应用就近数据源的性能优势。文章展示了如何应用这一技术，并指出这种策略能够在不重大改写现有应用的情况下实现，并提供了关键代码指引。

• React 的新预渲染 API 允许在检测到动态输入/输出时调用新的延迟渲染 API，以在最近的<Suspense>边界“冻结”渲染并保存结果，从而实现 Next.js 风格的部分预渲染。
• 通过在 Cloudflare Worker 中创建一个流，将该结果发送给用户，同时从源服务器继续发送剩余部分，可以实现将应用的外部“框架”预渲染并在同一请求中继续流式传输其余部分，实现了极快的初始加载速度。
• 通过结合 Cloudflare Worker 和 React 的渲染 API，能够实现在现有服务器渲染的 React 应用上实现部分预渲染，从而在不重写应用的情况下使用“边缘”或“CDN”提供出色用户体验。

AbortController 的重要性

这篇文章介绍了 JavaScript 中一个常用但被忽视的 API——AbortController。它可以用来中断事件监听、取消 fetch 请求、中断流操作等，同时也可以自定义处理中断事件的逻辑。文章还介绍了 AbortSignal 的使用和相关的静态方法，以及如何将 AbortController 应用于自定义的操作中。

• AbortController 是 JavaScript 中的全局类，可以用于取消请求、移除事件监听器和中断流操作，提供了灵活的取消操作解决方案。
• 可以利用 AbortController 来取消 fetch 请求、移除事件监听器，甚至将任意逻辑变得可取消，提高了开发者处理取消操作的便捷性和灵活性。
• 通过 AbortSignal 实例的监听事件和自定义取消原因处理，可以更精细地控制取消操作的逻辑和结果，为 JavaScript 应用和库的开发带来了更多的取消处理选项。

Node.js 插件的全方位指南

Node.js 插件是用 C、C++ 或 Rust 等低级语言编写的动态库，可加载到 Node.js 应用程序中。这些插件允许开发人员利用系统级资源，优化性能，并将外部本地库与 JavaScript 代码集成。插件通过桥接 JavaScript 和本地代码的差距，在无缝环境中同时利用两者的优势。它们提供性能优化、系统资源访问和与现有本地库集成的优势。通过 Node-API（N-API）创建插件，将核心逻辑用 C++ 编写，并通过 N-API 将其暴露给 JavaScript。最后，借助 node-gyp 编译工具将原生 C++ 代码编译成.node 文件，并在 Node.js 应用程序中调用。

• Node.js 插件利用底层语言编写的动态库，可以优化性能、访问系统资源和集成外部原生库，极大地拓展了 Node.js 应用的能力。
• 使用 Node.js 插件可以将性能密集型任务和系统资源访问等工作交由原生代码（如 C、C++、Rust）执行，从而提升效率。
• 利用 Node-API（N-API）和原生代码编写插件后，可以通过 JavaScript 调用原生功能，实现无缝集成，为 Node.js 应用提供强大而灵活的功能扩展。

使用 Markdown 创建出色的表单和网页

blocks.md 是一个工具，它可以将你的 Markdown 文件转换成美观、可定制、可访问、完全本地化的表单和网页。它支持各种类型的数据收集，包括文本、电子邮件、选择项、评级、意见等。此外，它还提供逻辑跳转、页面进度、数据绑定、反应式博客文章等功能。你可以配置各种设置，包括颜色、品牌、呼吁行动等。blocks.md 还提供免费试用，以及不同类型的许可证选择，供个人或企业购买，价格适中。

• 功能丰富：blocks.md 是一个功能丰富的工具，能够将 Markdown 文件转换为美丽、可定制、可访问和完全本地化的表单和网页。
• 逻辑跳转和页面进度：它支持逻辑跳转和页面进度显示，可以根据条件展示特定内容，并显示用户完成表单的进度。
• 高度定制：blocks.md 非常灵活，用户可以配置各种设置，包括颜色、品牌、页面布局等，以及向服务器发送完整或部分表单回应。

前端开发的无尽循环

这段文字表达了作者对于前端开发团队频繁重写前端框架的质疑和反对。作者认为，选择前端框架并不是技术决策中最重要的部分，而应该更注重深入了解当前框架并减少技术抽象化。他建议公司回归基础技术，更接近核心的 Web 技术，以降低前端技术变迁的成本。同时，作者指出前端生态系统的问题，认为对于新开发者学习和就业存在困难，同时也导致了 Web 的停滞不前。最后，作者强调自己对 Web 的看好，并认为应该更加重视基础的 Web 技术。

• 前端框架选择不是最重要的技术决定，长期来看，公司应该重点投资于深入了解当前框架，而不是频繁地重写和更换框架。
• 公司应该回归到基础的网页技术，减少复杂的抽象层，这样可以降低前端技术过时的成本，更容易招聘和留住有能力的工程师。
• 前端生态系统目前存在问题，新开发者难以学习并适应复杂的技术堆栈，导致招聘困难和技能过时，而且这也影响了对于创造性和热情的开发者的潜力发挥。

我如何创建我的博客 2024“应用路由器”版本

这段文字描述了作者近几个月来致力于建立全新博客版本的经历。新博客采用了许多新技术和改进，包括 MDX 内容管理、Linaria 样式和 Shiki 语法高亮。作者还分享了对于新技术的真实看法，以及新博客所涉及的一些细节。同时，作者还介绍了一些新功能和交互性的改进，以及对于现有技术和工具的倾向和计划。

• 技术选型和迁移：作者分享了博客的技术栈选择和从旧版到新版的迁移经验，包括使用 MDX 进行内容管理和切换到 Linaria 等工具。
• 交互设计与体验：文章介绍了新博客中的交互元素，如代码片段、代码演示和动画效果，以及新的搜索功能和图标微交互的改进。
• 性能和开发体验：作者分享了新博客在性能、开发服务器速度、页面加载和开发体验方面的优点和挑战，以及基于 React 的服务端组件和 Next.js App 路由的使用体验。

工具

next-view-transitions

在 Next.js 应用程序的路由中应用 CSS 视图过渡 API

humanify

利用 ChatGPT 来解读和简化 Javascript 代码

更新

Express.js 5.0 的新特性介绍

Express.js 终于在 GitHub 上发布了 5.0 版本，这是自 2014 年以来 Express.js 团队发布的首个重大版本。新版本带来了重大更新、优化和移除，虽然仍处于 beta 阶段，但对未来 Node.js 项目的性能和开发流程有望带来改进。5.0 版本引入了许多重要的变化，包括移除了一些旧方法和属性、路径路由匹配更新、Promise 拒绝处理的简化、不再支持旧版本 Node.js，以及对无效状态码的更严格错误处理等等。此外，Express.js 生态系统的相关包也经过了一些重要的优化和改进。

• Express.js 5.0 带来了重大更新，包括删除遗留方法和属性、更新路径路由匹配和异步中间件的错误处理，以及严格化 HTTP 状态码和 res.render() 方法的改进。
• 旧版本的 Express.js 方法和属性已被移除，开发者需要更新代码以适应这些变化；同时，路径路由匹配和异步中间件的错误处理方式也有所调整。
• 除了核心变化，Express.js 5.0 还在相关套件上进行了多项改进，包括重构依赖项、增强安全性和持续集成优化等。

Storybook 8.3

这段文字介绍了 Storybook 8.3 的新特性和改进，包括与 Vitest 的整合、Next.js-Vite 框架的兼容性、安装包大小的减小、以及实验性的故事全局 API。这个版本还包含了成百上千的改进和 bug 修复，并介绍了未来版本的计划。

• Storybook 8.3 是一个构建、测试和记录 UI 组件的行业标准工具，与 Vitest 合作带来了无与伦比的组件测试体验，包括 Vitest 集成、Next.js-Vite 框架和减小的安装包大小。
• 通过 Vitest 集成，Storybook 8.3 能够以惊人的速度在无头浏览器中运行所有故事作为测试，还有诸如测试覆盖率、VSCode 扩展兼容性和故事快照测试等功能。
• 在 8.3 版本中还大大减小了安装包大小和锁定文件行数，引入了实验性的故事全局 API 来规范主题、视口和地区设置，同时包含许多其他改进和 bug 修复。

其他

债务定义了你的未来，当你的未来被债务定义时，希望就开始破灭。

这就是债务的最大问题，它限制了你的人生选择和灵活性。

-- 肯特·纳伯恩（Kent Nerburn），美国作家