MDH 前端周刊第 7 期：Next.js 11、Jotai 1

⬆️ 发布
- 1. Next.js 发布 v11
- 2. Announcing Jotai 发布 v1
📝 文章
🪓 代码工具
🎁 代码之外
🕒 订阅

这是「MDH：前端周刊」第 0007 期，发表于：2021/06/21。本期刊开源（GitHub: sorrycc/weekly），欢迎 issue 区投稿，推荐或自荐项目。

MDH 前端周刊第 7 期：Next.js 11、Jotai 1 - 图1

封面图：ryland_dean @ www.unsplash.com 。

⬆️ 发布

1. Next.js 发布 v11

https://nextjs.org/blog/next-11
https://github.com/vercel/next.js/releases/tag/v11.0.0

MDH 前端周刊第 7 期：Next.js 11、Jotai 1 - 图2

个人对 Next.js Live 更感兴趣，技术栈 Service Workers, WebAssembly, ES Modules, Sucrase, Tailwind JIT 和 replicache.dev，暂没有更多细节，后续会开源。

MDH 前端周刊第 7 期：Next.js 11、Jotai 1 - 图3
特性，

Ready In Seconds
- 不需要 build
- 提前编译好了依赖？那新增依赖如何处理？
- 手动试了添加 antd 无效
In-browser Editing
- 基于 ES Modules, ServiceWorkers, and WebAssembly
- 个位数毫秒级热更新
- 编辑器用了 MonacoEditor
Invite Your Whole Team
- 可以多人协作编程
- 文件级冲突处理，有人编辑相同文件时提示“This file is being edited by chencheng”
- 修改后会推送文件内容给所有人，并更新
Frictionless
- 仅需要一个浏览器
Secure by Default
- 代码跑在浏览器，不是本地，也不是虚拟机
Faster than Local Dev
- 所有内容跑在浏览器
- server responses 延迟比 localhost 更小

2. Announcing Jotai 发布 v1

https://github.com/pmndrs/jotai/releases/tag/v1.0.0

MDH 前端周刊第 7 期：Next.js 11、Jotai 1 - 图4

Yet another contender for the state management space, this one is based on “an atomic model inspired by Recoil”.

📝 文章

1. SourceMap 与前端异常监控

https://mp.weixin.qq.com/s?__biz=MzkxNDIzNTg4MA==&mid=2247484211&idx=1&sn=1fe17b3d2f8d74267bb20c61fcf8204d

我们从事 Web 开发工作中，异常监控系统已经是我们朝夕相处的好助手，但是这些异常处理工具通常都是建立在 Web 生态，或者是假定运行在浏览器环境下的，但是当我们需要给一套跨端系统搭建一套类似的异常监控系统，并且期望该系统兼容 Web 生态，现有的工具很可能就不满足我们的需求了，因此我们需要考虑一套完整的异常监控系统整个链路将会涉及到哪些工具链，以及如何修改这些工具链来适配我们的跨端系统。

tl;dr

Sentry 结合 SourceMap 上传能定位问题源码
SourceMap 格式、原理、如何定位源码
SourceMap 的验证可以用 https://evanw.github.io/source-map-visualization/
手动 SourceMap 合并可以用 @ampproject/remapping
eval and anonymous function is bad，可能导致反解失败

2. 玉伯：开源有带给我什么

https://mp.weixin.qq.com/s/B2gfoxnPo0P0dY1DaIjehQ

总结一下，如果说开源带给我什么，首先第一个就是高效工作的习惯，让我受益终身；第二个是在这个过程中，学会了怎么去做产品；第三个是非常感谢自己有兴趣参与一些开源项目之后，从中感受到什么叫热爱，从而改变了我对人生的很多看法。

3. A better React 18 startTransition demo

https://swizec.com/blog/a-better-react-18-starttransition-demo/
https://react-fractals-git-react-18-swizec.vercel.app/ （DEMO）

MDH 前端周刊第 7 期：Next.js 11、Jotai 1 - 图5

Demoing startTransition is hard. Modern computers are too fast 😅

4. 为什么说用 babel 编译 typescript 是更好的选择

https://zhuanlan.zhihu.com/p/376867546

tl;dr

作者考虑的原因，

产物体积小，主要是补丁？
支持的语言特性，TypeScript 不支持还在草案阶段的特性
编译速度，因为有类型检查？

我的一些不同想法，

考虑编译速度，换 esbuild 可能更快
补丁有很多种方案的选择，和编译关联不大

5. 插件式可扩展架构设计心得

https://segmentfault.com/a/1190000040002834

我们的软件系统往往是要面向持续性的迭代的，在开发之初很难把所有需要支持的功能都想清楚，有时候还需要借助社区的力量去持续生产新的功能点，或者优化已有的功能。这就需要我们的软件系统具备一定的可扩展性。插件模式就是我们常常选用的方法。

6. 狼叔：聊聊 Node.js

https://mp.weixin.qq.com/s/zP1K-K4FjeS5gaILFk2ySg

狼叔是如何做的？

egg-react-ssr
iMove，面向开发者的逻辑编排工具
通过 ESM 改善开发者体验
《狼书》卷三

7. 120 行代码帮你了解 Webpack 下的 HMR 机制

https://mp.weixin.qq.com/s?__biz=Mzg2ODQ1OTExOA==&mid=2247491058&idx=1&sn=05b0ddcc20627c46931bafce4d4a745f

在使用Webpack Dev Server以后可以让我们在开发工程中专注于 Coding，因为它可以监听代码的变化从而实现打包更新，并且最后通过自动刷新的方式同步到浏览器，便于我们及时查看效果。但是 Dev Server 从监听到打包再到通知浏览器整体刷新页面就会导致一个让人困扰的问题那就是无法保存应用状态因此针对这个问题，Webpack 提供了一个新的解决方案 Hot Module Replacement。