Hi, 大家劳动节快乐～ 新一期的 AsyncTalk 从 Web Container 与 NodeBox 开始，探讨 Web Assembly 的发展与目前的状态，结论是虽然这些相关的产品在 AnnatarHe 看来前景并不乐观，但是 Web Assembly 技术已然成熟，可以尝试参与到我们的业务中，提升用户体验与性能。 11:20 部分的英文是 code reusable 不是 code review 主播读音有问题 � 主播 AnnatarHe: https://annatarhe.com Timeline 00:25 主题: web assembly 01:10 web assembly 的概述 —— 语言无关，性能，安全 03:24 这东西真的有用？！ 03:40 Web Container 05:02 NodeBox 06:30 web assembly 有没有缺点？—— 业务复杂度，debug 困难，只能做纯计算 08:40 debug 困难也许不是 bug 而是 feature 09:09 bundle 过大 10:19 应用场景有哪些？ Photoshop 网页版？sandbox？ 13:35 真正有用的场景在哪里？—— 加密，跨平台 15:50 web assembly 已经比较成熟了，可以上生产试试看 相关链接 Introducing WebContainers: Run Node.js natively in your browser: https://blog.stackblitz.com/posts/introducing-webcontainers/ Announcing Sandpack 2.0 and a Node.js runtime for any browser: https://codesandbox.io/blog/announcing-sandpack-2 nodebox runtime: https://github.com/codesandbox/nodebox-runtime gzip: https://www.gnu.org/software/gzip/manual/gzip.html brotli: https://github.com/google/brotli 扩展阅读 事后看了下 web 版的 photoshop，一个 apollo_assets 的 wasm 文件有 58 MB � BGM by Otologic

本期节目成功拉到子龙和大家一起从 Rspack 开始，探讨开源和 ChatGPT，也有一些新加坡的生活。 有任何意见或者建议请联系 async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com 嘉宾 子龙/龙哥 Timeline 00:11 子龙的自我介绍 03:23 Rspack 看起来好像确实能用 05:45 ECharts —— 国产开源之光 09:36 开源项目也是要吃饭的 —— 大公司做开源项目有什么好处 13:15 前端卷 rust 之后，debug 成本也越来越高 14:40 前端去搞 rust 做这些性能提升真的有必要吗？ 18:20 降本增效背景下，大家都想搞副业 20:10 做开源(core-js)不太能挣钱 22:22 但是，做开源是每个程序员的梦想 23:12 ChatGPT 无所不知 25:17 但取代专业程序员还尚需时日 29:00 很怪，国内程序员限制巨大，但是水平怎么都还比较不错呢？ 33:10 海外生活 —— 生活成本巨高，房租，吃饭 37:20 海外生活的学习 —— 语言，金融系统 41:40 这边也卷，但 “卷” 的概念并不一样 43:48 新加坡怎么没胖子 45:40 新加坡厨师们，请加把劲儿 46:50 子龙觉得新加坡挺小，AnnatarHe 觉得新加坡很大 49:50 新加坡的公关做得非常好 51:40 有机会出去的话，要勇于探索一些不同 相关链接 turbopack: https://turbo.build/pack vercel: https://vercel.com/ rspack: https://www.rspack.dev/ modernjs: https://modernjs.dev/ ECharts: https://echarts.apache.org/zh/index.html webpack: https://webpack.js.org/ parcel: https://parceljs.org/ 扩展阅读 TurboPack 卷起来了: https://asynctalk.com/posts/ep20/ core-js - So, what’s next? https://github.com/zloirock/core-js/blob/master/docs/2023-02-14-so-whats-next.md BGM by Otologic

本期节目主要介绍了请求数据时常遇到的问题以及React框架下的几种解决方案。最后,我们将介绍本期的主角React Query,包括它的设计和功能。 如果有任何意见和建议可以发邮件至 async.talk@gmail.com 如果愿意加入我们的 discord 社区可以点击这里: https://discord.gg/TQczjSJMah 主播 AnnatarHe: https://annatarhe.com Timeline 00:00 开场，确实鸽了段时间 00:35 在 discord 上开了个社区，想来聊天可以加 01:20 请求数据，不像说的那么简单 02:15 loading 说起来容易，做起来麻烦 03:20 in/revalidation 也挺麻烦的 05:25 cancel 也不好处理 07:10 有 devtool 的话，会比想象中更方便 07:30 把前后端交互做好，下班时间（也许会）显著提前 08:10 ahooks 陪跑 08:50 apollo client 仅限于 GraphQL 09:30 SWR 10:30 SWR 翻页数据有想法 12:11 React Query 13:23 Mutation 的支持 14:10 对 TypeScript 的支持较好 14:40 不要 debounce 了，直接取消请求吧 16:29 甚至支持直接生成 GraphQL 16:45 devtool 要比预想中的好用很多 17:07 ReactQuery 的 cache 要是能更强一点儿就更好了 18:20 使用 ReactQuery 记得至少分两层架构 19:00 实现不难，难的是怎么想出来的 20:12 有想法就去实现，下一个万 star 项目属于你 相关链接 AsyncTalk 的 discord 社群: https://discord.gg/8XXfh6jh Document: visibilitychange event**:** https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event AbortController: https://developer.mozilla.org/en-US/docs/Web/API/AbortController React.Suspense: https://beta.reactjs.org/reference/react/Suspense ahooks.useRequest: https://ahooks.js.org/hooks/use-request/index apollo client: https://github.com/apollographql/apollo-client SWR: https://swr.vercel.app/zh-CN ReactQuery 对 TypeScript 的支持: https://tanstack.com/query/v4/docs/react/typescript ReactQuery 对于 GraphQL 的集成与支持: https://tanstack.com/query/v4/docs/react/graphql� 勘误 SWR 2.0 支持了 Mutation: https://swr.vercel.app/zh-CN/blog/swr-v2#useswrmutation BGM by Otologic

前期准备不太充分，节目中有些内容没有表达出来。 一个是我们在做库或者框架的时候，要有一个特点，更重要的是要有设计哲学。 第二点忘记推荐 unix philosophy，非常精彩。 第三点忘记对比几种设计哲学了，设计思想之间的碰撞非常有意思。 在很多时候，软件工程的设计是一个 trade off 的过程。如果我们想要 clickhouse 那样超强的写入计算，那么事务就很难加入进去。 迷茫的时候，这些哲学思想可以帮助我们走出困境，设计出更好的 API，提供更好的开发体验，优化出更好的性能。 节目中没有提到的可维护性也是非常重要的一点，尤其在这样降本增效的大背景下，运营维护成本也不容忽视。 最后，还是节目中提到的，所有的设计哲学的前提是要有基础的能力。千万不能只会拼凑名词，夸夸其谈。一定要先写好代码 有任何意见或者建议，可以联系我们 async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Timeline 00:44 更新频率又更新了 01:20 今天的主题 —— Code is cheap, let’s talk 02:18 文档中 Principles 一节非常重要 03:12 react, redux, react-testing-library, tailwind 的设计哲学 07:12 很多时候写代码不是能做什么，而是不做什么 08:24 我们在做库的时候，可以从哪些方面考虑 —— 性能，颜值正义，开发便捷，语法简单，高可用 12:00 负面例子 —— 我不能理解它设计逻辑的某个库 14:06 做产品一定要有设计哲学/原则。 15:10 基础能力是设计原则的基础，不能只会装。 16:20 抄作业最好也只能抄到第二名 相关链接 Flux: In-Depth Overview https://facebook.github.io/flux/docs/in-depth-overview React Testing Library: Guiding Principles ****: https://testing-library.com/docs/guiding-principles TailwindCSS: Utility-First Fundamentals: https://tailwindcss.com/docs/utility-first ByteByteGo: System Design: Why is Kafka fast?: https://www.youtube.com/watch?v=UNUz1-msbOM Starship: https://starship.rs/guide/ Formik: https://formik.org/ React hook form: https://react-hook-form.com/ BGM by Otologic

本期节目讨论了一些 GraphQL 相关的内容。介绍 GraphQL 的发展，优势，缺点以及对应的一些解决方案。 有问题可以联系 async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Timeline 00:14 没有听众群，刷题和 chatGPT 02:30 首富不懂 GraphQL? 04:30 介绍 GraphQL 以及为什么有用 10:50 GraphQL 的发展，应用，变种 16:25 有谁在用 GraphQL 17:40 GraphQL 有什么优势 —— 沟通成本降低，类型更加健壮，前端缓存更好做 18:49 GraphQL 有什么缺点? —— 学习成本较高，后端性能不好控制，过度请求 20:40 缺点的解决方案有哪些 —— 学，做性能追踪，做 query 管理服务 27:30 关于 Cache 30:00 安利 —— 快试试 GraphQL ! 相关链接 首富吐槽 Twitter 慢是请求比较多. https://twitter.com/elonmusk/status/1591853644944932865?s=61&t=uoOc4m9XOFxNqcCksnbcgw GraphQL - A query language for your API: https://graphql.org/ Relay Modern: Simpler, faster, more extensible**:** https://engineering.fb.com/2017/04/18/web/relay-modern-simpler-faster-more-extensible/ DSL - Domain specific language graph-gophers/graphql-go: https://github.com/graph-gophers/graphql-go Apollo CLI(deprecated): https://www.apollographql.com/docs/devtools/cli/ GraphQL code generator: https://the-guild.dev/graphql/codegen BGM by Otologic

本期节目我们来蹭一下 Turbopack 的热点，谈了一些关于 packer 相关的变化。那么假如听众你要来做一个新的 packer，你会怎么设计呢？ 本期用了新软件剪辑，也许有很多问题，听众有问题可以直接留言或发邮件。节目内容如有错误也请帮忙纠正，非常感谢～ 邮件地址： async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Timeline 00:00 介绍及团队说明 00:42 Vercel 新的发布会与 Turbo pack 03:40 天下苦 Webpack 久矣？为什么？ 06:10 Babel 也许并不是很好的选择 07:10 也许语言也会拖慢 Webpack 09:30 loader 们同样的事情做了很多次 10:10 Vite 的赢面看起来挺大，Rome, Parcel 也不错 13:22 Webpack 由于生态和兼容，大概还是会继续统治前端构建 15:40 假如来做一个新的 packer, 会怎么做呢？ 19:15 听众你会怎么做呢？ 相关链接 Turbopack 的 release tweet: https://twitter.com/vercel/status/1584961746418208774 Is Turbopack really 10x Faster than Vite? https://github.com/yyx990803/vite-vs-next-turbo-hmr/discussions/8 https://twitter.com/ruanyf/status/1392101064866885638 Announcing Rome v10****:**** https://rome.tools/blog/2022/11/08/rome-10/ Parcel v2.8.0: https://parceljs.org/blog/v2-8-0/ esbuild benchmark: https://esbuild.github.io/faq/ SWC benchmark: https://swc.rs/docs/benchmarks Announcing Parcel CSS: A new CSS parser, compiler, and minifier written in Rust!: https://parceljs.org/blog/parcel-css/ BGM by Otologic

在又一次紧张刺激的停更后，我们和 Roc 一起谈了谈 side project 与独立开发的一些事情。主要包括为什么要做独立开发，收益如何，最后再打个绩效。 希望大家可以 happy coding~ 有任何意见建议也欢迎联系我们: async.talk@gmail.com 名词解释 ROI: Return on Investment 投入产出比 RD: Research & Development 本节目中多数意为 工程师/开发/程序员 PM: Product Manager 本期节目中特指 产品经理 主播 Roc: https://twitter.com/roczhang9673 AnnatarHe: https://annatarhe.com Sleaf: https://twitter.com/Sleaf_ Timeline 00:33 Roc 与停更的说明 01:40 独立开发一般做点儿什么 App ? 03:20 Roc 做的一些 App 07:50 为啥不太高兴做 Android ? 11:20 完全不上班，靠卖 App 生活现实吗 ? 14:30 除开资金，还会有什么其他收益 ? 25:30 Sleaf 与 AnnatarHe 做 AsyncTalk 是怎么想的 27:00 Roc 给自己的独立开发生活打个绩效吧 28:00 做独立应用会有一些意想不到的 bonus 30:40 替 Roc 做的广告 33:00 Roc 的个人感悟 34:20 如果你迷茫颓废了，做个 App 开心一下吧 相关链接 App: X Progress https://apps.apple.com/us/app/x-progress/id1359786804 App: Mr. Weather https://apps.apple.com/us/app/mr-weather-2/id1453150372 BGM by Otologic

第 18 期几位主播聊了一些关于我们自己日常用的编辑器，插件和 App。 如果有什么好用的东西也可以评论或者留言给我们哦: async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Sleaf: https://twitter.com/Sleaf_ Tinko: https://space.bilibili.com/290664 小鹿 Timeline 00:40 编辑器，IDE 与插件 09:05 开发相关的一些 App 也很好用～ 18:00 Atom —— 时代的眼泪 相关链接 Jetbrains’ Free Educational License: https://www.jetbrains.com/community/education/#students Emmet: https://emmet.io/ VS Code Remote Development: https://code.visualstudio.com/docs/remote/remote-overview GitLens: https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens rust-analyzer: https://marketplace.visualstudio.com/items?itemName=rust-lang.rust-analyzer AnnatarHe 的 vimrc 配置: https://github.com/AnnatarHe/vim-config Emacs Evil mode: https://github.com/emacs-evil/evil Alfred: https://www.alfredapp.com/ uTools: https://www.u.tools/ raycast: https://www.raycast.com/ Xcodes.app: https://github.com/RobotsAndPencils/XcodesApp NetNewsWire: https://netnewswire.com/ reeder app: https://reederapp.com/ craft: https://www.craft.do/ shottr: https://shottr.cc/ TablePlus: https://tableplus.com/ sqlectron: https://sqlectron.github.io/ Sunsetting Atom****:**** https://github.blog/2022-06-08-sunsetting-atom/ 扩展阅读 安裝 Xcode 的正確姿勢: https://www.notion.so/Xcode-dfbe2d934ff84b2d84e34ffceef56fe0 weak self ep85 iOS 開發者之痛、iOS 開發者之恥 — Xcode 管理學: https://weakself.dev/episodes/85 BGM by Otologic

第 17 期几位主播聊了一些关于我们自己日常用的一些 Terminal, Shell 和命令。 如果有什么好用的东西也可以评论或者留言给我们哦: async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Sleaf: https://twitter.com/Sleaf_ Tinko: https://space.bilibili.com/290664 小鹿 Timeline 01:17 入题：差生文具多 01:22 Terminal 10:18 Shell 14:20 命令 23:30 结语，还有下一集哦 相关链接 iTerm2: https://iterm2.com/ Dracula Theme: https://draculatheme.com/ tmux: https://github.com/tmux/tmux/wiki Powerline fonts: https://github.com/powerline/fonts Maple Mono font: https://github.com/subframe7536/Maple-font Warp Terminal: https://www.warp.dev/ tldr: https://github.com/tldr-pages/tldr thefuck: https://github.com/nvbn/thefuck hyper.js: https://hyper.is/ putty: https://www.putty.org/ Microsoft terminal: https://github.com/microsoft/terminal Zsh: https://www.zsh.org/ oh my zsh: https://ohmyz.sh/ fish shell: https://fishshell.com/ oh my fish: https://github.com/oh-my-fish/oh-my-fish ash: https://en.wikipedia.org/wiki/Almquist_shell nushell: https://www.nushell.sh/ fkill: https://github.com/sindresorhus/fkill-cli ripgrep: https://github.com/BurntSushi/ripgrep jq: https://stedolan.github.io/jq/ httpie: https://httpie.io/ fzf: https://github.com/junegunn/fzf ag: https://github.com/ggreer/the_silver_searcher bat: https://github.com/sharkdp/bat delta: https://github.com/dandavison/delta diff-so-fancy: https://github.com/so-fancy/diff-so-fancy beyond compare: https://www.scootersoftware.com/ zx: https://github.com/google/zx BGM by Otologic

本期从一个问题开始 如何在一个定宽 div 中展示一个可能会略长一些的文本 在探索方案的同时，我们也聊了一些关于如何提问可以更有效地获取答案的方式。 有任何问题可以邮件或评论区联系： async.talk@gamil.com 主播 AnnatarHe: https://annatarhe.com Tinko: https://space.bilibili.com/290664 Sleaf: https://twitter.com/Sleaf_ 小鹿 Timeline 01:00 问题起因，如何在定宽文本中放入文本 08:00 质疑需求 16:16 提问的智慧 相关链接 Letter spacing: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing Marquee tag: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/marquee html2canvas: https://www.npmjs.com/package/html2canvas Canvas.fillText: https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fillText 录播软件 OBS: https://obsproject.com/ 提问的智慧: https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md BGM by Otologic

这一期我们一起看一些前端状态管理的方案，从 window.store 到 Flux 的变化，双向绑定与单向数据流又是怎样的妥协与融合，从客户端手动管理到 type based cache 的发展又有怎样的经历。 有任何想法欢迎邮件联系： async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Tinko: https://space.bilibili.com/290664 Sleaf: https://twitter.com/Sleaf_ 小鹿 Timeline 02:05 全局状态的用处 04:00 全局状态管理的进化 05:33 Flux 的新时代 07:45 this.$store.x = 1 违背了 Flux 原则吗？ 10:20 双向绑定是不是一个错误的方向 12:28 新方案 Pinia 与 Recoil 17:19 没有 store 的全局状态管理怎么样呢？ 22:18 状态机？ 相关链接 IIFE: https://developer.mozilla.org/en-US/docs/Glossary/IIFE Flux：https://juejin.cn/post/6844904054921887758 Redux: https://redux.js.org/ Vuex: https://vuex.vuejs.org/ Mobx: https://mobx.js.org/README.html Recoil: https://recoiljs.org/ Pinia: https://pinia.vuejs.org/ useSWR: https://swr.vercel.app/ GraphQL: https://graphql.org/ Apollo Cache: https://www.apollographql.com/docs/react/caching/overview BGM by Otologic

这期节目我们追一追时下比较火的 bun — a fast all-in-one JavaScript runtime 来听听主播们都看了点儿什么。 节目中有任何问题，意见或者建议均可邮件联系： async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Tinko: https://space.bilibili.com/290664 小鹿 节目中提到的 fib 代码如下： 运行结果如图： Timeline: 0:54 最近新出了个 bun 3:26 bun 的性能到底有多好？ 6:31 所以 deno 的意义是什么呢？ 7:26 bun 的一些 API 似乎不全？ 10:21 bun 的串口通信怎么样 10:59 Zig lang 看不懂呀 13:10 你用 bun 装包了吗？ 14:00 bun 的 IO 似乎很快 18:33 Edge computing 21:03 阿里前端近年来风评问题 23:15 bun 就到这里了 相关链接 https://bun.sh/ https://hhvm.com/ https://hacklang.org/ carbon lang: https://github.com/carbon-language/carbon-lang bun 的 fs IO 有点儿快: https://twitter.com/jarredsumner/status/1556948257007210496 Web-interoperable Runtimes Community Group: https://wintercg.org/ egg.js: https://www.eggjs.org/ typescript LLVM: https://github.com/ASDAlexander77/TypeScriptCompiler os.arch() and os.platform() are not correct: https://github.com/oven-sh/bun/issues/173 BGM by Otologic

第二季的开始我们先从浏览器近几年出的 API 谈起，聊一聊浏览器能多做些什么 联系我们： async.talk@gmail.com 主播 AnnatarHe: https://annatarhe.com Tinko: https://space.bilibili.com/290664 Sleaf: https://twitter.com/Sleaf_ Timeline 00:30 新一季想多聊聊新东西 02:05 monaco 做得不错~ 02:55 Permission 03:53 新的 API 好像大多需要 HTTPS 了 05:00 Local Notification & Push Notification 08:50 剪切与粘贴 12:26 video 的自动执行 16:17 主播自用 API 相关链接 Monaco Editor: https://microsoft.github.io/monaco-editor/ Progressive Web Apps: https://web.dev/progressive-web-apps/ 棱镜门事件: https://zh.m.wikipedia.org/zh-hk/稜鏡計畫 Notification API: https://developer.mozilla.org/en-US/docs/Web/API/notification Firebase: https://firebase.google.com/ clipboardjs: https://clipboardjs.com/ Clipboard API: https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API Selection API: https://developer.mozilla.org/en-US/docs/Web/API/Selection execCommand API: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand ClipboardActionCopy 的实现: https://github.com/zenorocha/clipboard.js/blob/2b2f9eef6fd1cf951612740e16e422db2848c00a/src/actions/copy.js#L27 safari 在低电量模式下不会播放 muted video: https://developer.apple.com/forums/thread/709821 Battery Status API: https://developer.mozilla.org/en-US/docs/Web/API/Battery_Status_API Fullscreen API: https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API Picture in Picture API: https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API 修正 节目中提到execCommand的复制内容，经过测试实际上是无须用户先进行真人交互的click操作的 BGM by Otologic

这是一期特别节目，主要内容是我们第一季节目结束，第二季会在 8.11 继续更新。 有任何意见建议欢迎留言或邮件至 async.talk@gmail.com

在节目进行到第 12 期的时候，我们终于写了个自己的官网。以此为契机聊了一些 SEO (搜索引擎优化) 相关的话题 联系我们： async.talk@gmail.com 关键名词： SEO: Search Engine Optimization CSR: client side rendering - 客户端渲染 SSR: server side rendering - 服务端渲染 Nextjs: 一个支持 SSR 的 React 框架 主播 AnnatarHe: https://annatarhe.com Tinko: https://space.bilibili.com/290664 Sleaf: https://twitter.com/Sleaf_ 小鹿 Timeline 0:00 开场 0:19 我们写了个官网 1:02 什么是 SEO 3:42 搜索引擎是怎么看网页的 15:00 OpenGraph 是个好东西 18:37 有些网站其实不想被爬 21:30 怎么提高网站的搜索权重 24:03 搜索引擎的流量在减少 25:42 怎么搜索引擎爬到东西 31:30 自己做一个 SSR ？ 39:45 一些有趣网站的实践 相关链接 https://asynctalk.com/ puppteer: https://github.com/puppeteer/puppeteer 语义化标注 https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles robots.txt Open Graph Protocol: https://ogp.me/ uBlacklist: https://chrome.google.com/webstore/detail/ublacklist/pncfbmialoiaghdehhbnbhkkgmjanfhe https://prerender.io/ https://nextjs.org/ 如何移除你项目中 99% 的JS代码: https://mp.weixin.qq.com/s/UG3T9mpzGA-Co1TBywNCNw https://archive.org/ 分享图生成 https://imgg.gg/ next 的 bug? 一个关于 typescript 执行不一致的问题： https://github.com/vercel/next.js/issues/27871 PageRank: http://ilpubs.stanford.edu:8090/422/1/1999-66.pdf v2ex - 程序员论坛: https://v2ex.com/ BGM by Otologic