前端架构 | 锤子前端

《设计系统应该默认就是快的》

Thu, 29 Oct 2026 09:14:04 GMT

《设计系统应该默认就是快的》

标签：
#前端开发 #设计系统性能优化 #性能测试 #性能预算 #WebComponents #组件渲染优化

总结：
这篇文章通过实测十大主流开源设计系统（Mantine、Ant Design、Material UI、React Spectrum、Carbon、Fluent、Web Awesome、UI5、Spectrum Web Components、Ionic），论证了性能应当与设计系统团队所重视的可达性（accessibility）平起平坐：底层组件的每一个性能修复，都会同时惠及所有基于该设计系统构建的应用。测试发现性能优劣并不取决于框架本身，而在于具体实现细节，作者还深入剖析了 Ionic、Ant Design、UI5、React Spectrum 等慢速组件的根因，并给出了可行的修复建议，最后提供了基于 Playwright 的自动化性能测试方案与「Fast by Default（默认即快）」的理念。

文章要点：
1. 浏览器的 JavaScript 主线程是所有层共用的，设计系统组件越慢，留给应用代码的余地就越小——修复一个设计系统组件的性能，等于同时提升所有依赖它的应用。
2. 作者选取了十个基于不同框架（React、Lit、FAST、Stencil、SAP 自研框架）的设计系统，在 4 倍 CPU 降速、Chrome 155 环境下实测了两大典型场景：打开含 249 个国家的下拉选择器、一次性全选 100 个复选框。
3. 实测结果差异巨大：国家选择器从最快 Fluent 的 61ms 到最慢 Ionic 的 1,266ms（比第二名慢 5 倍以上）；复选框从 Fluent 的 29ms 到 Ant Design 的 421ms——同一框架（如 React 或 Lit）内部差距同样悬殊，性能问题出在实现而非框架。
4. 十个设计系统中只有 Spectrum Web Components 在每个 PR 上自动跑组件级性能基准，多数团队只检查包体积——但包体积与组件在页面上的响应速度并无直接关系。
5. 作者逐一剖析了慢速根因：Ionic 因 Stencil 在无 shadow DOM 的场景下用 appendChildSlotFix 模拟插槽、每次新增选项都要遍历全部既有子节点三次（O(n²)）；React Spectrum 因 React Aria 逐个清空高度再读取尺寸造成「布局抖动」；UI5 因隐藏弹层中预置全部 249 个选项，打开瞬间浏览器要一次性完成约 1500 个元素的样式计算；Ant Design 的慢则主要来自 100 个复选框同时触发的颜色渐变动画。
6. 性能瓶颈各有解法：长列表用虚拟滚动（Ant Design 的做法值得借鉴，还为屏幕阅读器保留了高亮项的隐藏副本）；动画改由合成器线程运行的 opacity 渐变替代主线程上的颜色渐变；Stencil 可直接修复插槽回退内容的第三次检查，作者实测去掉后加 2000 个元素快约 7 倍。
7. 作者分享了用 Playwright + Chrome DevTools 协议（CPU 降速 4 倍 + Long Animation Frames 长帧 API）编写组件性能测试的完整代码，包含「总耗时预算 300ms」和「最长无响应帧不超过 100ms」两条性能预算（performance budget），以及一条「选项翻倍时耗时增长不超过 2.5 倍」的防 O(n²) 回归测试。
8. 落地的最佳实践是「默认就提供快的行为」：超过性能预算的列表自动切换虚拟化、复选框仅在被直接点击时才播放动画，并在文档中写明每个组件的测试数据规模上限，发布说明中给出修复前后的量化数据（如「500 个选项下打开从 300ms 降到 150ms」）。
9. 以上测试代码已开源在 GitHub 仓库 design-system-performance-tests 中，可直接复制改造用于自己的设计系统，并附带 GitHub Actions 工作流实现每个 PR 自动跑性能测试。
10. 文章结尾宣传了作者的新书《Fast by Default: Practical Performance Engineering》（Manning 早期访问版），把这套思路延伸到后端与移动端。

URL：https://denodell.com/blog/design-systems-should-be-fast-by-default

Den Odell

Design Systems Should Be Fast by Default

If a design system’s components are slow to interact with, so are any apps built with it. I timed large dropdowns and checkbox lists in some popular design systems, worked out how to make the slow ones faster, and wrote tests that fail when they’re too slow.

《用 React Suspense 面板调试 Suspense》

Thu, 15 Oct 2026 03:04:58 GMT

《用 React Suspense 面板调试 Suspense》

标签：
#前端开发 #React
#React_Developer_Tools #Suspense面板 #加载调试 #骨架屏 #布局抖动

总结：
本文演示了如何用 React Developer Tools 8.0 新增的 Suspense 面板，排查一个仪表盘页面中"销售统计卡延迟约 2 秒才出现"和"内容到达时快速操作区被顶下去"两个问题。通过时间轴回放、Inspect Suspense Nodes、Suspended by 和强制回退功能，作者定位到负责延迟的边界和 Promise，并把骨架屏改成与真实内容形状、尺寸一致，从而消除了布局抖动。

文章要点：
1. Suspense 面板在 React Developer Tools 8.0 中默认启用，配合 React 19.2+ 的开发模式构建能显示最完整的信息。
2. 面板分为四个区域：工具栏（Inspect Suspense Nodes 可直接从页面点选边界）、Minimap（页面边界的可视化地图，颜色区分渲染环境）、时间轴（每步对应一次初始绘制或边界揭示，可回放页面状态）、检查器（查看 Suspended by、props 和渲染来源）。
3. 通过逐步回放时间轴，发现布局抖动发生在统计卡片揭示的那一刻，因为卡片比灰色占位块高，把上方的 QuickActions 顶了下去——嵌套边界只控制揭示顺序，并不为内容预留空间。
4. 用 Inspect Suspense Nodes 从页面内容反查所属边界，比在大页面里挨个找 Minimap 区域更快；找不到时记得关闭 Unique Suspenders 过滤器。
5. Suspended by 显示边界等待的对象、耗时和解析结果，能把排查范围缩小到数据、代码或资源，但无法解释为什么会慢。
6. 检查器里的"暂停所选组件"按钮可以随时把边界强制切回 fallback，方便把骨架屏和真实内容并排对比，无需改代码或限速网络。
7. 修复方法：让骨架屏复刻真实布局——直接渲染四张真实卡片和标签，只把查询得到的数值换成等高的占位行；重放时间轴后快速操作区不再移动。

URL：https://certificates.dev/blog/debugging-suspense-with-the-react-suspense-panel

certificates.dev

Debugging Suspense with the React Suspense Panel

The Suspense panel in React Developer Tools shows which boundary suspended, what it was waiting for, and the order your page revealed its content.

《框架还重要吗？》

Sun, 20 Sep 2026 02:45:28 GMT

《框架还重要吗？》

标签：
#编程 #Web开发 #AI编程 #前端框架 #React #软件工程 #技术趋势 #VibeCoding

总结：

这是一篇探讨在 AI 编程时代 Web 框架是否仍然重要的深度分析文章。作者 Brooks Lybrand 作为拥有三年开源框架开发经验的前端工程师，针对"模型已经足够好，框架选择不再重要"的流行观点进行了系统性反驳，论证了框架在提供抽象、结构和约束方面的核心价值，并呼吁行业继续创新和构建新框架。

文章要点：

1. **对"React 已赢"论的质疑**：作者指出当前流行观点认为由于 LLM 训练数据中 React 代码最多，模型最熟悉 React，因此无需尝试其他框架。但他认为这种逻辑存在矛盾——如果框架真的不重要，那连 React 都不需要，直接用 Web Components 或让 AI 生成原生代码即可。

2. **框架的本质价值**：作者将框架的价值精炼为三点：**提供抽象（Abstractions）、结构（Structure）和约束（Constraints）**。这些价值不仅适用于人类开发者，对 AI 编程同样关键——良好的抽象能避免 AI 重复造轮子或创建混乱的临时方案；清晰的结构帮助 AI 生成可维护的代码；明确的约束（如类型检查、测试）能防止 AI 在迭代中破坏系统。

3. **AI 时代框架的隐性存在**：引用 React 核心团队成员 Ricky Hanlon 的观点"你要么使用框架，要么构建框架"，作者强调即使不显式选择框架，AI 在生成代码时也会隐式地创建框架。与其让 AI 生成一个缺乏维护、充满临时补丁的"隐性框架"，不如使用经过实战检验、文档完善的开源框架。

4. **开发者体验（DX）的重构**：通过分析 HMR（热模块替换）、TypeScript 和 useEffect 等具体技术，作者说明某些传统 DX 功能对人类开发者的价值正在转变，但对 AI 编程仍至关重要。例如 TypeScript 的类型约束能有效防止 AI 在复杂应用中引入错误，而 useEffect 这类强大但易误用的抽象则应该避免让 AI 随意使用。

5. **框架战争的终结与新机遇**：作者认为 2013-2024 年的"框架战争"已经结束，人们不再渴望为框架争论，但这不意味着框架不再重要。他指出当前框架领域仍存在明显不足，特别是缺乏真正全栈、基于 Web 标准、易于 AI 协作且代码可理解的 JavaScript 框架。

6. **对未来的呼吁**：尽管承认 AI 正在重塑软件开发，且没人知道其长期影响，作者仍坚持认为认为"所有问题都已解决"是一种颓废的态度。他呼吁继续构建新框架，探索更好的抽象和模式，而不是停留在"现有框架足够好"的舒适区。

URL：
https://brookslybrand.com/posts/do-frameworks-matter-anymore/

> 个人觉得有点片面化，remix 脱离 react 转而用 preact 自创轮子

《用 AI 定制框架替换 Next.js：一个静态网站的“超个性化”重构实验》

Mon, 14 Sep 2026 01:14:08 GMT

《用 AI 定制框架替换 Next.js：一个静态网站的“超个性化”重构实验》

标签：
#Web开发 #前端工程 #AI辅助编程 #NextJs #静态网站 #自定义框架 #性能优化 #Vercel部署

总结：

作者 Max Leiter 用 Claude Code（Fable 5 架构、Opus 实现）在约 3 小时内把个人博客从 Next.js 迁移到了一个为站点量身定制的静态构建框架。新方案把全站编译成纯 HTML，按需加载少量 Preact islands，结果页面体积、Lighthouse 分数、构建时间全面大幅优于 Next.js；代价是放弃了框架生态的无数隐性优化，后续维护与安全问题也由自己承担。

文章要点：

1. 作者让 AI “按需造一个比 Next.js 更快的专属框架”，核心思路是只保留这个网站真正用到的 Next.js 功能，而不是继续背着整个框架跑。

2. 新框架本质上是一个构建脚本：读取文章目录，用 React 在服务端渲染每条路由为静态 index.html，再按 Vercel Build Output API 输出，M2 MacBook 上热构建只要约 0.5 秒。

3. 性能提升非常夸张：首页 JS 从 208 KB 降到 2.3 KB（约 -99%），移动端 LCP 从 2.4 秒降到 1.3 秒，整页重量从 1153 KB 降到 78 KB，Lighthouse 直接冲到 100 分。

4. 博客文章页同样收益明显：HTML 更小、JS 只剩 2.3 KB，移动端 LCP 从 2.2 秒降到 1.1 秒，页面重量从 405 KB 降到 57 KB，软导航也改成更轻的 partial/prerender 方案。

5. 交互没有消失，而是改成“islands”模式：桌面窗口管理器和命令面板用 Preact 组件按需水合，命令面板首次按 Cmd+K 才加载，Preact 兼容层只有约 7 KB，比 React 的 52 KB 轻很多。

6. 构建链路保留原有体验：MDX 仍在构建期用同一套 remark/rehype 插件编译，shiki 在构建时同时输出两套主题的代码高亮，所以切换主题不需要额外 JS。

7. AI 还写了一个“parity harness”，对旧站 101 条路由做快照，对比 head、正文和代码块，结果抓出了 8 篇未发布文章泄漏进 RSS、以及一张 404 的 OG 图这类真实问题。

8. 整个实验花费约 669 美元，API 运行 8 小时 27 分，代码新增 20914 行、删除 2022 行，大约用掉 Claude Code 20x 订阅额度的 10%。

9. 作者认为这种做法的意义在于“只 vendor 你真正需要的东西”：框架被压缩到约 5000 行，人和模型都更容易审查，也能减少供应链攻击面。

10. 缺点也很直白：Next.js 里成百上千个小优化和边界处理 AI 未必都知道或能复现；没有现成的 agent 工具链集成；安全修复不再自动从上游来；而且网站一旦有问题，bug、安全、功能需求都归你自己管。

11. 文章还记录了两个浏览器层面的坑：Chrome 的跨文档 view transitions 会因 head 里的外部 module script 静默跳过入场动画，所以 runtime 必须内联；Safari 对 Speculation Rules 的 feature detection 需要同时检查 API 支持和 document.prerendering。

12. 作者最后判断：未来可能会出现更多“vendoring”和 agentic rewrite，也就是所谓“slop forks”；更激进的猜测是，框架本身可能会消亡，因为框架真正值钱的是沉淀下来的庞大知识，而这些知识未来可能被蒸馏成 skills 或某种新标准。

URL：
https://maxleiter.com/blog/thank-u-next

Max Leiter's website

thank u, next | Max Leiter

Replacing Next.js with a vibe-coded "framework"

《十个防止 AI 代码泛滥的前端项目护栏》

Thu, 10 Sep 2026 23:23:08 GMT

《十个防止 AI 代码泛滥的前端项目护栏》

标签：
#前端 #TypeScript #React #AI编程 #代码质量 #ESLint #测试策略 #CI_CD #代码审查 #工程实践

总结：

本文针对 AI 生成代码速度远超人类审查能力的前端项目，提供了一套实用的十项防护清单。核心思路是通过自动化工具链（类型系统、Linter、变异测试、CI 门禁）在代码合并前拦截机械性错误，而非依赖人工逐行审查。

文章要点：

1. 用 OpenAPI 契约替代手写类型：通过 Hey API 等工具从 OpenAPI 规范直接生成 TypeScript 类型、客户端和 Zod 校验，避免 AI 臆造不存在的 API 字段（如 user.fullName），让编译器在构建期就报错。

2. 开启严格 TypeScript 配置：启用 noUncheckedIndexedAccess 等严格标志，让数组索引访问返回 T | undefined，迫使代码显式处理边界情况，减少 AI 常见的"想当然"代码。

3. 把 Linter 当作行为过滤器：使用 SonarJS、react-you-might-not-need-an-effect、vitest/playwright 插件、jsx-a11y 等 ESLint 插件，自动拦截认知复杂度过高、不必要的 Effect、可访问性违规等问题。

4. 设定架构层边界：使用 eslint-plugin-boundaries 或 dependency-cruiser 强制实施分层架构（如 UI 层不得直接访问 API 层），防止 AI 生成的代码逐渐退化为"GitHub 平均水平"的混乱结构。

5. 将重复出现的错误转化为自定义 Linter 规则：当同一种 bug 第二次出现时，立即编写自定义 ESLint 规则禁止该模式。例如禁止在服务层函数中使用 Math.round 和 toFixed，避免双重取整导致的薪资计算错误。

6. 把规则直接喂给 AI 模型：通过项目规则文件（如 .cursor/rules、CLAUDE.md）或技能文件（如 react-doctor），将项目约定、架构决策和禁止模式直接提供给 AI，让模型在生成代码时就遵循规范。

7. 用变异测试验证测试有效性：使用 Stryker 故意破坏代码（翻转运算符、反转条件、交换返回值），检查现有测试是否能捕获这些变异。存活的变异体通常暴露"只测形状不测内容"的无效测试。一个项目约 4,700 个变异体在 6 分钟内完成扫描。

8. 用 Knip 清理死代码：Knip 可以检测未使用的文件、导出和依赖，配合自定义可达性脚本填补其盲区，防止 AI 生成大量"以防万一"却无人调用的冗余代码。

9. 用 jscpd 检测重复代码：AI 倾向于在不同地方生成几乎相同的逻辑，jscpd 能发现这些重复，提示抽象机会或错误的复制粘贴。

10. 将所有检查强制设为 CI 门禁：上述所有工具（类型检查、Lint、测试、变异测试、重复检测）必须作为 CI 的强制通过项，而非可选建议，确保 AI 生成的代码无法绕过质量关卡。

11. 成本与局限：这些护栏会产生噪音（误报）、规则过时和新人上手摩擦等成本，建议按"类型 → Lint → 测试 → CI"的顺序渐进式推行。同时需注意，这些检查只能捕获机械性错误，无法识别糟糕的品味或错误的抽象。

URL：
https://evilmartians.com/chronicles/ten-anti-ai-slop-moves-for-frontend-projects-going-faster-than-humans-can-review

evilmartians.com

10 anti-AI slop moves for frontend projects going faster than humans can review—Martian Chronicles, Evil Martians’ team blog

Ten checks that catch what AI-written frontend code hides: contract codegen, boundary linting, mutation testing, and dead-code detectors.

《Vitest 5.0 正式发布》

Thu, 10 Sep 2026 23:19:53 GMT

《Vitest 5.0 正式发布》

标签：
#前端 #JavaScript #Vitest #测试框架 #单元测试 #性能优化 #BrowserMode #MockAPI #基准测试 #断言改进 #代码覆盖率

总结：

Vitest 5.0 于 2026 年 9 月 3 日正式发布，本次大版本以性能优化为核心，同时带来 Trace View 追踪视图、嵌套项目配置、vi.when 条件 Mock、基准测试重写等多项重要更新，并默认启用更严格的断言与 clearMocks 行为，要求 Vite >= 6.4.0 和 Node.js >= 22.12.0。

文章要点：

1. 性能大幅提升：通过共享 Vite 服务器、稳定的文件系统模块缓存、减少主进程与 worker 往返、加速 vm 池与浏览器模式等优化，整体测试速度提升 8%–53%，大型项目（1,280 模块）运行时间从 7.24s 降至 5.83s。

2. **新增 vitest doctor 诊断工具**：自动运行替代配置并推荐更快的选项，同时默认输出性能提示，帮助用户发现配置瓶颈。
Browser Mode 内置 Trace Viewew**：开启 browser.traceView 后，可记录交互、断言和 DOM 快照，支持逐步回放测试过程，便于调试 CI 失败。
嵌套项目与配置继承继承**：内联项目默认继承根配置（无需 extends: true），被引用的配置文件可声明自己的 projects，支持多级嵌套结构。

5. **新 API vi.when**：支持按参数定义不同的 Mock 返回值，支持深度相等和 expect.any() 等非对称匹配器，并可限制调用基准测试 API 重写API 重写**：bench 变为测试上下文 fixture，可在常规 test() 中使用，支持 fixtures、生命周期钩子、重试和断言，结果可存储并与基线定位器错误显示 ARIA 树ARIA 树**：浏览器模式下定位失败时，同时打印 ARIA 快照和 HTML，帮助快速理解 getByRole 等查询的匹配逻辑；定位器默认启用严格模式。

8. **Mock Temporal API**：假计时器现在同时模拟 Temporal 和 Date，适用于 vi.useFakeTimers() 和 vi.setSystemTime()。

9. **更严格的断言行为**：未 await 的异步断言（resolves、rejects 等）现在会导致测试失败；expect.poll 超时后拒绝并支持 AbortSignal 取消。

10. **clearMocks 默认启用**：每个测试前自动清除 Mock 调用历史，避免测试间报告器统一输出目录。

11. **报告器统一输出目录**：所有报告器输出集中到 .vitest 目录，减少 .gitignore 配置；HTML 报告器支持 singleFile 选项生成单文件报告。

12. **其他实用改进**：新增 --repeats 选项重复运行测试以排查 flaky 测试；injectCjsGlobals 可禁用 CJS 全局注入；覆盖率工具切换到维护中的 @vitest/istanbuljs 包。

13. **破坏性变更**：要求 Vite >= 6.4.0 和 Node.js >= 22.12.0，升级前建议查阅迁移指南。

URL：
https://vitest.dev/blog/vitest-5

vitest.dev

Announcing Vitest 5.0

Vitest 5.0 Release Announcement

《视觉回归测试：你可能还没跑起来的最重要测试》

Mon, 31 Aug 2026 01:33:14 GMT

《视觉回归测试：你可能还没跑起来的最重要测试》

标签：
#前端测试 #视觉回归测试 #自动化测试 #质量保证 #Web开发

总结：

文章系统介绍了视觉回归测试（Visual Regression Testing）的概念、重要性、工作原理、主流工具及实践建议。核心观点是：即使功能测试覆盖率100%，应用仍可能在视觉上"看起来完全损坏"。视觉回归测试通过截图对比基线，捕捉传统测试无法发现的视觉缺陷，在AI生成代码时代尤为重要。

文章要点：

1. 为什么视觉测试不可或缺：单元测试、集成测试和E2E测试只验证功能逻辑，不检查实际视觉呈现。CSS类名测试是代码异味，因为即使类名正确，实际渲染仍可能因样式冲突、加载失败等出问题。

2. 工作原理超直观：在真实浏览器中渲染页面/组件并截图，与基线快照对比。匹配则通过，不匹配则在CI/CD中标记失败，需人工审核确认是否为预期变更。

3. 能抓住哪些"隐形"Bug：组件一处修改意外影响其他使用位置、CSS变更导致的布局错位、响应式问题、跨浏览器渲染差异、字体/图片加载失败等。作者曾靠它避免了一个SVG图标在20处地方颜色错误的生产事故。

4. 三大主流工具怎么选：Percy（适合全页截图，与Playwright/Cypress/Puppeteer兼容，UI体验好但用量大时贵）；Chromatic（Storybook生态，组件级截图，免费 tier 友好）；Vitest Browser Mode（内置截图测试，但缺少审核UI，适合组件级）。

5. 接入CI/CD很轻松：通常在现有E2E测试中插入一行代码即可，如Playwright中调用percySnapshot()或Chromatic的takeSnapshot()，无需重构测试架构。

6. 避免" flaky 测试"的实用技巧：确保页面完全加载后再截图；用CSS隐藏动画区域；对动态数据（如日期、"5天前"）设置忽略区域；避免对内容过多的整页盲目截图，要有选择性地测试。

7. AI时代的刚需：随着AI生成代码的普及，视觉回归测试将变得更加关键，能帮助团队快速发现AI改动带来的意外视觉副作用。

URL：
https://howtotestfrontend.com/resources/visual-regression-testing-introduction-guide

How To Test Frontend

Visual Regression Testing: The Most Important Test You're Not Running

Your tests can pass while your app looks broken. Visual regression testing catches the UI bugs that unit, integration and E2E tests miss - and here is how to set it up with Percy, Chromatic or Vitest Browser Mode

《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

Fri, 28 Aug 2026 01:09:36 GMT

《TanStack AI 进入 RC 阶段：从 humble chat() 到完整 AI 生态》

标签：
#前端开发 #AI框架 #TanStack #TypeScript #开源

总结：

TanStack AI 正式从早期原型迈入 RC（Release Candidate）阶段，标志着其从一个简单的 LLM 聊天方法，成长为覆盖聊天、媒体生成、MCP、沙箱、Agent 编排等全场景的 AI 开发框架。核心设计哲学是"不锁定用户"——在传输层、提供商、前后端技术栈上都保持中立，同时通过极致的类型安全和统一的 API 模式降低学习成本。项目由三人业余时间维护，完全开源，无商业路线图。

文章要点：

1. 从小 chat() 到大生态 — 最初只有 4 个提供商和一个自定义协议，如今已支持 24+ 提供商，采用 AG-UI 官方协议（被 20+ Agent 框架跨语言支持），并扩展到媒体生成、MCP、沙箱、Agent Harness 等领域。

2. 中间件是架构的核心超能力 — 几乎所有高级功能（持久化、沙箱 Agent、内存、遥测）都以中间件形式接入 chat() 方法，Durability 则通过适配器插入流式响应。Lazy Tool Calling 用一个布尔标志就能降低 Token 成本。

3. 传输层零锁定 — 提供 SSE、WebSocket、HTTP Stream、Cap'n Web 等原生传输原语，客户端通过自定义连接适配器消费流，让你对传输层有端到端的完全控制权。

4. 一套 API 模式打遍所有模态 — 无论是文本生成、图像生成、视频生成、音频生成、转录还是实时音频，API 结构几乎完全相同。学一次模式，换适配器即可，不用学 20 套不同 API。

5. 类型安全是 DNA 级别 — 不支持的模型选项、缺少必填属性、把某提供商专属工具传给不支持的模型……统统在编译期报错。目标是让你在再复杂的应用里也能自信上线。

6. chat() 方法是全能核心 — 支持直接对话 LLM 和沙箱 Agent Harness；内置持久化与 Durability（刷新页面、切换对话后能从断点实时续流）；支持 Codex 等 Agent 在远程/本地沙箱中运行；还有 Code Mode（Agent 在 isolate 中写代码并执行，优化性能和成本）。

7. 媒体生成是一等公民 — 实时音频、TTS、图像/视频/音频/音乐生成、转录等全部稳定可用，覆盖 100+ 模型。支持流式直传客户端或一次性生成，两者切换无缝。

8. RAG 与记忆 — 通过 Cohere、OpenRouter 等提供商支持嵌入和重排序；支持所有主流厂商的 Agent 记忆，让 Agent 跨对话记住用户偏好和关键事实。

9. 沙箱与 Agent Harness 不挑提供商 — 不强制你用 Daytona、E2B 或 Vercel Sandboxes，基础设施随你选。支持 Codex、Claude Code、Grok、OpenCode 等 20+ ACP 兼容 Agent，甚至能自建本地编码 Agent。

10. MCP 支持带类型生成 — 不仅能连接外部 MCP 服务器，还能通过 CLI 为远程 MCP 暴露的工具生成类型，保持端到端类型安全。支持连接池和生命周期管理。

11. 持久化与 Durability 是亮点 — 提供存储原语，你只需实现 Store 并通过一致性测试套件验证，接入持久化中间件后，用户一个月后回来也能从断点续聊。Durability 适配器可将流块持久化到内存、Durable Streams 等，用户重连后不会漏掉任何内容——全部配置约 20 行代码。

12. 未来路线图 — 核心架构已锁定，接下来重点在 Agent 工作流与编排（并行运行、定时任务、复杂工作流协调），以及继续补齐提供商生态。完全开源，无商业 upsell，欢迎社区贡献。

URL：
https://tanstack.com/blog/tanstack-ai-rc

TanStack

TanStack AI Enters the RC Phase | TanStack Blog

TanStack AI enters the release candidate phase. The architecture is locked in, with 24 providers, AG-UI, media generation, MCP, sandboxes, and persistence.

《前端状态管理的真相与迷思》

Mon, 27 Jul 2026 02:05:27 GMT

《前端状态管理的真相与迷思》

标签：#前端 #Web开发 #React #状态管理 #Redux #Zustand #Jotai #MobX #CRDT #离线优先 #实时协作 #前端架构

总结：
作者犀利指出，React生态中流行的"状态管理"库（Redux、Zustand、MobX等）本质上只是状态传播与通知系统，而非真正的状态管理。真正的状态管理必须包含时间维度与顺序概念，能正确应用变更并解决冲突。作者推荐转向Y.js、Zero、Fluid等基于CRDT或OT的时序感知系统，它们天然支持离线优先与实时协作，才是前端数据层的未来方向。

文章要点：
1. 那些我们天天用的Redux、Zustand、MobX，本质上更像"消息广播员"而不是"状态管家"——它们能通知组件更新，却搞不定时间顺序和冲突解决
2. React自己也不是状态管理系统，整个前端圈把这个词用得太随意，导致大家一直在用错误的工具硬撑复杂场景
3. 真正的状态管理必须懂"时间"和"顺序"，就像分布式系统用向量时钟给事件排队，没有时间概念就谈不上管理
4. 值得庆幸的是，Y.js、Zero、Fluid这类基于CRDT和操作变换的工具已经相当成熟，它们天生会处理冲突，离线和实时协作都是顺手的事
5. 当我们把数据层从"发通知"升级到"管时序"后，离线优先和实时协作不再是昂贵的附加功能，而是正确架构带来的自然馈赠

URL：
https://infrequently.org/2026/07/state-management

Infrequently Noted

The Absolute State of Management

It is by no means the gravest linguistic crime of the React epoch,1 but "state management" grates like nails on chalkboard. A Socratic dialogue I keep having about it goes something like this:

《前端框架基准测试平台》

Fri, 24 Jul 2026 15:50:48 GMT

《前端框架基准测试平台》

标签：#前端 #Web开发 #FrameworkBenchmarks #PerformanceTesting #JavaScriptFrameworks #React #Vue #Svelte #SolidJS #Preact #Qwik #Lit #Angular #BundleSize #BuildTime #LighthouseScores #HMR #NPMStats #StackMatch

总结：
这是一个全自动化的前端框架基准测试平台，由开发者Alicia Sykes维护。项目用同一个天气应用在React、Vue、Svelte等12+个主流框架中实现，每晚自动跑分对比包体积、Lighthouse评分、加载速度、CPU内存占用、构建时间及HMR热更新速度。还整合了GitHub和NPM社区数据，并自带Stack Match智能推荐工具。所有原始数据开源可下载，帮你告别选型纠结！

文章要点：
1. 同一个天气应用，12+种框架实现——React、Vue、Svelte、Solid.js、Qwik、Lit等主流选手全部到场，公平对决
2. 每晚自动跑分，数据新鲜出炉——包体积、Lighthouse性能分、FCP/LCP/TTI加载指标、CPU内存占用、构建时间、HMR速度全覆盖
3. 社区数据一目了然——GitHub Stars、NPM月下载量、依赖数量、维护者人数、TS支持情况、许可证信息全整理好了
4. 自带Stack Match智能推荐工具——填填项目偏好，就能get最适合你的框架，选型不再拍脑袋
5. 完全开源透明——所有原始数据以JSON格式开放下载，测试用Playwright统一验证，结果可信可复现

URL：[https://framework-benchmarks.as93.net/](https://framework-benchmarks.as93.net/)

Framework Benchmarks

A comprehensive comparison of modern frontend frameworks

《TanStack Start 心智模型：给 Next.js 开发者的迁移指南》

Sun, 21 Jun 2026 09:59:34 GMT

《TanStack Start 心智模型：给 Next.js 开发者的迁移指南》

标签：#前端 #TanStack_Start #Next.js #React_Router #TypeScript #全栈框架

总结：
文章从一位资深 Next.js 开发者的视角，系统对比了 TanStack Start 与 Next.js App Router 的核心差异。核心心智模型翻转在于：Next.js 默认服务端优先、隐式约定驱动；TanStack Start 默认同构 React、显式声明边界。作者逐一对比了路由类型系统、数据获取、服务端函数、缓存策略、渲染模式、认证防护等关键维度，指出 TanStack Start 更适合高交互 SaaS 类应用，而 Next.js 在内容型站点和成熟生态上仍有优势。

文章要点：
1. 心智模型大翻转：Next.js 默认组件跑在服务端，需要显式标注 "use client" 才能上客户端；TanStack Start 默认组件同构（服务端+客户端都能跑），只有需要纯服务端逻辑时才用 createServerFn 显式声明，边界更清晰，不容易踩坑
2. 路由类型系统碾压：Next.js 的文件路由是约定驱动，TypeScript 对参数无能为力；TanStack Router 会在构建时自动生成完全类型化的路由树，路径参数、搜索参数、loader 返回值全部类型推断，拼写错误直接编译报错
3. 数据获取的"陷阱"：Next.js 的 Server Component 只在服务端执行，天然安全；TanStack Start 的 loader 是同构的——SSR 时跑在服务端，客户端导航时跑在浏览器里，所以直接写数据库查询会泄露环境变量，必须用 createServerFn 包裹
4. 缓存哲学更简单：Next.js 历史上有复杂的四层缓存模型，v16 改为 'use cache' 显式 opt-in；TanStack Start 只有路由 loader 缓存 + 可选的 TanStack Query，没有隐式魔法，哪里缓存、哪里失效一目了然
5. 认证防护双层设计：beforeLoad 负责 UI 层面的重定向（用户体验），createServerFn 中间件负责数据层面的安全校验（真正的安全边界），两层职责分离，比 Next.js 把 edge middleware 和 action 内校验混在一起的方案更不容易遗漏
6. Remix 与 RSC 现状：TanStack Start 的 RSC 支持仍处于实验阶段，实现方式也与 Next.js 不同（更像客户端获取 Flight payload 后组装），如果生产环境重度依赖 RSC，Next.js 目前更成熟
7. 选型建议：内容型/营销站点选 Next.js；高交互 SaaS 后台、需要强类型安全、讨厌隐式缓存魔法的团队，TanStack Start 值得认真评估

URL：
https://www.adarsha.dev/blog/tanstack-mental-model-for-nextjs-developers

Adarsha Acharya

TanStack Start: A Mental Model for Next.js Developers

Understand TanStack Start from a Next.js developer’s perspective: its router-first architecture, explicit server boundaries, typed routing, caching, rendering, and server functions.

《TypeScript 每个人都该知道的实用技巧》

Sat, 06 Jun 2026 12:23:20 GMT

《TypeScript 每个人都该知道的实用技巧》

标签：#TypeScript #前端开发 #代码质量

总结：

这是一份精心整理的 TypeScript 实战模式合集，涵盖 15 个核心技巧，从基础类型安全到高级类型体操，帮助开发者写出更安全、更可维护、更愉悦的代码。每条建议都配有简洁示例，强调"类型安全不等于运行时安全"这一关键认知，适合各阶段 TS 开发者查漏补缺。

文章要点：

1. 用 unknown 替代 any：强制做类型校验，守住类型安全的第一道防线，防止类型泄漏
2. 让类型推断为你工作：减少不必要的显式注解，避免类型拓宽和维护负担，代码更简洁
3. 用 satisfies 代替 as：既验证类型兼容性，又保留具体推断，比强制断言更安全
4. 从值推导类型：用 as const + typeof 让运行时和编译时保持同步，告别手动维护两份定义
5. 用可辨识联合建模不可能状态：用 status 标签区分状态，比松散的可选属性对象更可靠、更易扩展
6. 用 never 做穷尽检查：在 switch 的 default 分支里赋值 never，让未来漏改直接变成编译错误
7. 配置和常量用 as const：把对象属性收窄为字面量类型，比如 "dark" 而不是宽泛的 string
8. 用类型谓语做可复用的收窄：把运行时检查写成 value is User 形式，让编译器理解你的守卫逻辑
9. 从现有类型构建新类型：掌握 Pick、Omit、Partial 等工具类型，用变换思维代替重复定义
10. 运行时校验外部数据：TypeScript 不验证 API 响应，配合 Zod 等库在边界做运行时校验
11. 多数场景避免 enum：字面量联合类型通常更易重构、更易序列化、运行时行为更可控
12. 优先使用可推断的泛型：好的 API 设计让用户无需手动传泛型参数，靠上下文自动推断
13. 开启严格编译选项：strict、noUncheckedIndexedAccess 等标志是 TS 真正发挥价值的地方
14. 学习模板字面量类型：用 `` /api/${string} `` 这类模式约束路由、事件名、CSS 工具类等字符串
15. 类型安全 ≠ 运行时安全：TS 提升正确性，但不替代校验、不保证架构、不消除运行时错误

URL：https://github.com/AllThingsSmitty/typescript-tips-everyone-should-know

GitHub

GitHub - AllThingsSmitty/typescript-tips-everyone-should-know: Practical TypeScript patterns for writing safer, more maintainable…

Practical TypeScript patterns for writing safer, more maintainable code. 🗃 - AllThingsSmitty/typescript-tips-everyone-should-know

《为什么我放弃Next.js和RSC，回归传统SPA与独立后端》

Mon, 01 Jun 2026 00:06:54 GMT

《为什么我放弃Next.js和RSC，回归传统SPA与独立后端》

标签：#前端 #Web开发 #React #NextJS #React_Server_Components #SPA #架构设计 #安全 #TanStack #Hono

总结：

作者回顾了自己从Next.js忠实用户到拥抱App Router/RSC，最终回归传统SPA+独立后端的完整历程。文章深入分析了RSC架构带来的心智负担、序列化开销和安全风险，结合2025-2026年多起严重CVE漏洞，论证了将渲染框架与安全边界解耦的必要性，并分享了当前基于React Router+Vite+Hono的简洁技术栈。

文章要点：

1. Next.js的黄金时代：Pages Router时期心智模型清晰，服务端/客户端边界一目了然，文件路由简单易懂，部署零成本
2. App Router带来的混乱：Server/Client Component区分成为负担，"use client"指令传染性强，开发/构建/生产环境缓存行为不一致，服务端客户端边界变得不可见
3. 安全漏洞敲响警钟：2025年CVE-2025-29927中间件绕过(CVSS 9.1)、2025年底RSC核心包10分满分漏洞CVE-2025-55182、2026年初多起Server Function DoS漏洞，攻击面集中在服务端渲染和反序列化环节
4. TanStack并非避风港：2026年5月TanStack遭遇供应链攻击，42个包被投毒，说明换框架不能免疫风险，减少依赖面才是关键
5. 序列化是根本原因：RSC的"无缝"本质是分布式系统的序列化问题，函数、类实例、错误栈都无法透明穿越边界，反序列化不可信输入成为高危攻击面
6. 当前架构选择：React Router框架模式+Vite纯SPA（仅营销页预渲染）+ Hono独立后端，API通过显式HTTP调用，无RSC负载，无服务端序列化
7. 安全设计原则：认证授权在API层强制执行，前端中间件只做UX跳转，CORS/CSRF/验证码/限流全部在可控的后端实现，与渲染框架彻底解耦
8. 核心收获：架构清晰可指认、无序列化税、前端攻击面趋近于零、后端语言自由选型、依赖更少爆炸半径更小——"无聊"在软件工程里是赞美

URL：https://dev.to/zulikram/why-i-walked-back-from-nextjs-and-rsc-to-a-plain-spa-and-a-separate-backend-4k8p

《用 Web Components 构建框架无关的设计系统（实践指南）》

Sat, 30 May 2026 00:08:24 GMT

《用 Web Components 构建框架无关的设计系统（实践指南）》

标签：#前端 #WebComponents #设计系统 #Elena #VitePress #CSS #无障碍

总结：
本文是一份超详细的实战教程，手把手教你用 Web Components（通过 Elena 库）和 VitePress 搭建一个框架无关、可发布的设计系统。核心思路是"最低可行层级"——用 web 标准直接写原子组件，避免框架锁定；组件保持"最笨"状态，把复杂业务逻辑留给应用层。文章涵盖 monorepo 结构搭建、Elena 组件脚手架、条件渲染、@scope 样式隔离、CSS 自定义属性主题化，以及通过 JSDoc + Custom Elements Manifest 自动生成 Props 表格的文档工作流。最终产出的是一个可独立发布的组件包 + 可部署的静态文档站。

文章要点：
1. 设计系统从第一天就绑定特定框架（如 React）是"令人费解的"——web 标准组件才是可移植、可组合、经得起时间考验的选择
2. Elena 是"刚好够用的抽象"：处理跨框架的 prop/attribute 同步、事件委托等脏活，但不掩盖 web 标准本质
3. 组件应保持"最笨"——被告知显式状态和内容的声明式组件，比内置复杂状态管理的"聪明"组件更健康
4. 设计决策应该在代码中而非 Figma 中完成：现代色彩空间、相对单位、对数排版比例等，设计工具只能模拟浏览器的很小一部分能力
5. 用 @scope 实现样式隔离 + 组件级 CSS 自定义属性作为"最终层 token"，既保证封装又有主题化回退
6. JSDoc 注释即文档：Elena 自动生成 custom-elements.json，VitePress 通过 data loader 直接渲染 PropsTable 和 ComponentHeader
7. 文档即测试场：在 VitePress 中实时预览组件，确保跨框架可移植性；开发时 concurrent 运行 watch + docs:dev 实现热更新
8. 条件渲染示例：同一个组件通过 href prop 自动切换 button/a 标签，CTA 链接按钮的常见需求也能语义化实现

URL：https://piccalil.li/blog/framework-agnostic-design-systems-part-1/

Piccalilli

Framework-agnostic design systems: a practical approach to web components

Baking framework lock-in into your design system from day one is a recipe for obsolescence. Component documentation is often tedious and out-of-sync with development. Let’s build a documentation-first, framework-agnostic component library using web standards…

《Chrome DevTools MCP v1 发布：为 AI 编码代理赋予浏览器调试超能力》

Mon, 25 May 2026 08:33:43 GMT

《Chrome DevTools MCP v1 发布：为 AI 编码代理赋予浏览器调试超能力》

标签：#前端 #AI_Tools #Chrome_DevTools #MCP #Browser_Automation #Performance_Debugging

总结：
Chrome 团队正式发布 DevTools MCP v1，通过 Model Context Protocol 将 Chrome DevTools 的完整调试能力开放给 AI 编码代理。它让 Claude、Cursor、Copilot 等 AI 助手能够实时控制浏览器、抓取性能 trace、分析网络请求、检查控制台日志，甚至处理 1500 万行级别的性能数据，从而把"盲写代码"的 AI 变成能看、能测、能调优的闭环调试器。

文章要点：
1. 告别盲写时代：以前 AI 编码代理只能凭空推理代码，无法看到实际渲染效果。DevTools MCP 直接给 AI 装上"眼睛"，让它能截图、查 DOM、读控制台、抓网络请求，基于真实浏览器状态做判断。
2. 40+ 工具全覆盖：从点击、填表、导航等自动化操作，到性能 trace 录制、Lighthouse 审计、内存堆快照、网络请求分析，几乎把 DevTools 面板的能力完整暴露给了 AI。
3. 性能分析是杀手锏：Paul Irish 演示了如何处理 1500 万行 JSON 的复杂性能 trace，MCP 服务器会解析并提炼出关键洞察，让 AI 帮你做原本需要资深性能专家才能完成的初步诊断。
4. 接入零门槛：支持 Claude Code、Cursor、Copilot、Gemini CLI、VS Code 等主流工具，一条 npx 命令即可启动，还能自动连接本地已运行的 Chrome 实例，无需额外配置。
5. 架构扎实可靠：底层基于 Chrome DevTools Protocol 和 Puppeteer，自动化操作自带智能等待，避免 flaky；同时支持 headless 和有头模式，适应不同场景需求。

URL：https://developer.chrome.com/blog/devtools-for-agents-v1

Chrome for Developers

Streamline your AI coding workflow with Chrome DevTools for agents 1.0 | Blog | Chrome for Developers

Chrome DevTools for agents provides your coding agent with the visibility it needs to verify, debug, and optimize code in real time.

《告别Tailwind，重新学习组织CSS》

Sun, 24 May 2026 00:07:06 GMT

《告别Tailwind，重新学习组织CSS》

标签：#前端 #CSS #TailwindCSS #CSS架构 #响应式设计 #语义化HTML

总结：

文章要点：
1. 作者从Tailwind迁移到语义化HTML+原生CSS，发现Tailwind其实教会了她很多系统性思维（如重置样式、配色、字体层级），现在正把这些系统用原生CSS重新实现。
2. 采用"组件化"CSS架构：每个组件有独立类名和文件，CSS互不覆盖，编辑时只需关注100行左右的局部代码，大幅降低心智负担。
3. 保留Tailwind的实用系统：直接复制preflight重置样式，沿用配色变量和字体尺寸变量，让原生CSS也能像Tailwind一样快速决策"要大一点就用xl"。
4. 响应式设计新思路：减少媒体查询，改用CSS Grid的auto-fit和grid-template-areas实现自适应布局，这是Tailwind难以做到的"奇怪玩法"。
5. 迁移原因：新版Tailwind强依赖构建工具；作者CSS能力提升后想突破Tailwind的限制；受《Tailwind与CSS的女性气质》一文影响，决定认真对待CSS这门技术而非逃避它。

URL：https://jvns.ca/blog/2026/05/15/moving-away-from-tailwind--and-learning-to-structure-my-css-/

Julia Evans

Moving away from Tailwind, and learning to structure my CSS

Hello! 8 years ago, I wrote excitedly about discovering Tailwind.

《Orval：从OpenAPI规范自动生成类型安全客户端代码》

Sun, 17 May 2026 10:15:08 GMT

《Orval：从OpenAPI规范自动生成类型安全客户端代码》

标签：#前端 #全栈 #OpenAPI #TypeScript #CodeGeneration #ReactQuery #Swagger #APIClient

总结：
Orval 是一个代码生成工具，能读取 OpenAPI v3 或 Swagger v2 规范（支持 yaml 和 json 格式），自动生成带完整 TypeScript 类型签名的客户端代码。它支持 React Query、SWR、Vue Query、Svelte Query、Solid Query、Angular、Hono、Zod、原生 fetch 和 MCP 等多种框架与库，同时还能生成模型、请求函数、Hooks 和 Mock 数据。项目提供在线 Playground 快速体验，开发时使用 Bun 构建，社区活跃且有赞助支持。

文章要点：
1. Orval 的核心能力是从 OpenAPI / Swagger 文档一键生成类型安全的 TS 客户端，告别手写接口代码的繁琐工作
2. 生态支持非常全面，覆盖了 React、Vue、Svelte、Solid、Angular 等主流前端框架，还有 React Query、SWR 等数据获取方案
3. 不只是生成请求函数，还能顺带产出数据模型（Models）、React Hooks、以及用于测试的 Mock 数据，一条龙服务
4. 项目内置了在线 Playground，不用安装就能上手体验，对新手和想快速验证的同学很友好
5. 开发侧使用 Bun 作为包管理工具，测试流程完善，包含单元测试、快照测试和 CLI 验证

URL：https://github.com/orval-labs/orval

GitHub

GitHub - orval-labs/orval: orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI…

orval is able to generate client with appropriate type-signatures (TypeScript) from any valid OpenAPI v3 or Swagger v2 specification, either in yaml or json formats. 🍺 - orval-labs/orval

《用TanStack_Start构建博客（上篇）》

Sat, 18 Apr 2026 08:38:00 GMT

《用TanStack_Start构建博客（上篇）》

标签：#前端 #TanStack_Start #TanStack_Router #Server_Functions #静态预渲染 #Markdown博客 #代码高亮

总结：
本文通过实战案例演示如何使用 TanStack Start 框架构建一个 Markdown 博客系统。文章重点介绍了 Server Functions 解决同构加载器无法访问文件系统的问题、动态路由参数处理、以及使用 markdown-it 和 Shiki 实现带行号的高亮代码块，为开发者提供了完整的技术实现路径。

文章要点：
- TanStack Start 是基于 TanStack Router 的轻量级服务端框架，支持 SSR、API 端点和 Server Functions
- 使用 import.meta.glob 动态扫描 Markdown 文件，配合 gray-matter 解析文章元数据
- Server Functions 是同构应用的关键——无论 loader 在服务端还是客户端运行，都能保证文件读取逻辑始终在服务端执行
- 动态路由通过 $slug.tsx 文件命名实现，配合 createFileRoute 和 head 函数设置页面标题
- 使用 markdown-it + Shiki 实现代码高亮，通过自定义 transformer 支持 line-numbers 语法标记，结合 CSS counter 渲染行号
- 文章预告下篇将介绍静态生成和部署策略

文章URL：https://frontendmasters.com/blog/building-a-blog-in-tanstack-part-1-of-2/

Frontend Masters

Building a Blog in TanStack (Part 1 of 2)

TanStack Start is one of the newest web frameworks, and its popularity is rising quickly. Start is a thin server-side layer that sits atop TanStack Router and provides features like server functions, API endpoints, and server-side rendering. I wrote a three…

《垂直代码库：告别按类型分层，拥抱按业务域组织》

Sat, 18 Apr 2026 08:12:54 GMT

《垂直代码库：告别按类型分层，拥抱按业务域组织》

标签：#前端 #代码组织 #架构设计 #Monorepo #React #软件工程

总结：

本文主张前端代码库应从"水平分层"（按 components/hooks/utils 技术类型划分）转向"垂直切片"（按业务域/功能域组织）。作者以 Sentry 代码库十年演进为例，指出水平分层会导致代码分散、认知负荷高、耦合混乱；而垂直组织将同一业务域的组件、工具、类型内聚到一起，配合 Monorepo 的显式边界（exports/eslint-plugin-boundaries），能显著提升可维护性。虽然确定正确的垂直划分需要更多团队沟通，但这是支撑代码库长期演进的必要投资。

文章要点：

- 水平分层的隐患：把代码按 components / hooks / utils / types 分类虽然上手简单，但随着项目膨胀，同一业务逻辑会被拆得七零八落——比如 PageFilters 的组件、类型、工具函数散落在三个目录，改一个小需求要跳来跳去， cognitive load 直接拉满
- 垂直切片的核心思想：不按"技术类型"而按"业务域"分组，把同一个功能域（如 dashboard、profiling、billing）相关的组件、Hook、工具、类型全部收进一个目录；就像当年我们把 HTML/CSS/JS 从三层文件合并成组件一样，这次是更高维度的"关注点内聚"
- 与团队结构天然对齐：现代产品团队通常是端到端的功能团队（dashboard 团队、replay 团队），垂直代码结构让 CODEOWNERS 和包边界直接对应团队职责，谁负责什么一目了然
- 解决跨域复用焦虑：不是所有代码都严格属于某个页面，像 PageFilters 这种被多页面使用的通用能力，完全可以作为独立垂直域存在；关键是按"逻辑关联"而非"物理位置"来划分
- 用边界守护架构：垂直化后还需降低耦合，推荐通过 Monorepo + package.json#exports 显式暴露公共 API，或借助 eslint-plugin-boundaries 禁止深路径导入，把"私有实现"真正保护起来
- 没有银弹，但值得投入：确定合理的垂直域确实比"丢进 utils"更难，也可能出现不同团队重复造轮子；但作者认为这恰恰促进了团队沟通，而沟通本就是软件工程最难也最重要的部分

文章URL：

https://tkdodo.eu/blog/the-vertical-codebase

tkdodo.eu

The Vertical Codebase

Let's take a look at why the common, horizontal code structure is not ideal, where it breaks down, and what we can do about it.

《2026年JavaScript生态全景指南》

Wed, 08 Apr 2026 09:23:59 GMT

《2026年JavaScript生态全景指南》

标签：#前端 #JavaScript #ECMAScript2025 #ECMAScript2026 #React #Vue #Svelte #NodeJS #TypeScript #Vite #Bun #Deno #TemporalAPI #IteratorHelpers #ImportAttributes

总结：
本文全面梳理了2026年JavaScript生态系统的最新发展，涵盖ECMAScript 2025（迭代器助手、Set方法、Promise.try等）和2026预期特性（Temporal API、资源管理），React/Vue/Svelte框架动态，Node.js原生TypeScript支持、Bun和Deno运行时竞争，Vite 8与Turbopack构建工具演进，TypeScript v6及AI编程趋势。文章强调掌握基础原理比追逐工具更重要，特别是在AI辅助编程时代，架构能力和代码品味尤为关键。

文章要点：
- **ECMAScript 2025超实用新玩具**：迭代器终于能链式调用`.map()和.filter()`啦，而且是惰性求值不耗内存；Set之间可以玩集合运算，轻松找出技能交集和差集；`Promise.try()`让同步异步错误一网打尽；还有`RegExp.escape()`终于解决了用户搜索时特殊字符炸正则的问题～

- **2026年最期待的Temporal API**：Date对象终于被拯救了！处理时区和日期计算不会再莫名其妙多出几天，浏览器原生支持即将到来，告别 moment.js 大礼包的时代要来啦～

- **框架圈的大新闻**：React 19的Server Components和Compiler还在消化中，Vue 3.6祭出Vapor Mode性能大招，Svelte 5的Runes API让响应式更细粒度； Next.js 16默认切到Turbopack，Astro被Cloudflare抱走，Remix正在酝酿去React化的大胆实验～

- **运行时三国杀**：Node.js 22+能直接跑.ts文件啦（虽然只是剥离类型），Bun被Anthropic(Claude家)收编后1.3版本速速飞起，Deno 2稳如老狗主打安全牌，三足鼎立格局越来越有意思～

- **TypeScript登顶GitHub第一**：v6严格模式默认开启，v7要用Go重写编译器提速10倍；92%的开发者都在用AI写代码，但文章提醒我们——基础原理和架构品味才是AI时代真正的护城河呀！

文章URL：https://frontendmasters.com/blog/what-to-know-in-javascript-2026-edition/

Frontend Masters

What To Know in JavaScript (2026 Edition)

We’ve done posts like this for CSS, but JavaScript deserves the same dangnabit! Especially as JavaScript does a better job of versioning itself anyway. We’ll cover new stuff in the language itself, but being a JavaScript practitioner involves more than the…