No.62 双人相声：OSAwards 2024 国际服前端哪些作品获奖了？
01:22:47 Share

韩老师准备好了吗嗯 好了好 好 我们开始吧嗨 大家好新一期的 WebHook 播客又来了 WebHook 播客是几个前段程学生闲聊的音频播客节目这次呢 是一场技术闲聊我们和邀请到了播客的好朋友韩老师

大家好,我是秀儿韩老师,喜欢 Rust 和 TypeScript 的秀儿韩老师韩老师是我们多次翻场的嘉宾了,也是我们的荣誉主播这次和韩老师进行一个技术闲聊这次也是最近看到了一个新闻,我想最早是因为看到我们前段时间和 ISPAC 作者去聊的时候提到 ISPAC 最近获了一个奖项,是吧

对他应该是 JS Nation 的一个开源大奖我们顺着这个线索和 ISPAC 我们聊了一期然后这个后续应该会发出来这次我们和海老师一起来看看他 ISPAC 获奖的这个奖到底是什么奖然后提名的还有什么其他东西

里边显然会有 SPEC,我们可以熟悉这块可以着重来讲讲其他好多我熟悉也不熟悉的然后我们也和海老师先聊看看它有什么作用感觉是好多东西是一个陌生面孔也是给听友们做一个介绍科普很多东西我们使用的并不深入所以也可能有说错的地方也欢迎朋友们在评论区和其他各种有效的渠道进行一个互动

OK 那我们开始吧这次这个内容是我们也准备出一个视频版本这里边是打开了这个网站怎么来搜到它呢是去在谷歌里边去搜 JS 然后 Aware 获奖

然后打开这个网页是个黄色的最顶部呢我先快速一说这个网页的组成部分最顶部呢是有一个之前的历史年之前的每年它会评远一次点开这个链接呢会看到 2023 2024 2021 又逐步往前推然后我们看的是 2024 的部分然后这个页面的上边部分最顶部部分呢是一个提名的部分这个是额外的内容和下次提名这个我们就不管

主要我往下滑到这个 1/3 的部分就我们正文开始了我先说一下这个页面上有什么这个里边呢有 2024 的这些这些奖项然后呢分了大概有每个奖项呢分成四个四五个题名应该是五个题名然后五个题名呢分成四个部分 1234 然后我们快速先用中先用翻译工具先翻译一下我先起个头

这是 2024 的提名,分成四个大趴,一个是年度突破奖,技术最令人兴奋的用途,生产助推器,由 AEI 提供支持,这么四个 part,每个 part 有五个提名。OK,那我们开始看看这里有什么东西吧。我们先来看第一个部分,第一个部分,韩老师给讲讲第一部分有啥呀。

哎呀那第一个部分就是年度突破嘛那叫 JS 生态系统里面的最大突破嗯那这几个里面我们看到其实有好多呃我们可能熟悉有也有不熟悉的但 ISPAC 我估计大家可能都会熟悉 ISPAC 是

基本上是什么呢就是是 webinfra 出的一个新项目可能也不是那么新了已经有大概一年了吧 ISPAC 可以说是 webpack 的精神继承者然后用 rust 重写了对它的最好的好处就是和 webpack 基本兼容但是它又比 webpack 快很多对所以可以说是这几个突破奖里面

可以说是基本上就是最脚踏实际而且我们很多人都可能会使用到的东西

对我们在上一期节目里边和 ISPAC 的作者维护者去谈到了这个 ISPAC 我们很多其他讲我们在各自领域会有各自的这个贡献但是 ISPAC 显然是对更多最大绝大部分人是有实际指导意义的那 WiPAC 从 WiPAC 迁移到 ISPAC 上来然后我们能够从中受益

另外呢我们一开始可能会想说啊我们用 RAS 写 WPAC 这个东西功能量会非常大但这个东西随着它的快速迭代不断的进步最终呢也达到了我们现在都认可的这个水平然后它的实际效果也是有目共睹然后稳定性和里边的这个迭代健康程度作为开源项目的健康程度也非常好这个感兴趣我们可以额外去展开去看我们 ISPAC 和拳头老哥去聊的那一部分

这个也确实他是获得了相当于最高荣誉最受我们熟知的部分也是拿到了这个奖项后面我看也有一些熟悉的面孔这个部分我们就不额外展开了这个确实可以展开聊很多但我们之前有一期节目已经作为一个基石了我们就看看其他不熟悉的部分吧

好 那我们再来看看 Solid Start WinterJS 和 Metosis 这几个其实我也没怎么用过所以可能就糊涂了这几个东西背后应该是我们这个东西很多人听了陌生但背后我们做一个类比吧它是我们熟知什么东西可能不完全一致但是我们希望能够完全我没听过 Solid 没听过 WinterJS 的话它类似于我们熟知的什么概念

好我们先来看一下这个第二个叫 solid 啊第二个 solid startsolid start 是什么东西呢它叫做 metaframework 原框架那这个东西基本上我就可以对 react 的话就是 next 对对 view 的话就是 next 那基本上就是它还有一个我们之前说可能有同轻动应该知道叫做 solid js 也是一个前端框架嗯那

呃 solid satna 就是相当于 next 至于 react 嗯

我感觉这个东西提到 Mete Framework 更像框架的概念比如说前段熟悉的 NAS2,NAS3 刚才 React 这边的 Nest 或者说 Remix 这个东西感觉更像的是针对于库级别的一个拓展比如 Sold Start 可能类似于一个框架它里面包含了一些符合框架的周边生态状态路由之类的

那我们只使用 START 的话可能能够完成一部分简单的开发工作但是我们希望有路由有状态的话可能还需要这么一个集成的框架感觉这两年更多的大家更多的去使用了这个框架底层可能有各种各样的库来驱动

对,那稍等一下,星宝,我要稍微纠正一下,它的底层的库叫 solid,就是固体的 solid,solid start,solid 是本体,start 是后缀。对,我刚才讲错了,solid 最近我们在节目中也陆续讲过,

提到传统的不能说得说传统的就比如我们提到 Ryad 魏游 Angela 之外呢还现在还有一些新兴的那 Solid 呢会就是一个 Solid 呢就是一个比较呃有代表性的哎 Solid 它有什么特点那为什么很多人比较好评啊

嗯那我们都知道嘛 react hook 就特别难写然后呃他就是他每一次呢就 prop 就 prop 就是 react hook 那一些 functional programming 的就是函数式编程东西其实大家都挺挺挺不会写的嗯那 solid 呢他的好处就是他其实有点类似于把 view 的那一些

reactive 的东西带到了 react 当中但是呢它比 react 但是呢它用的是 jsx 做渲染

基本上就比 MobX 其实要相当于是 React 加 MobX 这两个混合体但是他做的更完整更无缝的体验这是我们写代码这一层面上面在 Solid 还有一个特色就是它底层的实现它底层实现没有用 VirtualDoc 它是直接通过编译然后读你的

你 js 一个写法然后呢他直接做出一些能操作 dom 或者说直接操作呃操作那个视图的一些操那个代码嗯那这样的呢他就不需要 virtual dom 啊性能上会更快一点

也提到虚拟道姆微道姆这个词汇感觉现在我认为这个可以区分为传统挖家和现代框架现在包括 vue 在内的框架也在探索无虚拟道姆的这部分

对那个那个叫 view vapor 以后我们可以有机会还是可以再去请嘉宾来专门讲讲 view vapor 了对对这个 sode 的话我其实认为在那个之前在看那个性能排行榜上也是比较靠前的位置

对它是 303 是比较快的对所以综合来看 Solo Start 我认为是 Solo 的框架部分它看来把有更多的更新或者现在更稳定了做一个框架然后能够在更多可正生产的级别或更完整的场合去使用它

相当于提升生态了否则永远要比 react 要低一个头其实后面一会再提的话应该也会提到比如刚才提到的我们现在小众的现在的框架 Sword 的话 Swell 的话 Quick 的话都有类似的这种框架的概念去做一个包装和集成 OK 我看第三个第三个叫 WinterJSWinterJS 基本上就是

我们基本上都不太会用的它是一个相当于是什么呢是一个 JS 运行时的一个如果没有理解错就是 JS 运行时的一个标准它和 WinterCG 什么关系

有印象?应该就是 WinterCG,就是 WinterJS 做的吧,但我不是特别了解。嗯,传统上我们会说我们需要在浏览器里面去运行个 JS,那么写个 Node 服务或写个 CI 命令,那需要用到用到 Node,那熟悉一点的话可能会想到,那还有 Deno 还有 Bang,那这样之外,那这个 WinterJS 它和我们熟知的这个概念有什么特点或者说擅长的领域吗?

刚才提到标准应该说当然这个不是我特别擅长的那个假说其实还有一个那个那个死月老师其实更更知道这个事情他就是 winter jazz 的成员那有机会我我我之前聊过他有机会可以让他来专门去讲一讲就按照我不太熟悉的一个理解就 winter jazz 的话这个运行是他

呃完成了一些那个首先他是一个 java script server 他实际上和和那个 deno 啊 node 和 burn 这些其实是是类似的但是呢他又有的是他他更他首先更有标准吧也就是他有 spec 先行的嗯而并不像 node 或者是 burn 这些是以标准呃是以实现先行的嗯

第二个就是它更多有加一些 service worker 的这些功能然后把然后相当于你代码里面或者你写 wintergis 的话那你很就就很像是一个在浏览器里面给 service worker 写脚本的一个场景了对对对

这个之前也在看这个相关新闻的时候会反复的去提到他这个有机会也和刚才提到和未来嘉宾死月有机会去做进一步的探讨嗯后面这个嗯

对,Win2js 对我们现在的日常开发其实可能就比较少,除非你碰这种 Cloudflare 这种 Worker,或者是你在 CDN 上,云服务商上有这种 Worker 的这些东西,你可能会碰得到。

对也是提到就是现在国内也越来越多的去提到 worker 或者去说包装成边缘计算或边缘服务集成服务阿里云上腾讯上也有类似的这个东西嗯也是有它的应用场景 OK 那这个发现是还有一个第四个

对,我都不会念他名字,有可能叫 Metosis 大概吧?大概是他就是能写一次组件,然后能编译成所有的框架 Write once, write anywhere 对,非常诚心勃勃的一个说法怎么叫编写一次运行到其他框架,这个怎么理解?

嗯就 Metosis 的话它会自己有一套就 component 的模型然后这一套模型呢你就按照它那套模型去写然后你能写一堆那个

那个组件的代码然后它呢它的它的框架呢是帮你把这一个呃你写的这 Metosis 的这一个组件把它编译成 React 组件或者 Swell 组件或者 View 组件嗯哈哈哈哈对吧那那你这个你就是相当于别人不能做的我都帮你做了嗯哦这应该是一个庞大的任务

对吧就就比方说哎我有一个组件库我用我用 react 写的你用就用不了或者哎我想用我想切换到更小众的 svelte 这些框架呃没有现成组件库怎么办哎那你如果你的代码是 metosis 写的

那我就能帮你把它给给编过去嗯这有点类似于我们熟知的那个 NJS 里边的 AMPLINE 比如你使用 Vue 或使用一些咱国内的一些组件库的话都会提到说你可以使用 AMPLINE 按一个插件然后能快速的去使用他们那个去适配他们那个组件库这个 AMPLINE 的话就是用一套方法最终导出来了 WIT Webpack 什么刚才提到 ISPAC 什么 ROAP 可能还有其他的那个构建工具

那就是用一套方案写出来了多个产物这个多个产物可以都有他们那个自己的那个应用方式那看起来提到这个方案那我我们约定一套组件的方案就是语法那我们在左边去写然后一点这个 build 那出来了五份产物那我 vue 也能跑了 react 也能跑了那其他各种框架都能跑了我刚才提到说哎我观察到这个域名是后缀是 builder.io

这个看起来好多地方比较熟悉啊对啊那不就是 QuickJS 那个 PartyTownJS 都是一家人出的叫 builder.io 他们好厉害出了很多技术作品嗯 是的

刚才提到 Solid 的时候也提到 Quick 也是 Berryz.io 下面的 QuickKWIK 库和框架它里边也有自己的生态我记得叫 Quick City

对叫 quick city,就类似于 quick 的 next 对对我记得在往前数前段时间还在用他说 quick city 不用的话也可以用一个不用一个生态我忘了叫啥来的也是去年比较火这个没再体现他说 quick city 可以被谁附用来的可以被 beat 吗不是

想不起来了是有一个框架 Astra 对对对 Astra 想起来了这个是额外展开了我记得印象中你可以不用 Quick City 用 Astra 来完成相当于 Astra 也提供了这样基础的路由部分和一些运行时部分

这样我们就提完了 2013 年印象深刻的 breakthrough of the year 提到这四个产品我们来看第二部分第二部分标题和介绍怎么理解?第二个标题叫做最令人兴奋的技术

眼前一亮这个非常有意思他就是说一些独特的或者是说不那么传统的 JavaScript 的技术这里边也提到了 245 五项提名然后排名第一的是 Effect TS 这个海老师前段时间也提到了对 Effect TS 是一个非常神奇的框架怎么理解神奇这个神奇就是

比较小众嗯或者是说他的他的取向是比较比较小众了嗯

而且它背后的历史其实非常悠久这个东西怎么理解呢它是一个 TS 的一个包装还是和 TS 等同级别的还是 TS 的一个包装了很多内置库或者一些最佳实践的一个集合呀

嗯他是一个酷嗯有时候他利用了 type script 的一些特性嗯使得他能做到一些非常神奇的事情呃我们先来讲讲他能做一些哪些事情吧他的官网上有说叫 maximum type safety 就最大的类型安全嗯哎这个我估计大家都比较闷什么意思呢就是我们知道 type safety 就比方一般而言就是说你你的一个函数调用嗯

它的参数是有类型的然后它是一个字符串你不能传数字进去嗯那这样的呢其实还只是一个非常初级的一个类型安全对它类型安全还能做很多其他事情一个比较简单能理解的事情呢就是它的呃错误处理嗯叫 error handling 就一般而言 type script 里面你如果 through 一个 error 那你就 through 了啊是的

你的外面的调用其实首先你一个函数是会不会呃抛异常你是不知道的嗯你不能看他的类型签名你就猜出他会不会抛异常嗯这是一个这是一个没有 type safety 的一个象征第二个呢就是呃如果我知道了他抛异常他能抛哪些异常我是不是全都处理了啊这个也我也没有办法不做保证是的

运行时用户可能传各种各样奇怪的代码对,所以 Effects TS 它的一个功能注意它有一部分功能就是来帮助你做错误处理然后把类型安全放在错误处理上它是怎么来做到的呢?就比方说如果你想要用 Effects TS 写一个函数

嗯那么你他有一个他会返回你给你一个特别神奇的一个对象然后这个对象上面呢不仅包含他的返回值还包含了他可能会抛哪些报错嗯那这样的话首先他在类型签名上就告诉你他会抛哪些错

第二个呢就是当你在处理它的时候你要不把这些类错误给在这个函数里面处理掉要不呢你就说你这个函数还会继续抛这些错误那你这个函数本身的类型签名里面就又包含了那些错误这个看起来和我之前用过的那个 ZOD 去 Safe 去处理这些入餐的时候有一些相似

还还不是还不是这个意思嗯其实差差别比较大就 thought 的话主要是你有一个相当有一个 schema 会有一个对约束有一个有一个样这个我不知道就有一个 schema 这这一个就相当于一个图示或图例嗯或者是说一个类型然后这个类型他能帮你做到在运行时的时候帮你做好

这些检查使得你帮你呃用户输输输一些值然后再帮你自己自己做教验嗯但这里的话一发的 ts 实际上他更像是你的代码里面有哪些错嗯我会尽快的帮你解检查出来哦并不是放在运行时的时候真的他抛了错了才说哎呀我忘记处理了嗯哦在运行时

和在编译时这个我刚才提到我们举个例子我使用这个东西我定义一个比如传一个参数传一个 name 是 name 传一个 age number 我怎么去使用它它能得到什么样的效果更具象一点比如我就写一个你把你的名字告诉我把你的 age 告诉我传两个参数

这个他本身不是做 validation 的,就不是做教验的。他更简单更适合的场景,我们做这个想法举个例子,举个例子,比方说你有一个 618 大兔兰,对吧?有一个促销,然后呢,能买这一个东西的,能买一个促销商品的一定要是 VIP 用户。

而且他要有足够的那个贷金券啊那假设我们有这一个这一个业务需求那用 Effects 呢他就能帮你做出这样首先你要买这个东西你首先是一个得登录嗯没有登录的话他会发一个 login error 啊然后第二你要是 VIP 如果你不是 VIP 啊你要丢一个 VIP error 嗯

最后你要有代金券 否则给你一个 coupon arrow 就是在命中最终逻辑之前的前置这些基础条件需要判断对 然后它这样的话就能帮你保证你买打折商品的时候你这个函数里面会抛这三种错误如果你在代码里面 try catch 的时候

忘记了处理这其中的哪一种那你的编译就过不了啊明白了就这样讲的简单一点的话他他就是这样嗯但如果说像刚才那种的话那就变成了一个 user 就和 zod 完全不一样 zod 的话就是给到一个比方说一个字谱传我要把它检验成是不是电话号码嗯是不是身份证号

那这样的话就和 Effects 的 TS 实际上是差别比较大那这样就更清楚一点了刚才你也提到这是其中的功能之一对它的功能其实非常多它除了这个功能还有一些比较有意思的功能叫做有这么几个首先是依赖注入还有的话是叫资源管理

最后呢他还会打一个标签叫做那个打一个功能叫做我要做一些 observability 就是可观测性的我的代码里面的不同的 loggingmatrix 我可以通过 Effects 来注入一些不同的实现来帮助我能看得到代码里面的调用链或者是那个那个

区别的时间或者说需要消耗的费的时间那这样的确是比我们想象中的解决的问题更复杂更全面更完整

嗯他能解决的问题非常多嗯或者说他其实他其实主要不是为了解决这些呃 observability 啊或者是说啊或者说那呃资源管理可能是但是主要不是为了 observability 或者是 tracing 嗯 effects 的 ts 它背后的逻辑实际上

非常深叫做我们你可以我们我们其实如果有听众知道啊大家代数效应 algebraic effect 如果大家知道 react 的那些历史的话它实际上是相当于一个代数效应它能帮你做好多好多不同的东东西嗯

这个看起来的确非常有意思有机会我们在额外去专门去我认为有必要去专门去展开一下那么现在很多场景或很多它适合它的领域是值得议题值得去专门去介绍我看现在相关的 star 数和 commit 数怎么样默认点进来是进到了它的 GitHub 的 group

整体页面我们点第一个应该是第一个是 web 是网站应该是第二个第二个他竟然有 6000 星真的是非常不容易哦 star 是 6.1k 截止到咱现在 6 月 23 号然后 commit 的数是 5509 然后贡献着有 88 也是一个非常非常活跃非常健康的一个开源项目

对是非常活跃但是他嗯恕我直言他趋高何管嗯非常难嗯显然也是刚才提到这些应用场景显然也是嗯因为你很难说服一个普通的开发者来来接纳他这一套东西对对刚才提到这些的时候我说哦这是好几个我们想想到的一些场景的一个集合

你大概率是不会用它你想你测误处理你顶多多做点测试案例多让 QA 小姐姐帮你多点一点结束了你要在代码里面证明你的 error handling 这一个是要花不少功夫的

是的其实是要花不少工夫的这个还真是蛮有意思因为其他比如某一个之前咱提到这些案例它有明确的适用范围和使用场景这个更多的更像是一个软件工程上的一些约束和增强这个确实它其实它要解决的问题需要你不是需要你就需要你整组人整一个项目的人都要

接受他的这一套写法嗯然后所有的心态包括 mindset 就是你的心智的呃你怎样写代码心智都全部要变化嗯他他 effect js 写出来的代码其实并不是长的其实跟我们一般写代码 effields 是完全不一样嗯这让我觉得从这个描述让我想到了有点像那个什么 axjs 之类之类的

比 RxJS 还要困难,讲了说其实比 RxJS 还要困难。对,但我刚才也提到它更多的是一个软件工程的一个东西,和刚才提到这些工具和解决方案相比,这个感觉更有意思,也看后面有机会我们去额外去做进步展开和使用。刚才提到一些场景,我感觉需要辅助一些更具象的例子,来让我们知道,原来这个框架或者这些人想法是这样的。

行我们刚才也在这个上面也当之无愧是一个第一名然后我们额外展开了一部分我们继续来往下推进第二部分好第二个展开好我来看一看 party kit party kit 我也没用过那什么东西对这对我们来说都是个新东西了先给视频部分给视频听众简单翻译一下这个 party kit 看起来它有什么作用

在这个视频上我们展示了为什么要选择 Particade 它能做什么,它有哪些好处它在标题里,在正文里面最上面部分它说这个 Particade 简化了多人应用程序的开发多人应用程序,那我们能想到一些协作实时

嗯对那个应该就是像比方说你要做一个画板然后哎你要和大家一块用白板然后然后你就你就用 party kit 你画一笔别人就能看到你别人画一笔你也可以看到对吧写实时要做你画我猜那就用 party kit 你好他这个翻译非常有意思

和朋友在一起一切都好,让人家想起来那个你好我也好这个应用程序感觉和我们熟知的比如腾讯文档什么阿里文档之类的协作相似我比如腾讯表格之类的我点我现在我咱俩同时来协作这个文档我输一行字你也能看到你也能去在下一行进行一个输入我们并行来做操作

大概是因为我们看一下它里面的 API 参考的话我们看左侧这个菜单栏还有一些 CLI 基本上是做那个项目的但你要看它下面的话有一个 Ypartykit 是 Yjs API 这个就是 Yjs 就是叫 CRDT 这个我听说过这个之前看他们做协作文档的时候提过两个大的派系

嗯对 CRDT 叫叫叫什么诶呀证明记不下了对就是可以做不同代码呃就呃我想想应该怎么说就在在协作的时候如果你有两一个两个冲突的作用嗯用 CRDT 能帮你做一个那个整合嗯

看起来 Kate 集合组件框架工具它选择了其中一个方案刚才提到是现在我认为是不是分成两个派系刚才提到 VHS 背后的 CRDT 我记得还有一个 DT 还是叫啥来着叫 Operational Transformation 叫 OT 对 OT 我不是很熟悉了

嗯,呃,就就比较难了。一般现在的大家还是用 CRDT 的啊,因为 OT 很难做正确性的,呃,比较难做正确性证明你真的写起来,其实呃,有点什么意思呢?CRDT 呢,就相当于你有一个,我们讲一个最简单的一个例子,就你有一个技术器,所有人都可以加一。

对吧那所有人都能加一那 CRDT 的话就是所有人都能有一个本地的一个一个技术器然后我加一的时候呢我把时间戳气一下然后然后提交给服务器服务器看到你这个时间戳呢帮你排一个位置然后哎那个排一个座位然后你加一我加一大家都加一的时候呢我就帮你把最后能加一把它合并到一块然后再返回给嗯

那这个呢,就叫 CRDT,哎,如果你那个那个地方跟别人有冲冲突了,哎,那我帮你选一个好的,嗯,然后返回给所有人,哎,那我这个冲突就算解决全部解决了,那 OT 呢,他,当然我不是特别了解,他大概的意思就是,哎,你我们都可以本地有一个技术器,你都可以加一,你都可以加一,

但是如果服务器突然哪天告诉你你加一之后别人也有加一的那你要做一些其他的你要在本地做一些 transformation 就你要做一些转换使得你这个状态最终和服务器是一样这是两个派系或两个方案的这些细节部分

有点像 CRDT 的话是服务器发给你一个快照给你然后你就用那个快照 OT 的话是相当于服务器发给你几个指令说你帮我把这些数据给重新归一归掉那 OT 的话你就比较难证明你的所有操作全都被做到了全都被 cover 到了

看起来 PartyCade 我可以用它来做一个简易版的符合自己业务要求的协作文档或者什么画板之类的或者说类似这种协作工具应该是让我的开发或选行的时候更简单我用它提供的这些 API 提供的这背后的这些底层的这些 API 包装之后的这些使用认同它的理念认同它的这些功能我们就可以快速的进入开发状态

嗯嗯对他除了协作的话还帮你自动包好了那个 web socket 那你就能做实时的那个通信嗯那这个就比就比就只比提供你 crdt 要上了一步嗯这也是他呃这个这也是 XXX kit 他们的这些作用哎确实是有意思 OK 我来我们来看第三个

这个之前在提到过多次然后我们来先看他一下简单我快速说一下现在 GitHub 的一些情况 GitHub Star 的话是 8.9K 然后 A 数的话是 200 多 PR 十几然后贡献者的话是 52 提交次数 1000 多也是一个比较年轻的一个项目

但他不仅年轻而且非常现代他的 API 非常好我们看到他第一句话就说了叫 end to end type safety 这个是非常不容易的什么意思呢一般而言我们都知道那个 web 框架比方 Express code 它的核心功能就是干什么就给你一个 HTTP

报文你帮我解成 http request 的的那个对象嗯然后我在那边处理处理完了呢我返回一个 http response 嗯你给我放框架帮我转成 htt 的报文对躺回过去哎那其实其实基本上 http 框架就是这样嗯那他和别人不一样的地方呢他就是有端到端的类型安全哦啊什么意思就比方说我

我客户 Alicia 的客户端他能发的这些嗯他的发的这些 ht 报文他在 Alicia 收到之后他都会用类似 Zod 的这种东西帮你自动的做一些校验

然后你返回完了这些东西呢他也会帮你做成一个有类型的一个 HD 报文你不能说有类型就按照类型帮你做成一个 HD 报文再返回过去这个他和我们熟知的概念哪些东西比较相似呢比如 Express 比如他就是 Express 但 Express 我们在

在我们拿他的 request 的时候是不是没有类型的就哎我这个 UIR 我可以想老实话我可以传任何用户可以传任何东西你明明是一个什么那个 user 的一个界面我哎我把你当成 pat 我把你把你当阿猫阿狗来来来来处理其实没有什么关系嗯那野雷区啊就不会有这个问题就你如果是一个 user 的一个接口他给的东西一定是一个 user 报文嗯

这个看起来它是一个框架然后我们去使用它的话刚才提到这些好处我刚才还看到它是使用棒来驱动的吗

它是用 ban 写的它是跑在 ban 上面所以它非常快也挺快的应该说非常那它和 ban 是绑定的吗如果我没有安装 ban 我能去用这个东西对你得用 ban 所以我感觉它有点类似于 node 里边的我们比如提到 kv 当然 ban 也能去运行这些东西我们使用 ban 的话我们就可以使用优先去使用现在我们提到的框架

他呢,是和,他,现在 Node 不一定能跑,就是说我认为他是两个阵营。对,他这边比方有一些比较噱头的东西,比 Express 快 21 倍。噢,看到了。噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢,噢

看起来他提到的这些亮点也是我们能想到一部分是他基于的语言或者说基于运行时基于棒来开发所以天然的会有一些特性再一个他有在开发的体验上会相比于咱传统的 Express QA 这种方式更符合一些咱直觉更符合咱的使用体验使用感觉

会用起来更舒服这里边截图部分也提到了几个截图中也提到了几个要买案例去提到说我们去怎么来建立一个路由也是去创建个实例去定义这个路由去定义这些返回的结果用起来很自然确实是看起来很自然我们可以看一下这里边的一个 type safety 那一节我们看到有一个 body 对吧

那个信号你其实可以把鼠标放到 buddy 上面它应该能有那个类型它有一个类型叫 buddy 上有 username 这一个字段嘛那这个字段怎么来呢它下面不是就有一个 buddy t.object 嘛它就是用一个类似 zord 的一个 API 来定义我这个 buddy 我的这个 httpbuddy 上面有哪些字段这样的话确实

已经进行了这些类型的这些安全处理了对他直接帮你自动做校验了你就不用自己做校验了确实很多工程考量上的这些处理规则就简单了

就很方便了然后下面我看也提到了 openAPI Swagger 看起来去很容易去接入咱现有的这些传统熟悉的这些生态我们去作为输出对作为对接方输出一个 API 文档输出一些快速的演示示例使用的一些 playground 也去很容易去接入

对这个实际上也是类型安全带来的好处因为你已经有类型了那你自动生成 swag 或者 open API 的这些文档那就非常简单了这样回头我们来重新去审视提供的解决方案那么显然就可以去跑我们去运行一个 server 来基于它来进行驱动我们能够体验到它的好处显然有这些好处其他框架应该也可以去跟进和支持

嗯是 ok 但嗯但 Elysia 实际上有一个特别嗯有一个特别特别的之处就是他的特别之处呢就是他的作者哦作者就是他的作者嗯我们有兴趣的读者可以可以自己研究 Elysia 的作者哦二次元这个我们基本嗯呀这位来自泰国的作者嗯有有其他框架作者

比不上的过人数这个作为额外材料补充吧 OK 那么继续来推荐这个确实有意思背后的小故事来到了第 4 个第 4 个感觉和第 3 个有点相似是吗 海老师你给介绍第 4 个是什么 HonorJS 应该也是一个 web 框架吧这个我就没研究那么多了它的特色应该就是快

打开后的 GitHub 接着到现在,Src 是 16.8K 然后 A 数和 PR 是 149 和 29 贡献者 171 个人然后提交次数 1889 这个今年应该是去年今年吧然后很多人在群里去提到说我用需要 node 去实现一个 server 的时候很多人去提到使用它还是一个比较比较新兴比较活跃的一个项目

对它的好处就是嗯啊首先快然后第二个你它支持本啊 dino 啊或者 node 都能就多运行时这个是它的好处啊快运行时

他这边也提到那首先呢定位还是一个 web framework 那我们去和类比刚才提到的比如 node 里边的 express 和刚才提到这个方案都一样他们是一个定位呢是一个框架那他的特点呢也说快轻量然后刚才提到符合这个 web 标准所以在跨运行时的时候

比如 Node,Bang,Deno 有最大的共识,最大的交集所以可以安全的运行在上面那显然也会提到说刚才提到这些 Worker 这些更小众的领域更特殊的领域也能够去支持和运行那有点类似于你安全的在我这上面去写你写完之后运行到任何位置任何的使用场景上来那当然是不同的

他是不可能的,因为你的不同 runtime 有不同的 API,你不可能只用 JS。所以他 multi runtime 只能说,你写不同项目的,你再写不同项目,你都可以用 HONOR,不用再多写其他 API 了。是的。

但你的逻辑实际上还是要变的因为因为比方说你你 AWS Worker 和和和 Cloudflare Worker 他可能给的 API 就不一样对这个这个是 Node.js 也不一样嗯对这个是平台这是具体写使用特定 API 平台 API 的时候显然是需要这个东西

需要考虑这个 OK 啊看起来之前我们去呃提到推荐在我们在听有群人好多人去说哎我需要用 node 写一个小东西快速来搞那除了 Xpress QA 这种传统的项目有什么推荐很多人提到了他 OK 我们还还有第五个第五个是什么叫 JV 哎呀这个也不也不就不太清楚了不太清楚它的作用是啥呀使用 JS 去是把 JS 做成玩

做成 webremble 的代码快速快这个看起来我们我之前都没有听说过也是因为这次节目提前简单一看这个呢去在简介中去说呢在 websimulator 去运行 JS 然后他这个工具呢拿到咱在咱用户提供的这个 JS 代码之后呢可以在这个 websimulator 里面去跑

是不是说有那么一个 WebAssembly 环境我们还可以运行咱提供的 JS 代码应该是这样然后这个项目在 GitHub 上接着这会儿问题 16 然后提交次数 816 然后贡献参与人数 26 然后这个项目刚刚发了 3.0618 前两天刚发了 3.0 的正式版本也是一个小众新型

新型的一个项目因为 T14 主还不多给他不死大数是 2000OK 那这个地这个我们就不做额外的展开了这个确实呃场景更更小众一些应用使用人数和什么人群也会更少一点那我们来到了第三趴第三趴看起来说起来就比较有意思了海老师给简单介绍介绍第三趴讲了什么对

那个生产力提效工具嘛大家最喜欢的,对,大家最喜欢的那个 Rewrite in Rust 用 Rust 重写又来了,第一名就是 BioMe 这个今年很多人也会提到它很多人也会在使用它来替换咱常用的一些工具海老师给讲讲,这个工具是,我先说一下这个 GitHub

BitHub 接着到当前然后四大数是 11.9K 然后 A 数和 P2 是 120 和 34 然后贡献人数是 416 人还蛮多的提交次数是 6227 然后也是一个快速发展也在挺活跃的一个项目百有美非常

他的非常好的一个项目他去年的时候我印象中咱上次去提到 JS 升星的时候也提到他了他今年应该属于非常发力的一年

它其实就是两个东西第一个是那个格式化第二个是 Lint 对就相当于 ESLint 加 pretty 对他都做了对我们在群友瑞丰之前也提到说他尝试在已经去把它替换掉 pretty 和 ESLint 来尝试使用一个工具来完成这两个工具提到的工作

这个我们在去年提的时候更多还是在谈它的历史谈 ROMA 谈迁移谈 RUST 谈前段时间是 PRATER 就是什么 1 万美刀或 7 万美刀那个悬赏然后它接下来现在的话就是这个网站也是那个现在更看起来更舒服一点了

打开首页的 T 图,同样去格式化一个文件比 Pretter 竞争对手要快 35 倍,0.41 秒和 14.35 秒的差距这个其实 Pretter 的话一般不太是性能评级 ESLint 可能是

这个看起来他之前也提到他有一个更宏大的目标现在已经实现了我们已经实现了两个我们认为实现了一个作为格式化我们能去通过把各种奇奇怪怪的输入能够变成统一的一个规则也类似于 formatter 或 eslint 一部分功能在另一个部分呢就是他现在也去强调他去可以实现这个 lint 规则了对吧

也提到了这些入子能够去兼容或实现类似 ESLint 的这些功能把 ESLint 干掉这个真的是非常三国鼎立的一个时代有 BioMintOxC ESLint 这三国鼎立每一个都非常

就竞争非常剧烈对对刚才提到的这个 OSC 或者是 OXC 然后在这个之前咱节目中应该也陆续点到过好

这个感觉也是到了找到一个新的方式我们去用跨源的方式原生的方式也就是用 RAS 的方式来去实现我们这个东西也能在这在此过程中甩掉一些包袱那么提到 Projector 的 3.0 能够想到一些采控经济那提到 ESLint 现在的一些它的配置文件的一些变化也会带来一些对我们线上跑的现在跑的项目工程化也会有一些冲击

OK 嗯会有非常大的冲击嗯是的然后哎这个说到 BioMe 那我也我要说一下哎说一些八卦 BioMe 实际上雄心也比较大他他用 Rust 写的那他就意味着 JS 的 API 就不太好好设计嗯但是他似乎好像接了一家一家叫 GreatQL 的一家公司

嗯然后到其实到时候我也在 BioMe 的 issue 下面那个呃吹了一波 ASD graph 但是他没有接哈哈哈哈接了接了静停嗯这个是他们选择的不对

哈哈,这个不是今天的重点,我们讲下一个。OK,第二个,第二个是我们来到第二个,第二个是 Nature,这个我熟悉一点,之前在简单去使用过,和刚才提到的 Web Framework 相似,我认为它也是一个可以做 Web 框架,然后它的背后呢是,

呃 h3 啊再往前高的封装呢就是在那 S 那 S 的去做 server 部分去就用到了他我们来点开他的给他在给他数据部分呢然后呃现在的十大数是 5.4k 然后提交数是 2400 那 a 数和 pr 呢是 384 和 25 然后参与人数呢是 249 个贡献者也是一个呃比较年轻的一个框架年轻的一个项开源项目嗯

哎,星哥,你能说一下他 Nitro.js 他有什么特色吗或者说他的抽他有哪些抽象吗哎,我我之前我们去提到说咱去做一个 server 的时候需要做一个实现 node server 做一个服务端的时候我们使用 SPS 使用 KV 那我们现在

我使用 NATURAL 的话会有一些更符合直觉的一些感觉我去首先呢就是我认可这个框架先去看谁在用它呢被第一层呢有 H3 在网上呢在有那个 NAS 我简单解释一下怎么叫 H3 和 NAS 我认为就是呃

NAS 的团队开发了 H3,是一个 BLD 基础的 API 封装我们可以类比 Express 和 HTTP 自带的这个 server 简单做一层封装就变成了 Nature 在 Nature 这个服务上,NAS 把它做了一个包装,一层一层的包装使用 NAS 的时候就用到了 Nature

我印象中它也是可以刚才提到这些有一些内置的这些常用的功能用起来比较舒服然后再去做比如的打包的时候也能提到在不同的方案上进行一个运行我用它做我好像印象中在那个 serve 在 worker 的时候去用了一次印象中时间有点久了也有点忘了进步的这个解释

在这个部署的部分可以看到他提到了使用传统的预设可以在 AgeWorkers 和传统打包的时候也可以部署为 Node 也可以使用 PMR 来部署然后也兼容 NAS 的 Configure 这是我之前对 NATURAL 的一个理解刚才看 Runtime 的时候也支持 Node.js 支持 Bang 支持 Deno

如果我们记错好像不少 Meta Framework 还是记忆它的除了 Nexus 好像 Solid Start 也是记忆它的我有一点记不清了也确实像 NGS 里边它的确推出了很多类似于 Nplayin 一样优秀的一些作品我认为使用它能够减少咱的开发量减少咱的设备工作就是一个好事

这是 natural,我们之前用过,也之前点过,我们就快速一过。我们来到了第三个,第三个看起来是两个有趣的名词的一个组合,这个是啥?这个就是 TypeScript ESLint,给 ESLint 专门检查 TypeScript 的一个项目,其实历史已经比较悠久了。

我来快速过一下数据,在 STAR 上打开 Type-3 的 ESLintSTAR 是 14.8K,A 数 385,PR62,提交次数 5000 刚好整整 5000,10 小时前刚提交 Ctrl+B 是 628,参与人数众多毕竟是一个比较老的项目了

打开它的官网也是非常经典的 window framework 编出来的这个它有哪些竞品我如果不熟悉它迁移的话它有哪些它没有竞品它最强的地方它实际上就是 ESLint 给 ECSLint 来专门 parsetype script 的一套工具链

他最强的地方就是他没有精品嗯这个我为什么因为没有人能写得出他有几个他有几个 eslint root 有几个 root 呢是对 type script 多生定制的哦而且依赖了 type script 的 server 那什么场景下可以用到他比如举个例子

诶 比方说我们都是做 ESLint 的对不对嗯诶 那别人你做 ESLint 就基于 AST 诶 检查一下或者基于 Scope 可能最多了嗯比方说诶 我这个这个这个变量没有没有定义或者诶 我这个变量没有用到你的 ESLint 入可以找到这可能就是他 ESLint 最懂你代码的地方嗯

但 TypeScript ESLint 里面的 rule 那就不一样了它不仅它就更了解你的代码比方说你有一个你有一个函数返回的是一个 promise 你 call 它了但是你 wait 它了别人你用光用那个 AST 其实是检查不出这个事情了对但 TypeScript ESLint 就能检查出来

那我刚才提到这个案例可能就是我们很容易写出来的一个错误代码它可能也是符合规则的也是能正常去运行了但是并不符合我们编写它的目的使用这个工具会减少这些错误是吗对 就它相当于有一些 ES 它提供了一些 ESLintRule 就不可替代看起来这个是这里边打开 哦 这个 7.13

这个我重新处理一下这个东西它是基于什么比如它是基于 ESLint 的它是一个 ESLint 的入子规则集还是能够替代 ESLint 的嗯 应该说是前者是一个规则集还有一些配置比方说一些 parts 的配置对这部分有需求的朋友来可以继续看我们行我们继续来推进来看第 4 个第 4 个怎么理解

熟悉的香草对那个 vanilla extract 香草精这一个东西呢其实就相当于一个 CSS module 我来快速过一下数据打开它这个 GitHub 呢那大数是 9.4K 然后 A 数和 P2 是 47 17 比较少 Contributor 呢 108 也是比较多 Commit 呢 694 看起来比较年轻

打开官网官网里边有一个小示例去解释了它是怎么来使用我们定义了一个 css.ts 后缀的文件在使用它提供的 API 和提供的方法定义了一些样式最终我去导出了这个样式用 Style 一包装它有什么特点呢和我们常规熟知的这些工具相比

嗯,他特点就首先他是一个 Zero Runtime 嗯,什么意思啊就是他编出来的你这一段 styles.css.ts 他编出来里面没有一行啊他或者说基本上就是没有任何 ts 代码需要运行的嗯,他就是一个 css 加一堆类名嗯,就所以他第一句话说就要 Zero Runtime 就是零运行时嗯

第二个呢就是他有有那个 type safety 就是哎你写了一个类名比方说 sim class 对吧那他的这里这里面的啊或者说你的那个 hero 这一个组件的那个类型你一定不会写错什么 background color 你一定写的是 background color 你不可能打错啊多打加一个 color 里面不可能多加一个嗯是那就是他的 type safety 嗯

会稍微有点用处吧就比方说如果大家能理解的话最好理解其实就是 CSS module 嗯对如果大家有用过 CSS module 那 CSS module 里面一般而言它是不太有类型安全的比方说你定义了一个类一个样式

一个 style 的 class 那你在 import 到 js 里面的时候你其实基本上是凭你自己手打手打那个类名要把它打对嗯对这这我感觉这是最呃让人最感觉最舒服的地方对然后但你用 vanilla extract 的话那你这里 import 的时候就一定能 import 这个 hero 否则的话他就给你编译包丛嗯是的这也是比较明确有明确使用场景的一个解决方案

OK 那我们继续推进来到了第五个这个不像是一个工具和库了海老师给介绍介绍哎呀 这个不就是 nodejs test render 那就是你内置的 nodejs 能测试的那我们有了它我们是不是可以少安装一些其他工具了对你 Ava 就不用装了你 Mocha 也不用装了

这感觉更像是一种软件基础功能的迭代如果没有这个功能的话我就需要使用社区中提供的第三方方案大家的一些基于共识大家都使用这个方案现在 node 内置了实现了这个功能从 22.1 也就是 22 也是比较新的功能有了这个功能我们就可以内置来实现完成这些测试的工作

看起来和我们现在熟知的 Vitis 和 Jazz 比较相似

对,但这个东西为什么 nodejs 要加上去呢?那肯定不是那些酷了,那肯定就是 Burn 和 Deno 这些竞品给它施压了,抨击压力。对,当初介绍 Burn 和体验 Burn 的时候,就内置了这些常规的功能,抛开了我们需要额外做努力的,内置就是简单。

那这样的话我们就如果我们需要使用这部分功能的话我们现在的工程化项目就可以来减少使用我刚才也点开随便一看了一个 API 也有我们常规基础的 API 也都是一致类似的 describe 和 8 相关的 OK 这个是文档部分我们就不额外做进一步的展开了我们来看到了第 4 部分也就是咱最后一趴 power by AAAAA 还是 AA

哎呀又是 AI 对吧哎呀就是这个整个这个所有软件都要说 AI 就像所有人都要说英文以大一样嗯哎这个这个最后一趴这几个呃都有什么东西他这一趴用来做什么的看到是 AI 驱动的嗯这好像其实并不是那么

一致的比方第一个和最后一个啊这这五个项目其实基本上都不一样对除了和 AI 相关他们其实都不一样对那我们来看来来看第一个吧第一个获奖的一个给了一个标的第一名嗯 LongChain.js 哎

这个 launch.js 有意思这个在我们播客前两期的时候我们邀请到了我们熟悉的主播嘉宾开意开意呢在日常工作会用到 AI 的一些相关工具也在开发相关的 AI 工具他就比较熟悉 launch.js 他在我们前两期播客呢也提到了就呃

它是如何使用 LongChain.js 来做使用纯用 JS 语言不用 Python 不用其他语言来体验使用调用 AI 的这些能力它也有一个绝金的小册然后这是我们播客相关的我们来点开简单一过 LongChain.js 和 LongChain 是怎么理解 韩老师

这两个就是 Launchain 官方出的一个 JSBall,Launchain 本来是 Python 学的,它为了扩展用户,我就再用 JS 了。打开了 Github star,Launchain.js star 数 11.7k,然后 A 数 141,PR78,参与贡献的 controlvirt 680,惊人啊。

然后提交次数 4115 也是一个比较年轻又非常活跃非常惊人的开源项目 600 多个我天呐我们在绝景小厕在上期节目讲

LongChain.js 是我们额外展开了很多并不是完全去主推这个小册主要是去介绍 LongChain.js 里边有哪些功能我们可以使用 LongChain.js 能够完成哪些工作主要对前端来说还是一个福音我们不用额外去掌握其他的一些语言上的一些知识用纯粤 JS 也能完成咱常规的一些 IED 一些应用场景 OK 我们来看第二个

第二个看起来看名字呢是一个截图 to code 我一开始以为是一个啊是一个截图分享的工具实际上看起来并不是去翻译这部分介绍的时候说拖入一个截图然后把它转成一个 clean code 变成一个简单的代码干净的代码它这个代码呢称之为 html 加 terrain 加 react 加 web

也就是说我们看起来可以提供一张截图然后可以变成一个用 A 的方式变成一个转乘 code 在打开 GitHub star 呢 star 数惊人的 53.9K 然后 A 数和 PR3718 比较少

Contributor 21 人数比较少然后提交次数 588 看起来是一个非常年轻非常现代的一个项目次大数有惊人的 5513K 打开这个官网构建你的 UI 界面 10 倍更快就看起来是借助 AI 的能力感觉有点类似于咱之前体验过的 v0.js 之类的属于开源平 t

那看他官网上提供的一个图片使用案例呢就是他说我截了一个这个 YouTuber 一个视频网站一个截图然后就丢给他丢给他他呢就会多次迭代最终产生这个效果呢令人满意

看起来和我们传统的方案比如咱之前也在 AI 爆发早期呢也会有想到说提供一个截图或者提供一个 PSD 或提供一个结构化的一个设计稿把它转成咱前段熟悉的 HTML 或熟悉的 Vue React 其实有了 HTML 转 Vue React 就是工程化手段就是把一张图片把一个设计稿变成

HTML 工程里边原来有些探索方案在现在这个方案他明确提到了这个是他背后使用了 GPT4 的 Vision 也使用了 DirectE 看起来是一些 AI 工具的组合来能够包装成了一个对使用的提供的一个服务

对他提到说上传截图然后 GBT 会去把它转成 ATM 显然我们提到 GBT4 的 Vision 部分他能知道图片里面有什么东西我们想到使用类似于 AI 的方案我们去比对两张图片是否相似我们不相似再次迭代不相似再次迭代经过多次迭代显然就会规避咱提到说输入和输出看着相似细节完全不同

看起来这个工具是用来做他的看起来更像一个工具我看一下点他也是开源这截图还是 46K 点开这个官网就已经 53K 了果然能够解放广大群众的生产力是最容易爆火的东西是不知道好不好使但这个东西可能好使吧尤其以后你有那种蒙特卡洛数搜索你直接

用它生成的代码之后你可以再用一些搜索算法来优化它的生成结果说不定是个有用的办案东西 OK 这个是非常明确的一个工具和使用场景 OK 我们来到第三个 Draw a UI

我们打开 GitHub 然后在他介绍的时候也是说我们这个也是和刚才看起来有点相似提供一个 Mockup 提供一个设计稿提供一个演示的图就可以生成 ATML 你先看一下 GitHubGitHub 的 star 数是 13A 数和 PR 是 33 17 比较少然后贡献者是 4 个人

然后提交次数是 22 哦那是一个非常小非常现代非常新的一个项目那有 22 个提交得到了 13k 的 star 那看来也是能够解决一部分应用场景

打开官网也是比较简单我们快速先使用翻译工具把设计稿草图编成 HTML 这里也提供了一个视频方案在画板上画了一个圆圈看起来是个头像做了一些人名的一个介绍看起来是个中规中矩的个人介绍部分这是一个首页部分式的

画了一个草稿画了几个圈用来演示是头像有些按钮使用这个工具产生了 HTML 运行起来看着比较像和刚才相似他也提到了用了 GPT-4 的 V-ray 来去实现翻一下这部分

使用 GPT4 的 Vision,基于它这个 API 可以把这个工具,把低保证,也就是 Mockup 变成 HTML 看起来 GPT4 确实在除了解答我们日常中的拍照、图片里有什么还能解决我们简单的一些从图像变成 HTML 的部分

OK 那我们继续往下看来到了倒数第二个 web lmlm 是大圆模型加上一个 web 那看起来和我们的浏览器和我们 web 应用是有关系的

快速快一下这个基础数据也是一个 GitHub 开源项目,star 数是 11.6K 然后 A 数是 48,P21 比较少然后 ControlBit36 也是一个年轻项目 Commit 是 299 也是一个比较新的一个项目就拿斩获了 11.5K 的一个项目点开这个官网 weblm.mac.ai 先快速翻译一下

这个哈老师理解吗高性能浏览器内 LM 推理引擎看起来我们可以在浏览器里边去跑这个大语言模型了

嗯嗯嗯,感觉之前也会有类似的方案,就是比如使用,咱使用 web 方案,就比如把 C 或 C++之类的其他语言通过 web symboling 的方式来运行到浏览器里边,我们能想到之前提到的一些解决方案,看一下这个能有一个项目,那是不是他使用的时候也需要等待一会儿,把一个几十兆或更大体量的一个项目给包起来,

看不出来对应该不止几十兆他要要要但凡要考考一个 LM 的话那几个 G 对我觉得这个这个初始过程会更大这个看进设也有中文看设置部分有些 model 这个看起来不是很不是很熟悉感觉需要了解一下是不是可以使用好模型部分

模型的 type 有两个,一个是 web lm models 一个是高级的 res api 相关的,可能是掉了这个高级就很扯淡,高级就说 res api 高级就要 server 了,对,就要 server 了然后在这个模型部分有很多列表,哇,很长最莫认会勾选的是 lemon3 8b

8B 8B 就已经是一个生产但是我打开这个网站网站的时候是不是我需要托管的时候可能他已经是一个 serve 嗯挺神奇的如果真的要在浏览器里面跑的话你四个 G 的权重你怎么

怎么做那我感觉更像说我们比如我们需要跑一个栏目三的话呢可能使用接下来要介绍的那个方案那我或者说其中其他方案把这个模型下载下来需要用特定的这个使用 Docker 的方案也好使用准备一个 App 的方案来好来跑那使用他这个方式如果理解的正确的话那就是使用打开浏览器打开一个离线的网址或局域网的网站那就能去使用这个呃

大圆模型这些使用这些能力那我如果是接入 Lama 的话也是纯离线的方案我那可能就是使用一个 localstorage 或者一个局域网的一个 192 这样打开一个网站他就能离线的完成这个工具不用去下载不用安装了打开一个网址就能跑说不定是对看起来是这个东西那我和海老师都不是很熟悉感兴趣的朋友可以做一个解释

OK 那我们来到最后一个欧莱玛.js 欧莱玛.js 的 library 我们先点开看一下他老师熟悉理解这个东西吗我们先看一下数据那么我先看一下对我先看一下数据啊斯大的话 1.5k 然后 p2a 数 21 和 3 然后贡献者 15 提交次数 154 更多的是一个比较简单的项目比基础项目更多的是他背后是谁嗯

它背后就是欧拉玛

欧拉玛是现在大家应该用的比较多他更和其他竞品相比欧拉玛更简单我们下载一个 APP 然后向 Mac 上一拖就能用了点开之后然后我们去他也高度封装好了我去 run 一个去 downline 的一个比如喇嘛三比如个千万咱熟悉的开源项目就能把这个项目给跑起来我在我的 Macbookair 上就可以跑起来喇嘛三跑起来千万的 8 币

跑起来自然熟知的项目这个那么 JS 看起来是更像是一个包装层那我们不管你运行在那么在在哪运行那我使用 JS 的话就可以调这个原生能力

嗯对嗯那我喇嘛实际上就是背后帮你起有有点像导渴就帮你扎一些模型然后本地起个起个也不一定是虚拟机吧反正起个什么东西然后最后呢那个外外面给你暴露一个 htp 的 serva 的 endpoint 然后我喇嘛就去我喇嘛 js 其实就做了这样一个封装的东西就是帮你省掉了

帮你省掉起 server 和那个访问 endpoint 的这两个部分对看起来如果没有他的话我们使用 Olam 他看显然也会提供 res API 我们使用 talk 工具的话一般也会默认他能够兼容这个 openai 的这些协议

使用这个 LamaJS 的话在看这个 demo 的时候也很简单的一一用了 Olama 然后就可以去 chat,这显然也是一个包装过程提供一些 background 的那个 server 的 URL 端口啊或者一些那个 model 它在里面提到了 Lama2,感觉可以提个 PR 给它改成 Lama3

OK 这个是一个比较简单的包装了也是比较具象的我们使用 Lama 的话去跑项目的时候就可以使用它我们使用 JS 语言不用去接触一些它的底层概念使用 JS API 就能快速的实现一个 chat 的一个接口我们进一步的再去开发 chat 的一些 UI 更简单更多的是一个包装技术实现复杂度在这个 Olama 本身上

OK 啊我们讲了好久我们绕过了我们讲了大概得有不到 20 个 19 个

讲了 4 个大趴然后提到了不同的方案我们最早我们从 itpack 开始展开只是最有突破的部分然后我们再去以 effect ts 为例我们讲了一些眼前一亮的一些项目然后还有一些我们生产力相关的我们日常在用的棒然后

在提到 AI 的时候是用提到了 Long-Chain JS 以这四个呃产品或项目或开源项目为例我们展开提到了 2024 年的哎这个这个东西叫啥呀 Open Source 吗是对 Open Source 大奖 JS 开源大奖嗯是那个 Gate Nation 出的一个一个嗯一个大奖大奖吧嗯

这个哎这是确实是非常有趣也相和我们前段时间映照的那个啊 JS 升星最快也相当于从一个新的角度去看外服务去看世界服务去看大家在哪些项目是值得一看的值得在各自领域做了很多突出的贡献

我们很多项目不熟悉感兴趣的也可以做一个进一步的展开去了解我们刚才提到很多有趣的项目我接下来就迫不及待去看看这个呃这个称之为编写一次运行到多端的一个框架那是不是可以基于他来对我们来说编写一个 UI 库编写一个 UI 框架嗯

是说不定是一个很有趣的一个工具啊现在整体回顾起来还老师有什么感触吗这些这些项目哪些比较精彩哪些共性感觉明年会有哪些项目哪些趋势哎呀感觉大概有这个趋势还还挺挺多的你想第一个趋势大概就是那个多运行时嗯

就是有 Bang,有 Deno,有 Cloudflare,多运行是一个大题题。对,我认为 Bang 的出现一定程度上像一个鲶鱼,刺激了这些大家作为开发者或作为普通用户的一些想法。对,还有什么 WinterJS 这些可能都是。对,WebAssembly 是一个利好吧。

看起来我们一方面去谈就是分裂由于另一方面又是就会想到统一那我不断的有新的这个 run time 或 worker 平台出现也有更多的场景去运行我们的 JS 代码那无论他是那个 node 还是 bunk 还是其他的 worker 那就我们在一定程度上是就是特化或分裂了这个我们的拓展了我们的使用场景

刚才提到这些 AI 也是有这个相当于去分裂分化然后有对我们前端来说是利好那另一方面也是有些那个统一优念把像安普拉因一样像提到的这些 web 框架一样那你你大胆写你的语言你的语言能够最起码能跑在 node 和棒上是兼容的那我们提到这个呃

使用这个那个背后的提供的这个方案那我们一次编写那能够跑到不同的这个框架上也是有趣的刚才也提到了像 s pack 一样在有些挑战者那我们现有的工具不满足使用场景他像是 is pack 像下面的这个呃哎在哪呢

在这个翻译成中文这个办案一样那我们有了这些挑战者能够加速我们的让我们提开发体验更好那省去了一些省去了一些配置的过程省去了一些那个运行缓慢的一些工具那有了更好更速度更快体验更好对开发者更友好的工具

刚才甚至额外去提到说这个 node 文档也作为一项这个生产力工具把它这个 node 内置的这个 test 的工具也把它作为一个提名也把它加进来了也确实

感觉我刚刚才听下来说过了很多知识也意识到说不定是棒是一个很好的一个导火索或者一个器具可能本原本就很很多像 Dano 之类的话其他工具在推动我去说很多这个工具向下发展但办的出现的确刺激了很多人嗯这个使用第三方不如使用这个学习一堆这个第三方的最佳实践不如内置一个

内置的一个内置一个那我去用起来去接触起来更简单那长期的很多选项方案这个已经成为实时的标准哎有点在像 Apple 一样那很多优秀的产品我们把它作为一个系统内置嗯是这也是系统内置其实是最好嗯因为 node js 怎么说呢有一部分就是有一部分不太好的地方就是他内置的库实在太少嗯

是的,这也是感觉一项技术不断发展或一项标准不断发展也会必经的一个路线有好的标准,好的实践就不用额外的去学习内置它就原生的去实现去使用另一方面也能去刺激像 JAS,像这些框架找出更多的这个使用场景体现它的优势,体现它的竞争力

绕不开的也是 AI 还是 AIOK 咱花了好嗯花了很长时间逐一的去点开介绍了这些有趣的东西很多东西对我来说也是新玩意尤其是刚才提到几个有特性的东西啊接下来有有意思去点一点展开一下

也和海老师说我们之前去提到 JS 升星最快的外服好评如潮很多人说是从这一期开始来入坑和理解的确实我们讲一些深入的东西不如讲一些科普的我们没有听过很多人已经在用了他已经拿到几十 K 的 star 了但我完全没有听说过那就赶紧给我科普科普

这是一个非常好的有机会我们再做进一步的找一个新的东西我们去改说不定未来我们还可以去讲讲 state of js 对我们还可以有很多机会可以再看一下各种新奇的玩意儿也期待和海老师做进一步的交流这一次作为本期节目我们就讲的差不多我是刚才学到了很多有趣知识迫不及待点开几个链接看看他的官方文档的新宝头

好,我是还在继续尝试 rewriting Rust 的秀华海老师。