Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

最近前端圈悄悄上了个热搜React前核心成员DominicGannaway带着新框架Ripple杀回来了。

这哥们儿可不是新人,当年ReactHooks的设计他深度参与,后来又搞出富文本编辑器框架Lexical,目前跳出大厂自己折腾,一出手就说要“重新定义前端开发体验”。

前端框架这些年卷得厉害,从jQuery到Angular,再到React、Vue、Svelte,隔两年就冒个新家伙。

开发者刚学会用hooks,又得琢磨compositionAPI,刚搞懂虚拟DOM,编译时优化又成了新潮流,有时候我都替同行累得慌学框架的速度,快赶上追番了。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

Dominic应该也是瞅着这乱象才动手的,他在采访里说过,当年在Meta做React,总觉得虚拟DOM像给自行车装了个汽车发动机动力是足,但日常通勤有点费劲。

后来去Svelte5团队待了阵子,又发现编译时框架虽然轻量,可开发者写代码时总像隔着层纱,少了点“直接动手”的爽感。

一个框架设计者的十年迭代

Dominic的技术轨迹,简直就是前端框架进化的缩影,2015年他刚加入React团队时,前端还在为“怎么高效更新DOM”头疼。

那时候虚拟DOM是真·黑科技框架自己搞个DOM的“影子副本”,改东西时先在副本上试,试好了再统一更新到页面,比直接操作DOM快多了。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

但干久了他发现不对劲,虚拟DOM这东西,写复杂应用时容易“想太多”。

列如你就改个按钮文字,它非要把整个组件的影子DOM重新比对一遍,跟查户口似的仔细。

Dominic在2020年开发Lexical时就吐槽,“我们花了太多时间优化虚拟DOM的性能,却忘了开发者写代码时有多别扭。

后来他跑去Svelte5当核心成员,才算摸到了编译时优化的门道,Svelte不搞虚拟DOM,直接在编译阶段把代码转成原生JS,运行时轻得像羽毛。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

可问题又来了Svelte的响应式写法太“魔法”,变量前加个$就自动响应,开发者有时候都搞不清哪段代码在起作用。

Ripple算是他十年经验的“缝合怪”,但缝得挺巧。

他自己说,“我想做个框架,让开发者写代码时像直接跟DOM对话,不用记那些奇奇怪怪的规则,”这话听着简单,做起来可不容易。

没有虚拟DOM,Ripple凭什么让开发者“减负”?

Ripple最让人眼前一亮的,就是它把“抽象层”砍得干干净净,传统框架里,开发者写的JSX得经过虚拟DOM、diff算法这些中间步骤才能变成页面,就像寄快递要经过好几个中转站。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

Ripple不一样,它的编译器直接把代码翻译成原生DOM操作,相当于快递从sender直接送到receiver手上。

就拿写个按钮来说,React里你得用setState或者useState,Svelte要加个$:,Ripple里直接写letcount=0;然后按钮点击时count++,页面就自动更新了。

没有钩子函数,没有魔法符号,跟写原生JS差不多,这种“所见即所得”的感觉,对新手太友善了。

它的响应式系统设计得也挺鸡贼,Dominic搞了个叫track的原语,变量变化时自动通知依赖它的DOM元素。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

打个比方,传统框架是老师点名,“谁用了count变量?站起来!”Ripple是装了个摄像头,count一变,所有盯着它的同学自动举手。

这种细粒度的追踪,比虚拟DOM的批量比对效率高不少,组件写法也有意思。

Ripple的组件就是个普通函数,里面直接写DOM语句,if循环啥的随意插,列如写个TodoList,你可以直接写for(consttodooftodos){<li>{todo}</li>},不用记map函数或者{#each}这种框架特定语法。

Dominic说这叫“让JSX回归本质”,我觉得更像是“把框架的规则手册撕了”,编译器在背后帮了不少忙。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

你写代码时,它会偷偷检查类型错误,甚至给你提提议。

列如你忘了给按钮加点击事件,它可能会在控制台说,“哥们,这按钮按了没反应,是不是漏了onClick?”这种AI辅助调试功能,目前还在试验阶段,但已经有点未来感了。

Ripple刚开源时,不少人质疑,没虚拟DOM,性能真能打得过React?社区里有人做了个Counterbenchmark,同样每秒更新1000次,Ripple的CPU占用比React低了近一半。

当然,这只是个简单测试,复杂应用还得看实际表现,但至少证明,Dominic的思路不是瞎折腾。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

不过生态问题是个坎,React有Next.js,Vue有Nuxt,Ripple目前连个路由库都得自己写。

Dominic在GitHub上号召大家贡献插件,可框架生态起来得三五年,企业级应用谁敢轻易试水?毕竟没人愿意当小白鼠。

对前端圈来说,Ripple更像个“搅局者”,它证明了前端框架不必定非要堆功能,做减法反而可能是出路。

这些年大家都在比谁的API更强劲,谁的性能优化更极致,Dominic却在问,“我们能不能让开发者少记点东西?”这种反思,比框架本身更有价值。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

目前Ripple还在早期阶段,Dominic每天在Discord群里跟开发者聊天,收集反馈。

他说,“我不想做个完美的框架,只想做个让开发者写代码时能哼歌的框架,”这话听着挺矫情,但干前端的谁没受过框架的气?要是真能少掉几根头发,谁不想试试呢?

前端这行当,从来都是长江后浪推前浪,React当年干掉Angular,Svelte靠编译时异军突起,目前Ripple带着“无抽象”的理念来了。

不管最后能不能成主流,至少它让我们重新思考,框架到底是开发者的工具,还是枷锁?Dominic用Ripple给出了他的答案工具就该像水一样,无形无状,却能滋养万物。

Svelte团队成员开源新框架Ripple,又一个想“改写前端”的框架?

至于要不要学Ripple?如果你是个爱折腾的开发者,试试无妨,反正它的API简单,半天就能上手。

要是公司项目选型,那还是等等看。

但不管怎样,关注一下总没错毕竟这可是React前核心成员憋了三年的大招,万一成了下一个React呢?

© 版权声明

相关文章

暂无评论

none
暂无评论...