Afleveringen
-
状态机自古以来就是前端领域不可分割的一部分。
本期节目从状态机开始，讨论了一些开发经验 —— 包括不能走极端框架信仰，同步不一定万恶，状态机不可分割。
之后用一个例子介绍了如何用流程和状态管理来进行业务设计。
最后，前端的天花板不一定像是外界说得那么低（有没有可能，低是因为视野低？）
主播
AnnatarHe: https://annatarhe.com
Timeline
00:07 比较懒，所以更新慢
03:40 因为巨大的项目，所以想起了状态机
01:58 不要定式思维框架
04:21 设计模式确实很有道理，得学，得用
05:30 复杂状态下，考虑一下，接上状态机
08:20 同步并不是纯粹的坏事，也不应该完全拒绝
09:48 状态机可以有效降低维护成本
10:12 例子：和机器人聊天的状态与逻辑设计
14:14 不要定式思维，不要接到需求就开干
14:50 前端的天花板，也许没有外界说得那么低
相关链接
XState: https://stately.ai/docs
State and Lifecycle: https://legacy.reactjs.org/docs/state-and-lifecycle.html
扩展阅读
Improving State Management with Xstate: Refactoring Authorization Flows: https://annatarhe.github.io/2024/08/04/improving-state-management-with-xstate-refactoring-authorization-flows.html
-
本期节目从前端性能优化开始，主要还是关于 SSR, RSC 和 Node 如何提升渲染性能。目前这条路径看起来应该是个比较确定的 Web 发展方向了。大家可以考虑追上节奏，升职加薪
欢迎评论区留言, 给我们发邮件 [email protected] 或者在 Twitter 留言: https://twitter.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Timeline
00:28 从前端性能优化开始
02:00 传统的前端性能优化在 Server rendering 面前略显尴尬
03:10 后端渲染和 RSC 很不同
07:20 后端渲染的网络天生比客户端快
10:59 大项目可以考虑自己实现 Server rendering
11:30 API Server 的两种设计方式
14:50 Node 躲不开，得学习
15:21 Node 几个有趣的学习点
18:20 后端是个很好的学习入口
相关链接
HTTP2: https://en.wikipedia.org/wiki/HTTP/2
DNS Prefetch: https://developer.mozilla.org/en-US/docs/Web/Performance/dns-prefetch
Preload: https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel/preload
React Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
Partial Prerendering: https://nextjs.org/docs/app/api-reference/next-config-js/partial-prerendering
BigPipe: https://engineering.fb.com/2010/06/04/web/bigpipe-pipelining-web-pages-for-high-performance/
Spring: https://spring.io/
MVC: https://en.wikipedia.org/wiki/Model–view–controller
CGI: https://en.wikipedia.org/wiki/Common_Gateway_Interface
BGM by Otologic
-
Zijn er afleveringen die ontbreken?
-
最近工作不容易啊，来和 前端輕鬆聊 的 Eric 一起聊聊在北美的工作情况。
有任何意见，建议或者评论欢迎在下面评论或者发邮件至 [email protected]
本期剪辑是分开的，也可以去听 Eric 的版本: https://fetalk.dev/episodes/ep34
主播
AnnatarHe: https://annatarhe.com
Eric 前端輕鬆聊: https://fetalk.dev/
Timeline
00:02 欢迎 AsyncTalk 的 AnnatarHe 与 前端輕鬆聊 的 Eric
00:46 北美与中国的面试大概要多久？
04:45 北美面试流程长吗？
08:30 北美招聘市场似乎有回暖
10:30 有趣的面试经历
16:35 变成面试官什么感觉？
17:19 作为面试官，能否合作也许是最重要的
19:50 礼貌是面试者和面试官都需要具备的东西
20:05 面试时双向的，没有谁高谁低
21:42 面试官不要找优越感，找优点
22:46 有题库的面试官，本来就不公平
24:09 别谦虚
26:00 加拿大应届生大概 8 万 CAD ?
30:00 级别越高，股票越多？
31:50 Eric 的神仙面试
33:00 跟人合作也许比业务重要
BGM by Otologic
-
或许是 AI 的发展，文本编辑迎来了又一个春天。从最原始的 Textarea 到一站式的富文本编辑器，再到最近崛起的 Headless framework，文本编辑正在不停迭代
在 AI 的加持下，文本编辑会不会是一个新的窗口？如果自己做一个文本编辑器，如何做技术选型？应该做哪些功能呢？
来听一听今天 AsyncTalk 吧～
欢迎评论区留言, 给我们发邮件 [email protected] 或者在 X 留言: https://twitter.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Timeline
00:30 AI 时代，文本编辑发展很快
02:40 文本编辑器卷得非常厉害
04:05 Word/WPS 早期发展，专业领域依旧强大
04:40 Evernote 简单和云服务也许是它当年的优势
05:20 Markdown 正在吞噬传统文本编辑
07:30 自己造编辑器变得有可能了
08:40 云的链接也许是 notion 和 lark 强大的原因
09:50 jupyter notebook 很不一样
10:41 AI 的革新非常迅速
11:20 如何做一个 Web 文本编辑器？Textarea 与 framework
12:20 整套的文本编辑方案正在向 Headless 转变
13:58 TipTap 与 Lexical
18:06 文本编辑的协作，AI 和报表功能不可或缺
22:22 Local first 真的那么重要吗？
24:20 听众也可以卷文本编辑器，赶上这波 AI 与协作的浪潮
相关链接
Playwright 的 VSCode 拓展，展示了 block 粒度的编辑控制: https://marketplace.visualstudio.com/items?itemName=ms-playwright.playwright
印象笔记(Evernote): https://evernote.com/
飞书(Lark): https://www.larksuite.com/
Jupyter notebook: https://jupyter.org/
TipTap Editor: https://tiptap.dev/product/editor
Lexical Editor: https://lexical.dev/
扩展阅读
Observable Framework 这个产品看起来非常不错，推荐一把: https://observablehq.com/
BGM by Otologic
-
Shownotes
AsyncTalk EP36 来谈论最近很沉重的工作话题。
因为 AnnatarHe 最近有些朋友的职业有一些变化，包括网上的一些评论和态度觉得有必要聊一聊。
这一期主要是谈论了裁员降薪的背景原因，面试没过十分正常。记得要用闲暇时间放松一下，拓展视野。
也不要对互联网沮丧，这依旧是个容量和潜力极为巨大的行业。
在公司的话，记得多跟人沟通交流，学习一些自己不会的东西，也要有自己的品味，最重要的，做个好人。
祝大家过得开心，熬过这段周期。
欢迎评论区留言, 给我们发邮件 [email protected] 或者在 X 留言: https://twitter.com/AsyncTalk
主播
AnnatarHe: https://annatarhe.com
Timeline
00:16 谢谢赞赏支持 @Retros回憶 @Asurada
00:45 EP34 的 JS Runtime 分类并不准确, Hermes 的原因也不一定正确
02:00 最近大家都很压抑，来聊聊
03:45 裁员降薪的原因多种多样。大家都很棒，别 PUA 自己
06:00 面试没过原因多种多样，别沮丧
06:41 面试官水平不一定比你高
09:54 休息，读书，拓展视野
13:13 AnnatarHe 没觉得互联网下行，基本盘依旧是巨大的影响力
15:00 CRUD 也不简单哦 —— 性能，开发者体验，选型，效率
16:41 前端玩得很花，也没那么无聊
17:32 还在打工就一定要白嫖公司
19:00 站不站队？好的工程师一定是有自己的品味的
22:58 记得做个好人
23:50 大佬也不安全，记得做自己的业务
24:52 别沮丧，一定的危机是好事儿
相关链接
Carousell cuts 10% of total headcount, including about 50 job roles in S’pore: https://www.straitstimes.com/singapore/jobs/carousell-cuts-110-jobs-to-rein-in-costs
Mark Zuckerberg’s Message to Meta Employees: https://about.fb.com/news/2022/11/mark-zuckerberg-layoff-message-to-employees/
The Node.js Event Loop: https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick#event-loop-explained
Tokio: https://docs.rs/tokio/latest/tokio/
BGM by Otologic
-
让我猜猜，你是不是也想自己写个博客官网啥的？
来听听这期节目试试有没有其他有趣的方案吧～
感谢 Roy 的赞赏
也记得要关注 twitter 哦: https://twitter.com/AsyncTalk
欢迎评论留言 [email protected]
名词解释
DSL: 专用领域语言 Domain-Specific Languages
ROI: 投资回报率 return on investment主播
AnnatarHe: https://annatarhe.comTimeline
00:00 感谢 Roy 的赞赏！
00:10 我们开通了 twitter: AsyncTalk
01:00 最近重写了遍官网，来聊一聊
02:02 官网和博客的特点：重 SEO, 低 ROI, 要面子, 高信息密度
04:20 技术选型: Gatsby, Astro 或者 Next.js
08:53 其他的技术选型？
09:51 写文章？选 MDX 吧
11:09 OpenGraph 还是要做的
12:19 如何生成 OpenGraph 的图？satori + sharp
14:00 讨好爬虫的手段: HTML 标签, a11y, RSS
16:40 官网博客应该接入其他服务吗？RSS, 打点分析
17:08 图片优化 - blurhash
18:20 怎么部署（白嫖）?
相关链接
twitter 账户: https://twitter.com/AsyncTalk
EP12 官网与 SEO: https://asynctalk.com/posts/ep12
WebWorker No.48 和 Astro Maintainer 瑞丰科普 Astro 使用心得、参与开源和成长感悟**:** https://podcast.webworker.tech/48
Gatsby - 曾经的 JAMStack 老大哥: https://github.com/gatsbyjs/gatsby
Astro: https://astro.build/
NextJS: https://nextjs.org/
Gatsby 5 is dead? https://github.com/gatsbyjs/gatsby/issues/38859
Ruby on rails - 曾经的后端框架王者: https://rubyonrails.org/
Jekyll - 静态站点生成: https://jekyllrb.com/
MDX: https://mdxjs.com/
The Open Graph Protocol: https://ogp.me/
satori - JSX 转 SVG: https://github.com/vercel/satori
sharp - JS 图像操作库: https://github.com/lovell/sharp
React Testing library: https://testing-library.com/docs/guiding-principles
Blurhash: https://blurha.sh/
Cloudflare Pages: https://pages.cloudflare.com/
Render.com: https://render.com/
Vercel: https://vercel.com/
DigitalOcean Apps: https://www.digitalocean.com/products/app-platform扩展阅读
Domain-Specific Languages https://www.jetbrains.com/mps/concepts/domain-specific-languages/� 勘误
BGM by Otologic
-
Node.js, Deno, Bun, Hermes, LLRT。怎么这年头做 JS Runtime 也这么卷？
本期节目介绍了几个 JS Runtime ，来听听看有没有你正在用的 Runtime
欢迎大家在评论区分享你对 JS Runtime 的看法，以及你正在使用或计划使用的 Runtime。
主播
AnnatarHe: https://annatarhe.com
Timeline
00:24 感谢 @辛宝-WebWorker 和 @烤箱 的赞赏支持
01:18 AI 虽然很火，JS Runtime 也很卷
02:17 JS Runtime: Node, Deno, Bun, Hermes, LLRT
03:36 NodeJS 还是老大哥，但是已经成了背景板
04:26 Deno 策略激进, 有力竞争者
07:30 Deno 真正的竞争力: Edge Computing, Cloud, 工具链
09:10 Bun 高兼容，高性能
10:24 Hermes: 启动速度，React Native 专属
10:48 Hermes 真正的竞争力是和 Android Webview 对比出来的
11:50 LLRT: 启动速度和成本
12:38 被遗忘的 Alinode: debug
13:04 如何选择 Runtime
14:24 不同的 Runtime 有不同的注意事项: 语法，接口
16:04 自己做 Runtime 需要注意什么：商业化，云服务，性能，工具链，兼容性
20:08 Deno 的几个卖点可能并不够有吸引力
相关链接
- NodeJS: https://nodejs.org/en
- Deno: https://deno.com/
- Bun: https://bun.sh/
- Hermes: https://hermesengine.dev/
- LLRT: https://github.com/awslabs/llrt
- The Future of the Web is on the Edge: https://deno.com/blog/the-future-of-web-is-on-the-edge
- Deno vs Node.js: Performance comparison for file server: https://medium.com/deno-the-complete-reference/deno-vs-node-js-performance-comparison-for-file-server-9af26133c800
- Is Bun really much faster than Node.js? https://medium.com/deno-the-complete-reference/is-bun-really-much-faster-than-node-js-e5b15942a8e8
- X5 内核: https://x5.tencent.com/
- Alinode: https://cn.aliyun.com/product/nodejs?from_alibabacloud=
- QuickJS Engine: https://bellard.org/quickjs/
BGM by Otologic -
本期节目以最近更新的 react-email 作为引子，讨论了它的出现，功能以及发展方向。同时引申到项目的想法，融资，设计和营销等方面都困难重重，并不容易。最后探讨开发者服务也许是一片新蓝海。
如果你对本期节目有任何建议和意见或者希望合作，欢迎发邮件至 [email protected]
主播
AnnatarHe: https://annatarhe.com
Timeline
00:01 新出的 react-email 让开发邮件前端更简单
03:19 react-email 的 UX 做得非常棒
05:00 react-email 支持众多的 SDK 与 integration
06:38 react-email 有个平台，商业模型大概率是通过发邮件来收费
07:06 这个服务开发难度不高
08:16 但这个服务并不简单：这个想法不容易出，投资也很难拿
10:47 营销更是困难重重：高强度刷 twitter 也是一种工作
12:49 做不出这么酷产品的一大原因：设计的优先级极低
15:07 国内做大而全的产品，不会支持第三方服务的
15:53 开发者体验的优先级也极低
18:26 为何别人能做出 react-email 这样的项目：融资相对简单
19:51 为何别人能做出 react-email 这样的项目：自我牺牲的精神导致内部诉求低优先级
22:50 做开发者服务或许有些机会
23:01 工程师们收入相对不错，有付费意愿，且人数众多，越来越多
相关链接
react-email: https://react.email/
react-email 文档: https://react.email/docs/introduction
mjml: https://mjml.io/
fix(react-email): ESM Issue with await import of the compiled email templates: https://github.com/resend/react-email/pull/1214
野狗 - 云服务: https://www.zhihu.com/org/ye-gou-ke-ji/answers
Leancloud: https://www.leancloud.cn/
MongoDB Database Skills (Sia Cheap Thrills Parody): https://www.youtube.com/watch?v=0vPt7GI-2kc&ab_channel=MongoDB
Zeno Rocha: https://twitter.com/zenorocha
stripe: https://stripe.com
-
注：本期非技术内容
本期和 Philo 及 TK 两位组成了 SG-JP-CA 轴心就海外生活聊了聊天。从出去的原因，方式和目的地选择，到海外业务拓展，商业前景观察。内容很长，聊天蛮愉快。如果你对海外生活感兴趣，可以试着听一听。
因为我们三个人呆的时间都不长，如果有什么不对的地方，欢迎评论或邮件留言 [email protected]
今天的金句:
感觉活着的成分里面，生活比生存更多了一些 - TK
名词解释：
SRE: Site Reliability Engineer
GTA: The Greater Toronto Area
主播
AnnatarHe: https://annatarhe.com
Philo
TK
Timeline
00:00 嘉宾介绍
01:15 Philo 是为了职业发展, AnnatarHe 出去打工去了, TK 则跑去看世界
05:00 世界这么大，是怎么选目的地的
12:40 多样性带来的文化冲击有点儿大
16:30 羡慕极了住在安大略湖旁的大 house 里的 Philo(而且还不贵)
24:38 TK 能买房安家落户吗？
26:00 HDB 买得起，condo 得努努力，house 就别想了
27:20 AnnatarHe 通过中资公司的出海业务出去的
27:59 Philo 是创业项目
28:52 TK 日文好，工作随便找
35:23 读好文档，可以比中介还专业
37:40 3k USD === 3k CNY ?
38:45 房子便宜，白菜贵了
44:08 东京的生活成本可以比上海还低 ???
47:50 月薪没 10w 人民币还是别来新加坡了
48:00 JP 难高薪，CA 税收高
49:40 高税收是 GOV 拿钱分配，低税收靠商业分给国民
50:20 东南亚市场潜力大，但是种族，宗教因素很难把控
52:15 CA 市场比较佛，熟人社会，流行负债
60:00 JP 内外分明，非常保守，难以开拓市场
66:20 合规成本不低，本地市场复杂
71:20 去做 JP 上云业务是不是有点儿搞头？
73:01 CA 做程序员性价比不高
76:05 出来之后，发现生活可以不一样；上海的不满都解决了；天气不错，心情也好了，过非 NPC 的生活
相关链接
日本高度人才准证: https://www.mofa.go.jp/j_info/visit/visa/long/visa16.html
香港高端人才通行证: https://www.immd.gov.hk/eng/services/visas/TTPS.html
-
AsyncTalk 将在杭州和上海举行一场线下聊天（其实就是找个星巴克坐一俩小时）12 月 23 日下午 2 点，杭州城区；12 月 30 日下午 2 点，上海城区。每场活动上限 5 人，若少于 2 人则会取消，参与需要付费 7 元，学生 1 元。有意参与者发邮件到 [email protected] 即可
我们一定能复活，一定能彼此相见，高高兴兴、快快活活地互相讲述经过的事情
— 卡拉马佐夫兄弟 陀思妥耶夫斯基
-
本期是 #2023 技术播客节 的一期节目。主要是和 WebWorker 播客联动一起畅聊 AI, Copilot, Next.js 与跨端技术，内容较长但是也同样比较有趣。
欢迎大家也一起听一听 WebWorker 的节目
若有其他任何意见建议欢迎发邮件联络: [email protected]
金句
刚刚说 copilot这个事情，copilot 帮我们做的时候，是不是我的思维并没有什么价值— AnnatarHe
我日常工作 50% 是 Copilot 完成的 ー 开翼
12 月 4 日技术播客节节目单
@科技乱炖：37位程序员用GPT写代码的真相和AI职业焦虑
@Thoughtworks洞见： AIGC 对程序员的影响
@软件那些事儿：人工智能第一次会议：1956年达特茅斯会议
@OnBoard!：亲历硅谷的一二级投资思考
@开始连接LinkStart：用 AI 打造你的社交助手，两位 90 后创业者有话要说
@内核恐慌：编程的终结
@AsyncTalk：WebWorker 联动 - OpenAI 和 Github 又有什么新活?
@代码不在服务区：前端向未来：AI时代，怎样成为顶尖的前端工程师？
@枫言枫语：科技快乐星球21: 大公司都在挤AI主播
AnnatarHe: https://annatarhe.com
WebWorker: https://podcast.webworker.tech/
辛宝: https://twitter.com/ji3206
开翼: https://twitter.com/real_kai42
小白菜: https://twitter.com/cabbage00001
Timeline
00:30 OpenAI 发布会回顾
07:13 Prompt 管理和调试，可能也没那么容易
21:01 Copilot 卖你 $10 块钱有点儿便宜了
37:50 Next.js 新的 Server Component 影响有点儿大
55:59 小程序你到底行不行啊
63:28 老外也有超级 App 的
72:59 electron 该请个好公关
86:17 快乐戛然而止，下期再见
扩展阅读
技术播客节: https://podfest.tech/zh-CN
PrompPal: https://github.com/PromptPal/PromptPal
github copoilt chat 节目链接: https://www.xiaoyuzhoufm.com/episode/647f4c3b5ed4bd1a463abff3
如何用 Copilot 完整自己 50% 的工作: https://x.com/real_kai42/status/1728280569640018107
关于「2023 技术播客节」
缘起于2022仲夏时节技术播客之间的梦幻联动，我们感受到了社区共创共建的力量。今年我们再接再厉，集结了30+播客、5大出品人、20+社区，希望拉动更多技术生态的内容创作者，一起用声音来表达，建设自家技术影响力，推动更高粘性、更深互联、更持久共鸣的用户社区构建。
-
本期节目主要以 next.js 的 Server component 和 Server action 为主题聊了一些 @AnnatarHe 自己的看法。
总得来说，next.js 这波做得有点儿过了，但是也是发展的大方向。嘲笑之余，还是得学学。
主播
AnnatarHe: https://annatarhe.com
Timeline
00:18 next.js 与 use php
01:05 React 最近最大的变化是 Server Component
02:00 前端多年来的进化 - 复杂是不可避免的
03:06 之前的 SSR 只是为了 SEO, 新的 Server Component 并不一样
04:30 更为极端的 Server Action 也来了
06:16 Server Action 在嘲笑之余，是有很严肃的场景 —— 长期看好
08:10 只是目前的版本大概还略带搞笑 —— 安全的代码很难写，学习曲线更为陡峭
09:50 next.js 的 bug 率可能比我的还高。
10:30 自己的项目升级了 14，不出所料地挂了
11:20 大部分工具库并不支持完整版的 Server Component —— Steaming
相关链接
React Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
Nextjs-use-php: https://github.com/bufferhead-code/nextjs-use-php
Experimental streaming without prefetching in Next.js: https://tanstack.com/query/v5/docs/react/guides/advanced-ssr#experimental-streaming-without-prefetching-in-nextjs
勘误
use-shell 在 twitter 上看到的，没能找到当初的链接，请各位自行脑补
BGM by Otologic
-
Shownotes
本期节目主要介绍了运行时的校验以及它的一个实现 —— Zod.
在越来越大的项目中，运行时校验是逃不开的一个环节，可以应用在表单校验，API 返回值校验和后端的参数校验中。
如果你的项目多人协作但是还没有接入类似的功能，可以考虑加一下，降低一些 bug 率
如果对节目有任何意见或者建议，欢迎联系 [email protected]
名词解释
Runtime: 运行时，运行中的情况
CI: 持续集成，简而言之，build & test 放到独立的服务器去做
Lint: 代码校验，规范协作情况下代码统一
主播
AnnatarHe: https://annatarhe.com
Timeline
00:20 最近意识到 zod 蛮有趣的
00:50 大型项目协作的问题
02:30 Runtime 检查的必要性
03:20 Zod 的优势
04:30 应用场景 —— 表单校验
06:10 应用场景 —— API 校验
07:50 应用场景 —— 后端 HTTP 参数校验
09:10 Zod 实用小技巧 —— Infer
09:50 Zod 实用小技巧 —— Don't Trust, Verify
11:10 Zod 的竞争者们 —— Joi, Yup
12:20 总结： 用起来呀～
相关链接
Zod: https://zod.dev/
Zodios: https://www.zodios.org/
Sentry: https://sentry.io/welcome/
Joi: https://github.com/hapijs/joi
Yup: https://github.com/jquense/yup
扩展阅读
2 hidden ways to get more from your Gmail address: https://gmail.googleblog.com/2008/03/2-hidden-ways-to-get-more-from-your.html
Don't Trust, Verify: 很久之前看的文章，找不到了，请自行搜索。
Zod 对比: https://zod.dev/?id=comparison
BGM by Otologic
-
React Server Component 是最近的大事。本期蹭一次热点，锐评 RSC 和 Next.js。
做前端的朋友们，这次，必须得学后端了哦。
本期内容比较追热点且较为主观。如果有任何想法或者意见也欢迎留言或者邮件交流: [email protected]
主播
AnnatarHe: https://annatarhe.com
Timeline
00:30 Server Component 是 React 又一个巨大 feature
00:50 从后端主导的 web framework 也许正在慢慢向前端倾斜
03:10 Next.js 的 server component 实现大方向很棒，但是小缺点也不少
04:40 缺点: 开发思维转换为 Node 模式
06:10 缺点: use 指令过于魔法
07:10 缺点: CSS in JS 寄了（目前）
08:40 缺点: 框架设计可复杂了，比如路由
09:40 缺点: Cache 有点儿糙。后端的 Cache 和前端是完全不同的思路
11:50 缺点: Fetch 复杂且 HTTP handler 的设计思维不同
14:00 JWT 又又又不行了. Make Cookie Great Again
15:00 Debug 又不一样了，更更更困难了
16:00 必须得学后端了，以及强推去学习 Ruby on Rails
17:10 短期问题挺多，长期会把 Web 开发带向新的高度
相关链接
Routing Fundamentals - Next.js: https://nextjs.org/docs/app/building-your-application/routing
扩展阅读
RSC From Scratch https://github.com/reactwg/server-components/discussions/5
Everything I wish I knew before moving 50,000 lines of code to React Server Components https://www.mux.com/blog/what-are-react-server-components
Ruby on Rails: https://rubyonrails.org/
BGM by Otologic
-
大家好啊，本次更新带来了 Headless Component 的简要介绍，它的优势在于逻辑分离，更好地集成设计系统，易于测试；缺点则是会让架构复杂一层，以及完全不同的开发思维。
大家可以考虑在自己的业务中尝试这种新颖有趣的技术方案。但是也要注意业务场景。
有任何意见建议想法，都可以在评论区留言或者发邮件至 [email protected]
主播
AnnatarHe: https://annatarhe.com
Timeline
00:18 Headless Component 是什么
01:27 优势: 逻辑重用，分离 UI，集成自定义设计系统，易于测试
05:30 弊端: 架构复杂，不同的开发思维
07:00 实例: TanStack table, react-hook-form
09:23 btw: 多数组件库不适应新的 React Server Component
10:38 大势所趋
11:20 但是取决于业务。to C 项目比较适合
相关链接
React hook form: https://react-hook-form.com/
Ant Design: https://ant.design/index-cn
Material UI: https://mui.com/
chakra UI: https://chakra-ui.com/
arco design: https://arco.bytedance.net/
Puppeteer - a headless browser: https://pptr.dev/
TanStack Table: https://tanstack.com/table/v8
扩展阅读
HEADLESS USER INTERFACE COMPONENTS： https://www.merrickchristensen.com/articles/headless-user-interface-components/
BGM by Otologic
-
最近 AnnatarHe 接了 next.js 的 App dir 出了一些问题，由此想到了一些无疾而终的项目。
本期节目主要从这些虎头蛇尾的项目中探讨
- 技术选项怎么能不被 “骗”
- 项目靠暴力营销能行吗
大家有什么想聊的想说的，或者对节目有什么意见或者建议欢迎发邮件到 [email protected]
另外，其实还想说 Tengine 但是查了下 commit， 一年里还是有两三次 commit 的，饶过它了
主播
AnnatarHe: https://annatarhe.com
Timeline
00:20 从 next.js 的 app directory 画的饼谈起
03:25 翻翻 Vercel 的旧账 —— next.js 的类型问题, swc 编译出错
04:50 Mongo 当年营销很猛
06:05 某大厂虎头蛇尾项目集锦 - weex
07:48 某大厂虎头蛇尾项目集锦 - remax
09:40 Swift 的用户很励志，每年都学新语言
10:25 SwiftUI 用户很善良，每年都被坑
13:01 那些无疾而终的框架，有比伤心更严重的后果
14:50 员工要挣 credit 升职加薪，企业也要拿信誉做大做强
15:20 技术选项，怎么不被骗 - benchmark, 文档和 “代价是什么呢？”
19:20 项目需要营销，但是也得考虑长远发展
20:35 项目的支点 —— 热情， 责任和钱
21:02 (我相信)没有项目一开始只想着割韭菜，项目也得想除了热情，如何持续发展
22:50 总结：多问一句 “代价是什么”
23:35 总结：在激情褪去之后，靠什么维持项目？
相关链接
React Server Component: https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components
Railway.app: https://railway.app?referralCode=Ahd-pk
swc: https://swc.rs/
weex: https://weexapp.com/
react reconciler: https://github.com/facebook/react/tree/main/packages/react-reconciler
react native: https://reactnative.dev/
remax: https://github.com/remaxjs/remax/issues/1977
taro: https://docs.taro.zone/docs/
BGM by Otologic
-
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，也有一些新加坡的生活。
有任何意见或者建议请联系 [email protected]
主播
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,包括它的设计和功能。
如果有任何意见和建议可以发邮件至 [email protected]
如果愿意加入我们的 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，提供更好的开发体验，优化出更好的性能。
节目中没有提到的可维护性也是非常重要的一点，尤其在这样降本增效的大背景下，运营维护成本也不容忽视。
最后，还是节目中提到的，所有的设计哲学的前提是要有基础的能力。千万不能只会拼凑名词，夸夸其谈。一定要先写好代码
有任何意见或者建议，可以联系我们 [email protected]
主播
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
- Laat meer zien
