Now vibe coding, so learning hammer FE ?
《框架还重要吗?》
标签:
#编程 #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 和
5. **框架战争的终结与新机遇**:作者认为 2013-2024 年的"框架战争"已经结束,人们不再渴望为框架争论,但这不意味着框架不再重要。他指出当前框架领域仍存在明显不足,特别是缺乏真正全栈、基于 Web 标准、易于 AI 协作且代码可理解的 JavaScript 框架。
6. **对未来的呼吁**:尽管承认 AI 正在重塑软件开发,且没人知道其长期影响,作者仍坚持认为认为"所有问题都已解决"是一种颓废的态度。他呼吁继续构建新框架,探索更好的抽象和模式,而不是停留在"现有框架足够好"的舒适区。
URL:
https://brookslybrand.com/posts/do-frameworks-matter-anymore/
> 个人觉得有点片面化,remix 脱离 react 转而用 preact 自创轮子
标签:
#编程 #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:一个静态网站的“超个性化”重构实验》
标签:
#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
标签:
#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
《程序员的音乐理论:从零推导乐理系统》
标签:
#音乐理论 #编程 #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. 音阶是间隔数组 — 大调音阶
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
标签:
#音乐理论 #编程 #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
《unbash:零依赖的 Bash 解析器》
标签:
#Web开发 #NodeJs #Bash解析 #TypeScript #AST #命令行工具 #静态分析
总结:
文章要点:
1. 定位清晰:unbash 是一个用 TypeScript 编写的、零依赖的 Bash 解析器,能将 Bash 源码(命令、脚本或嵌入在其他格式中的 shell 代码)解析为带类型和源码位置的 AST,且不执行代码
2. 适用场景丰富:可用于权限审核、静态盘点脚本中的可执行文件和依赖引用、将
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 特性(如
7. 与 shellcheck 的互补关系:unbash 专注于"解析结构",不做语义分析;以下场景推荐用 shellcheck 而非 unbash:
- 检查变量是否已定义或是否被引用(如未引用变量
- 检测命令是否存在及其参数合法性(如
- 识别常见陷阱和反模式(如
- 检查权限相关风险(如
- 提供可操作的修复建议(shellcheck 会直接给出 SC 规则编号和修复方案)
- 对脚本进行全面的最佳实践审查(POSIX 兼容性、可移植性建议等)
URL:https://github.com/webpro-nl/unbash
标签:
#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
《前端框架基准测试平台》
标签:#前端 #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/)
标签:#前端 #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/)
《Express全新面貌》
标签:#后端 #NodeJS #ExpressJS #Web框架 #文档重构 #开源社区
总结:
Express官方博客宣布完成网站全面重构与品牌焕新,涵盖Astro技术栈迁移、AI智能搜索、版本化文档及全新Logo设计,标志着这个Node.js生态老牌框架在2024年重启后进入新阶段。
文章要点:
1. 网站底层从Jekyll迁移到Astro,带来更灵活的组件模型、国际化支持和内容页性能提升,文档生成与维护方式也一并升级
2. 文档新增多版本并行浏览,Express 4和5的文档可以独立查看,告别版本混淆的烦恼
3. 搜索接入了Orama的AI能力,支持自然语言提问,找API和概念更快更准
4. 全站文档开放了
5. 接下来的重点是补齐内容缺口、完善多语言翻译,并让文档和新版本同步发布
6. 新Logo由社区公开协作设计,品牌定位为"Established·Dependable·Approachable",延续极简风格的同时开启新篇章
URL:
https://expressjs.com/en/blog/2026-05-18-a-new-look-for-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/
《原生JSON模块终于成为现实》
标签:#JavaScript #ESModules #JSON #Web标准
总结:本文介绍了JavaScript平台原生支持JSON模块导入的新特性。通过使用
文章要点:
- 使用
- 动态导入同样支持:
- 导入的JSON会被解析一次并缓存,多次导入返回同一对象实例(
- 浏览器仍需服务器返回
- 与打包工具方案对比:原生方案在运行时获取文件,而打包工具通常在构建时内联JSON
- 此特性不仅限于JSON,已扩展支持CSS模块脚本(
- 现代浏览器、Node.js、Deno、Bun均已支持该特性,但打包工具在代码分割、资源哈希等方面仍有价值
文章URL:https://allthingssmitty.com/2026/03/16/native-json-modules-are-finally-real/
标签:#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/