Published on

2023-第二十四周

Authors

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

技术

ESLint guide: how to use it with confidence

  • ESLint 是一个静态代码分析工具，它可以随着代码编写帮助维护和改进代码的质量。
  • ESLint 允许团队遵循在配置文件中记录的规范，并使他们不必每次重新编码和应用这些规范。
  • 新的 ESLint 配置系统 Flat config 在项目中配置 ESLint 的方式提出了激烈的变革，并已在 CLI 中得到支持，并且从版本 8.23.0 开始提供了官方文档。

本文是一系列文章的一部分，旨在解释如何将 ESLint 配置作为外部依赖项共享以自动化代码标准。它首先介绍了 ESLint 作为一个静态代码分析工具，通过基于规则自动形成意见并在规则被破坏时发出警告来帮助维护和改进代码质量。该文章还回顾了 ESLint 配置对象的主要属性，例如规则和覆盖。然后介绍了名为 Flat config 的新的 ESLint 配置系统，它替换了遗留系统，并在项目中配置 ESLint 提出了激烈的变革。文章最后总结了系列计划，其中包括掌握 ESLint，迁移到 flat config，创建 ESLint 可共享配置，并改进体验以获取更多工具的支持。

Is React Having An Angular.js Moment?

  • React 服务器端组件（React Server Components）对 React 开发引入了重大变化，需要重新学习从数据获取到样式等所有内容。
  • 现有的 React 第三方库不适用于服务器端组件，开发者需要手动编码或等待库作者修改。
  • React 服务器端组件破坏了当前 React 生态系统的优势，使得没有 UI 工具包、表单框架、API 客户端和 SaaS 集成等工具十分困难。

React 服务器端组件是由 React 和 Next.js 团队推广的一种构建 Web 应用程序的新方法。它涉及到 React 应用程序构建方式的重大变化，并需要重新学习。例如，数据获取现在依赖于异步组件内的 fetch 方法，而常规的 React hooks 在服务器端组件中会导致错误。此外，CSS-in-JS 与服务器端组件不兼容，调试也非常具有挑战性。React 服务器端组件还破坏了几乎所有现有的 React 第三方库。这是一项重大变革，破坏了现有的 React 生态系统，开发者可能需要手动编写许多代码。

Thoughts on React vs Vue vs Everything Else in 2023

  • 建议为了专业目的学习 React 和 Next.js，它们是当前业界最广泛使用的前端平台。
  • 前端开发的状态非常复杂且资源密集，甚至难以在没有整个工具链的情况下构建简单的交互。
  • 对于个人发展和副业项目而言，Vue 可能更可取，因为它易于使用且更难被误用。

文章讨论了前端框架和平台的状态，并为初学者提供了选择学习哪个的建议。作者指出，React + Next.js 是专业人士的首选平台，但 Vue 对于个人项目也是不错的选择。作者还表达了对现代前端开发复杂性和资源使用的沮丧之情。他们建议学习 TypeScript 并在 React 代码中保持性能警觉。文章以对 React 和 Vue 的渲染周期讨论作为结论。

Isomorphic Development

  • 等同开发 (isomorphic development) 涉及编写可在服务器和客户端环境中安全高效运行的代码，并不一定更容易让前端开发人员完成。
  • 对于全栈开发人员来说，代码被拆分在前端和后端之间，他们必须在两个独立的调试环境中平衡，并防止数据泄漏和安全漏洞。
  • 全栈开发人员还必须关注客户端和服务器之间的性能差异，以及主数据库性能、查询优化和索引等问题。

文章讨论了等同开发的挑战，其中代码在服务器和客户端环境中运行。作者认为这种范式转换并不一定使开发更容易，而是引入了与调试、安全、性能和数据查询相关的新复杂性。作者还指出，当前的开发工具并没有完全配备处理这些挑战的能力，开发人员需要获取新的知识和技能才能在这种环境下有效地工作。作者建议使用一个新词汇 "等同开发"，来描述这种方法。

Vite 是如何兼容旧版本浏览器的

  • Vite 使用@vitejs/plugin-legacy 来通过生成使用 babel 转译代码的旧文件来支持旧版浏览器。
  • index.html 文件包括脚本，根据__vite_is_modern_browser 变量动态加载旧代码。
  • 在脚本标记中使用 type="module"和 nomodule 属性可根据浏览器对模块加载和 ES6 语法的支持选择性地执行代码。

本文讨论如何使用@vitejs/plugin-legacy 插件使 Vite 与旧版浏览器兼容。该插件使用 babel 为每个文件生成旧版文件来生成兼容代码。文章解释了在 index.html 文件中的代码，该文件创建一个带有"type=module"属性的脚本标记来导入主脚本文件。它还创建了一个脚本标记来加载 polyfills-legacy 文件和 index-legacy 文件，以兼容旧版浏览器。文章指出，如果浏览器支持模块但不支持最新语法，则插件可能存在潜在的错误。

How We Sped Up Search Latency with Server-sent Events in Express.js

  • 通过使用服务器推送事件（Server-sent Events，SSE）在稀疏查询中传输搜索结果可以改善用户体验，而无需更改身份验证或请求状态。
  • SSE 事件可以包括事件和数据等字段，并使用\n\n 进行分隔。
  • 在客户端上使用 React 集成 SSE 可能会有些棘手，但可以通过在 EventSource 周围创建自定义包装器来实现。

该文章讨论了在 HyperDX 平台上实现服务器推送事件（SSE）以流式传输搜索结果的实现。由于其简单性和与 HTTP 的兼容性，选择了 SSE 而不是 Websockets。文章提供了如何将 SSE 添加到 Express.js 路由以及如何格式化 SSE 事件的示例。文章还讨论了使用 EventSource 从客户端进行查询，并提供了实施的建议。作者建议在实现 SSE 时考虑应用程序特定和 React 特定的功能，并愿意根据反馈撰写后续文章。

Hydration is a tree, Resumability is a map

  • 水合（Hydration）是一种算法，它通过在浏览器中执行树中的每个组件，恢复在序列化为 HTML 时丢失的状态和事件处理程序，使得单页应用（SPA）框架能够在浏览器中实现互动。
  • 部分水合（Partial hydration）通过创建“互动岛屿”减轻了浏览器的工作量，但会创建边界，可能阻碍应用程序不同部分之间的通信。
  • 可恢复性（Resumability）是一种不同的算法，将事件处理程序放置在根部，将所有组件视为静态，并消除了水合或遍历组件的需要。

该文章讨论了在 Web 应用程序中添加互动性的不同方法，特别关注了水合和可恢复性的概念。水合涉及从根部重新执行整个应用程序，以恢复在序列化为 HTML 时丢失的状态和事件处理程序，而可恢复性将事件处理程序视为根部，不需要下载和执行所有互动组件。部分水合和 React Server Components 是水合的不同变体，提供了不同的权衡，而可恢复性则是一种根本不同的算法。开发人员可以选择最适合其需求的方法。

移动端 H5 页面在不同 Android 和 iOS 设备上的兼容适配

本文讨论了移动互联网时代中，H5 页面在移动应用程序开发中的重要性，并探讨了在不同手机型号、操作系统版本和浏览器内核环境下的兼容性问题。文中重点介绍了移动端 H5 页面兼容适配的重要性，以及在 Android 和 iOS 设备上的兼容适配实践。针对不同分辨率的屏幕和 WebView 的差异，提供了相应的处理方法和代码示例。此外，还提到了处理移动设备默认字体大小、Safari 浏览器中的问题以及常见的兼容性 Bug 及解决方案。通过合理的兼容适配方案，可以提高移动应用程序的兼容性和用户体验。

Behind the block()

  • 在 Million.js 中使用 block() 函数可以通过在 React 组件内部使用 Million.js 来实现超优化的渲染速度。
  • 编译器可以从 React 组件中提取出状态并将其转换为 Million.js 可以理解的 prop，绕过运行时实现的限制。
  • 通过在组件之间使用不同的渲染方法，我们可以充分利用两者的优点，选择适合特定任务的正确工具。

这篇文章解释了如何将 Million.js 中的块作为 React 中的高阶组件（HOC）使用，这些组件在渲染速度上进行了超优化。作者解释了 block() 函数的工作原理，如何实现它以及如何使用编译器从嵌套组件中提取状态。文章指出，使用这种方法可能意味着性能不再是迁移的权衡，并且类似的概念已经在“岛屿架构”中使用过。文章最后感谢 Ryan Carniato 创建了一个概念验证，这概念验证启发了本文。

Designing a Scalable Backend in Node.js

本文讨论了一个虚构的 Node.js 后端系统中的三个扩展挑战，该系统对用户交易进行分类，以帮助个人预算管理。第一个挑战涉及用户登录时出现的问题，登录时间长且在工作日下午 3 点至 4 点经常失败。文章建议监控 CPU、内存和 IOPs 等关键资源，以诊断扩展问题的根本原因，并消除瓶颈和故障点。第二个挑战是处理突发工作负载，其中数据库负载的峰值源于系统外部。文章建议使用队列来平滑峰值并控制吞吐量。第三个挑战涉及优化数据库查询以提高性能和可扩展性。

  • 监控关键资源，如 CPU 和内存消耗以及数据库指标，对于诊断后端系统的扩展问题非常重要。
  • 慢查询监控可以帮助识别系统中的故障点并减轻瓶颈。
  • 在面对突发工作负载时，使用队列可以平滑峰值并控制吞吐量。

RSC From Scratch. Part 1: Server Components

从 0 开始探索 RSC

工具

traf

在 monorepos 中找到真正受影响的包

usellm

在你的 React 应用中使用大型语言模型

monolith

⬛️ 用于将完整网页保存为单个 HTML 文件的 CLI 工具

tinylibs - ts-writer

TS Writer 是一个 1.5Kb 的模板字符串模板引擎，指定用于在运行时生成代码

queue

并发可调的异步函数队列

framed

用于项目管理的 CLI 工具

mods

一个在命令行和管道中使用 AI 的简单工具，支持 OpenAI 和 LocalAI

react-spreadsheet-import

具有自动列匹配和验证功能的 Excel (.xlsx) 和 CSV 文件的导入流程

highlight

highlight.io：开源的全栈监控平台。错误监控、会话重播、日志记录等

sd-webui-txt-img-to-3d-model

sd-webui 的自定义扩展，允许您基于 OpenAI Shap-E 从 txt 或图像生成 3D 模型

更新

Introducing the Vercel AI SDK

Vercel AI SDK 是一个开源库，旨在帮助开发人员使用 JavaScript 和 TypeScript 构建对话式、流式和聊天用户界面。该 SDK 支持 React/Next.js、Svelte/SvelteKit，并即将支持 Nuxt/Vue。Vercel 的 AI SDK 支持互操作性，并提供对 OpenAI、LangChain 和 Hugging Face Inference 的一流支持。该公司还推出了 Chat & Prompt Playground，开发人员可以实时比较各种语言模型的结果，并生成 Next.js、Svelte 和 Node.js 代码。

  • Vercel 推出了新工具，旨在改进其平台上的人工智能体验，包括 Vercel AI SDK 和 Chat & Prompt Playground。
  • Vercel AI SDK 是一个开源库，旨在帮助开发人员使用 JavaScript 和 TypeScript 构建对话式、流式和聊天用户界面。
  • 该 SDK 支持 React/Next.js、Svelte/SvelteKit，并即将支持 Nuxt/Vue，还提供对 OpenAI、LangChain 和 Hugging Face Inference 的一流支持。

其他

Performance Doesn't Matter...Until It Does.

性能很重要，但并不是所有公司都需要高性能的技术和框架。在构建应用程序时，最重要的是解决用户的问题。随着用户数量的增加，新功能的需求会减少，稳定性和迭代速度变得更加重要。每个公司和项目都应该考虑长期的特性增量和迭代，定义一个合适的转换点。

  • 稳定性和迭代速度在用户数量增加时变得更加重要。
  • 每个公司和项目都应该考虑长期的特性增量和迭代，定义一个合适的转换点。
  • 技术选择应该根据项目的不确定性和需求来进行。

这个世界日以继夜、竭尽全力让你成为其他人，如果你想做你自己，就意味着要打一场最艰难的仗。

-- E·E·卡明斯（E. E. Cummings），20 世纪美国著名诗人

人们依靠机器，希望这能带给他们更多自由，但这只会让拥有机器的人奴役他们。

-- 弗兰克·赫伯特，科幻小说《沙丘》的作者

成为优秀工程师的八大法则

Discuss on Twitter • View on GitHub