Web标准 | 锤子前端

《框架还重要吗？》

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"

《程序员的音乐理论：从零推导乐理系统》

Fri, 28 Aug 2026 01:06:54 GMT

《程序员的音乐理论：从零推导乐理系统》

标签：
#音乐理论 #编程 #Web_Audio_API #声学物理 #数学原理 #计算机科学

总结：

本文从物理和算术的第一性原理出发，用 JavaScript 代码逐步推导出整个西方音乐理论体系。作者不依赖记忆，而是通过编程和听觉验证，解释了为什么音乐有十二个音、为什么大调音阶是那个形状、为什么和弦听起来和谐，以及乐谱本质上是一种序列化格式。核心洞察是：音乐理论并非 arbitrary 的约定，而是物理（泛音列）和数学（简单整数比）的自然结果。

文章要点：

1. 声音的本质是随时间变化的数字 — 音频就是每秒 44,000 次描述扬声器位置的数字列表，频率即音高，440Hz 只是人为约定的基准。

2. 音色来自你没要求的频率 — 任何乐器发出的都不是单一频率，而是基频的整数倍（泛音列）。不同波形（正弦、三角、方波、锯齿波）本质上是泛音配方的差异，这解释了为什么小提琴和小号音色不同。

3. 八度是频率翻倍，音高是乘法关系 — 220Hz、440Hz、880Hz 听起来是"同一个音"，因为高八度的所有泛音都包含在低八度的泛音列中。因此整个音高问题简化为"如何把倍频区间分割"。

4. 简单整数比听起来和谐 — 2:1（八度）、3:2（五度）、4:3（四度）、5:4（大三度）听起来协和，是因为它们的泛音列有大量重叠；而复杂比例（如 √2）产生拍频和粗糙感。协和的本质是耳朵能快速找到重复模式。

5. 十二音律是数学妥协 — 纯五度（3:2）叠 12 次不等于 7 个八度（2^7），这个无法修复的误差叫"毕达哥拉斯音差"。现代十二平均律将八度均分为 12 份（每份是 2 的 12 次方根），虽然除了八度都不纯，但让所有调都能用。12 之所以被选中，是因为它是第一个能把五度误差控制在约 0.1% 以内的数字。

6. 音阶是间隔数组 — 大调音阶 [2,2,1,2,2,2,1] 只是一个七元素数组，加起来为 12。自然小调是它的旋转（从第 5 位开始），七种调式则是同一数组的 7 种循环移位，这让作者感叹"音乐理论终于不再像 arbitrary 的 trivia"。

7. 和弦是隔一个音取的堆叠 — 三和弦 [0,2,4] 取音阶中每隔一个的音，大三和弦 [0,4,7] 与小三和弦 [0,3,7] 只差一个半音，却代表了西方音乐两大情感极。七和弦加入第四个音后，音乐开始从"圣咏"变成"爵士"。

8. 调内七和弦是自然涌现的 — 在一个大调音阶上，从七个音级分别构建三和弦，会自动得到：I（大三）、ii（小三）、iii（小三）、IV（大三）、V（大三）、vi（小三）、vii°（减三）。罗马数字标记是相对寻址，移调只需加一个常数。

9. 张力与解决有物理基础 — V7 → I 是最强的解决感，因为 V 和弦中的 B（导音）距 I 的根音只差半音，且 V7 包含三全音（B-F，√2 比例，最不稳定），这两个音分别向相反方向移动半音到达稳定位置。

10. 乐谱是带 header 的序列化格式 — 五线谱本质是针对"实时阅读、手在忙"场景优化的数据格式：纵轴是音阶度数（非线性频率），谱号定义坐标原点，升降号是 escape hatch，调号是 DRY 原则（常量提升），时值是 2 的负幂次，附点是二进制分数，速度（BPM）把拍子映射到秒。

URL：
https://runjs.app/blog/music-theory-for-programmers

runjs.app

Music theory for programmers

I can't play an instrument, so I worked out music theory in JavaScript instead. Twelve notes, scales and chords, derived from scratch with code you can hear.

《unbash：零依赖的 Bash 解析器》

Sat, 15 Aug 2026 12:55:27 GMT

《unbash：零依赖的 Bash 解析器》

标签：
#Web开发 #NodeJs #Bash解析 #TypeScript #AST #命令行工具 #静态分析

总结：

文章要点：
1. 定位清晰：unbash 是一个用 TypeScript 编写的、零依赖的 Bash 解析器，能将 Bash 源码（命令、脚本或嵌入在其他格式中的 shell 代码）解析为带类型和源码位置的 AST，且不执行代码
2. 适用场景丰富：可用于权限审核、静态盘点脚本中的可执行文件和依赖引用、将 curl 等命令结构化导入、为粘贴的 Bash 代码附加诊断信息、构建可视化解释、以及安全地查找和迁移命令调用
3. 语法支持全面：涵盖命令、控制流、管道、重定向、赋值、复合语句、参数扩展、进程替换、heredoc、算术表达式等，嵌套命令在参数、数组索引、算术表达式中仍保持结构化
4. 容错能力强：对于畸形或不完整的输入，会返回尽力而为的部分 AST，并附带带源码位置的错误信息，适合处理编辑器输入或用户粘贴内容
5. 性能碾压对手：在多个基准测试中，解析吞吐量远超 tree-sitter-bash（约 717 倍）、sh-syntax（约 92870 倍）和 bash-parser（约 275291 倍），包体积仅 80KB 压缩后 19KB
6. 与竞品差异化明显：相比 tree-sitter-bash 提供的是可执行语法的类型化 AST 而非 CST；相比 sh-syntax 无需 WASM 且 API 更轻量；相比 bash-parser 支持更多 Bash 特性（如 [[ ]]、(( ))、herestrings、process substitution 等）且具备错误恢复能力
7. 与 shellcheck 的互补关系：unbash 专注于"解析结构"，不做语义分析；以下场景推荐用 shellcheck 而非 unbash：
- 检查变量是否已定义或是否被引用（如未引用变量 $var 可能引发 word splitting）
- 检测命令是否存在及其参数合法性（如 git --不存在的参数 语法正确但运行会报错）
- 识别常见陷阱和反模式（如 cat file | grep pattern 可简化为 grep pattern file）
- 检查权限相关风险（如 rm -rf /$undefined_var 的潜在危险）
- 提供可操作的修复建议（shellcheck 会直接给出 SC 规则编号和修复方案）
- 对脚本进行全面的最佳实践审查（POSIX 兼容性、可移植性建议等）

URL：https://github.com/webpro-nl/unbash

GitHub

GitHub - webpro-nl/unbash: Fast 0-deps bash parser written in TypeScript

Fast 0-deps bash parser written in TypeScript. Contribute to webpro-nl/unbash development by creating an account on GitHub.

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

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

《Express全新面貌》

Fri, 22 May 2026 10:19:28 GMT

《Express全新面貌》

标签：#后端 #NodeJS #ExpressJS #Web框架 #文档重构 #开源社区

总结：
Express官方博客宣布完成网站全面重构与品牌焕新，涵盖Astro技术栈迁移、AI智能搜索、版本化文档及全新Logo设计，标志着这个Node.js生态老牌框架在2024年重启后进入新阶段。

文章要点：
1. 网站底层从Jekyll迁移到Astro，带来更灵活的组件模型、国际化支持和内容页性能提升，文档生成与维护方式也一并升级
2. 文档新增多版本并行浏览，Express 4和5的文档可以独立查看，告别版本混淆的烦恼
3. 搜索接入了Orama的AI能力，支持自然语言提问，找API和概念更快更准
4. 全站文档开放了llms.txt端点，方便大模型和AI助手直接读取最新文档
5. 接下来的重点是补齐内容缺口、完善多语言翻译，并让文档和新版本同步发布
6. 新Logo由社区公开协作设计，品牌定位为"Established·Dependable·Approachable"，延续极简风格的同时开启新篇章

URL：
https://expressjs.com/en/blog/2026-05-18-a-new-look-for-express/

Express.js

A New Look for Express · Express.js

Discover the redesigned Express.js website and our brand-new logo, built from the ground up with Astro.

《原生JSON模块终于成为现实》

Wed, 18 Mar 2026 01:43:35 GMT

《原生JSON模块终于成为现实》

标签：#JavaScript #ESModules #JSON #Web标准

总结：本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用import attributes语法with { type: "json" }，开发者现在可以在浏览器、Node.js、Deno和Bun中直接导入JSON文件，无需构建工具转换。这标志着从构建时模拟到运行时原生支持的转变，使模块系统更加显式和可扩展。

文章要点：
- 使用import config from "./config.json" with { type: "json" }语法实现原生JSON导入，替代了以往需要打包工具转换的方式
- 动态导入同样支持：await import("./config.json", { with: { type: "json" } })
- 导入的JSON会被解析一次并缓存，多次导入返回同一对象实例（a === b为true）
- 浏览器仍需服务器返回Content-Type: application/json，并遵循CORS规则
- 与打包工具方案对比：原生方案在运行时获取文件，而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON，已扩展支持CSS模块脚本（with { type: "css" }），为未来其他结构化模块类型建立模式
- 现代浏览器、Node.js、Deno、Bun均已支持该特性，但打包工具在代码分割、资源哈希等方面仍有价值

文章URL：https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/

Allthingssmitty

Native JSON modules are finally real - Matt Smith

JSON imports finally work natively. Learn how import ... with { type: 'json' } changes runtime behavior, caching, and makes bundlers optional.