fard:首个开源小程序引擎

时间:2020-10-25 作者:admin

窝窝窝!终于发了!历经坎坷千呼万唤始出来呜呜呜……

fard 其实之前是我提出的一种多端小程序跨端的思路,后来 remax,goji,kbone,taro next 都使用了相同的思路,就这样烂大街了,哈哈哈

在我取名废的时候,又想起来了,因为真的很合适,fard 是主命的意思,就是主人的命令,正好对应小程序引擎里面的 master 和 cmd

不要想多!没有种族歧视!单纯的sm!单纯的色琴!单纯的有爱!

下面详细介绍一下——

基本原理

基本原理实际上很简单,就是在 worker 中跑 fre 和业务逻辑,从而彻底隔离了 dom 环境
画了个图:

如图所示,我们的所有的业务逻辑都在 master 层,也就是 worker 层,然后这一层会使用 Proxy 劫持 document 对象,将所有的 dom 操作都转化为一条条 cmd,然后发送给 slave 层即可,slave 要对 master 绝对服从

以上,小程序引擎基本都是一样的思路,只是大家打不同的组合牌,我凭借我的经验和权衡,给出了一副牌

使用 worker 作为沙箱

大家肯定要问,为什么不使用 v8 而是使用 worker 呢?

这里我需要解释一下,worker 也是 v8,它们的本质是一样的,但是 worker 的维护量更小,而且关键是:ios 端根本没有 v8!

worker 是最好的选择,维护量瞬间降低,worker 有多种,因为我需要使用 nobundle 的打包思路,所以暂时使用 web worker

等 service worker 正式支持 module,我们还可以切换到 sw,这样就可以瞬间拥有推送,离线,添加到桌面的功能了……

w3c.github.io/ServiceWork…

标准已经更新,但啥时候正式支持,可能就是猴年马月了::>_<::

基于 Proxy 的线程通信方案

zhuanlan.zhihu.com/p/198989762

我之前写的文章,建议看看

前面提到,类似于 taro next,kbone 等框架,跨端主要是借助模拟 dom,这样下来上千行代码,而我使用 Proxy 去劫持 dom 操作只需要 200 多行代码

不是一个级别的抽象层次,也不是一个级别的维护量

另外,使用 Proxy 劫持,本身还是一种收集行为,我可以先收集,然后分批次发给 slave 层

跑 fre 框架

我之前写过一篇文章,说小程序除了线程通信是瓶颈,runtime 也尤为珍贵

所以我不建议使用 react、vue 这种 runtime 很重的框架,甚至 fre 一开始我也不想用

Proxy 劫持说实话有一些坑,比如它只能劫持点操作符

dom['nodeValue'] = 'hello world'

像这样的直接赋值的行为它劫持不到,我们得在 slave 层对它进行改造

Text.setAttribut = function(name, value){
  if(this[name]) this[name] = value
}

nobundle server

类似 snowpack,vite 的思路,我第一次尝试将 type module 用于 worker

<script type="module">
  import {connect} from './fard.js'
  const worker = new Worker('./worker.js', { type:'module' })
  connect(worker)
</script>

优点是多快好省,缺点是 worker 对 module 的支持不全

很是绝望,是谁发明的 importScripts 啊,太坑了吧!

但是介于我们现在也是原型阶段,所以值得等,说不定等我们用于生产那天,大家就都愉快支持了呢~

electron ide

目前主流的方案都是自己打包 devtool-frontend 项目,说实话我也尝试过,但是这个项目的构建流程非常脱俗,不利于维护

所以换一个方向,我们使用 electron 自带的 devtool,然后使用 BrowserView 调用,然后使用它自带的远程调试就好了

有啥功能就通过 extension 的方式拓展即可

在这里要感谢大佬 @匠心 ,文章在这里

zhaomenghuan.js.org/blog/chrome…

总结

以上,就是我打的组合牌了……可以看到,每一个环节和别人都不太一样,这就是一个典型的工程化项目,特别适合在公司做 kpi

但是我还是想说一下,小程序这组架构,是具有普适性的,除了小程序本身,还有很多地方可以用到

比如 vscode 插件系统,比如钉钉,飞书这种平台,特别适合搞一套这样的架构

文章中没有上其他大厂的架构图,因为这玩意本身是一个偏业务型项目,没有复杂难以理解的算法,我希望和 fard 能够和 berial 一样通俗易懂

呼~望天,写了好多……

fard 是我打的第二个组合牌了,上一个是微前端,berial……这种牌打起来手痒,但精力实在有限,接下来我专注搞 fre2

最后放一下 github 地址,感兴趣的可以给个 star,更欢迎 pr!

github.com/yisar/fard

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。