yisar / smallapp

🎃 Chinese miniapp architecture.

smallapp

smallapp is a Chinese miniapp architecture implementation.

As of now, there are over 7 million miniapps in China, Chinese people do not like to use browsers or search engines.

Musk envied WeChat and he really wanted this miniapp architecture, so I opened it up.

Docs

smallapp follows WeChat's miniapp standard, you should refer to WeChat's documentation.

WeChat miniapp docs

Syntax

<view>
    <text>{{count}}</text>
    <button bindtap="add">+</button>
</view>

Page({
    data: {
        count: 0
    },
    add: () {
        this.setData({
            count: this.data.count + 1
        })

        wx.showToast({ 
            title: 'count is added!' 
        })
    }
})

Demos

https://v.douyin.com/Ug9bwvq/

Principle

1. compiler

smallapp build -e app.json -o /dist

This step will package the miniapp project into js files, which is double threaded. The jsx file is used for rendering threads, and the js file is used for logical threads.

2. worker

The logical thread is responsible for running JavaScript logic, and you need to find a JavaScript runtime, such as worker.

• Web worker
• Cloudflare worker
• quickjs/v8/hermes

As long as it has the standard API and communication mechanism of the worker, it can serve as the logical layer of the miniapp.

3. Native container

Miniapps runs on a super app, such as Wechat/Alipay/Baidu and its API is provided by the native container.

smallapp's Issues

新思路：基于 web worker 的双线程前端框架

这里介绍一下 voe 的新思路

js 是单线程的，大量的计算会阻断 UI，为了解决这个痛点，react 发明了时间切片，而我在 fre 中更是将异步渲染作为默认渲染模式，但是时间切片本质上是利用了宏任务队列，搞了个假的多线程

但是浏览器是自带另一个线程的，即 web worker，它特别适合做一些计算工作，而在前端框架中，diff 的遍历恰好是纯 js 计算

我们的主要思路是，在 web worker 中进行 vdom diff，然后将 diff 结果（一个非常小的对象）发送给主线程，主线程拿到它，先操作 dom，然后将事件（一个简化后的事件对象）交还给 worker

很难说它是否可以提升性能，事实上，我从来不在意性能

但是它却有另一个场景：小程序

小程序的核心需求是，屏蔽 web 能力，就是绝对严格的让你只能通过数据驱动 UI

微信小程序等应该是在 native 端造了一个沙箱，用来隔绝浏览器 dom 环境

但是其实 web worker 更适合做这件事，它恰好是没有 dom 的，更纯粹

我们用主奴关系形容这种绝对掌控与绝对服从， web worker 为 master，UI 主线程为 slave

所以现在来说，我们核心工作变成了：

1. master 层，写一个纯计算的，结果足够小的，vdom diff 算法
2. slave 层，写一个足够简单的事件系统

与此同时，关于 API，可能大概我会刻意倾向 vue3，因为大家比较熟悉，我也顺便学习一下源码

demo跑不通

demo示例跑不通，点击按钮，直接报错，原因是我们的textnode的nodeValue是number类型
即以下代码判断出错

isNum(op[1])
      ? getElement(op[0]).removeChild(op[1])
      : (getElement(op[0]).nodeValue = op[1])

跑了getElement(op[0]).removeChild(op[1])

fard有在小程序中使用吗

求教，咱们这个fard小程序引擎有投入使用么，还只是说为了搞一套新的小程序引擎为学习使用呢？

还会继续开发吗？

我想基于此套方案解决React Native中运行小程序的需求

code issue

voe/src/master.ts line 73

function effect(fn) {
  const effect = function effect(...args) {
    return run(effect, fn, args)
  }
  return effect
}

这里如果是由eslint验证的话，会报错shadowName not allowed...

改为如下是不是更好呢

function effect(fn) {
  const scopedEffect = function(...args) {
    return run(effect, fn, args)
  }
  return scopedEffect
}

andriod代码没有提交全吧

andriod代码没有提交全吧 光写了支持

就提个问😄

小兄弟为什么工作时间还可以推个人项目，不用工作吗 😄

如何启动container？如何启动整体，可否有个简略的教程啊？

code issue

voe/src/h.ts line 25

if (vnode == null || vnode === true || vnode === false) {

第一部分那里是不是少了个 = ？

Composition API

createApp({
    template: '',
    setup: () = >{
        const state = reactive({
            count: 0,
            double: computed(() = >state.count * 2)
        })

        function increment() {
            state.count++
        }

        return {
            state,
            increment
        }
    }
})

重启√

找到了一个新思路：https://zhuanlan.zhihu.com/p/176042099

我决定开始重写这个项目，主要的改变如下：

1. web worker => service worker

sw 的好处是 pwa，借助 sw 的能力，想一想，将小程序放置到桌面是一件多么刺激的事，sw 的通信方式和 ww 是一模一样的，还可以做缓存相关的工作

2. 重写 vue 框架

voe 一开始是抄的 vue3，但我觉得方向不太对，vue3 的 runtime 实在没什么东西，它比较有意思的地方在于 compiler 和 SFC

我觉得我可以给一个很小的对等实现

3. proxy

上面说的新思路，也就是 proxy 劫持的跨端思路，proxy 能让 worker 做更多事情，当然框架 runtime 也会用 proxy 做依赖收集

总觉得这一次可以集合很多 proxy 的*操作了

4. shadow dom

不要问我沙雕哪里好，我也不知道，爱一个人是不需要理由的

emmm

emmm

demo貌似跑不通

$ cd runtime
$ yarn start
$ cd ../ide
$ run start

没有runtime目录，另外在ide目录下执行yarn start，打开的electron白屏了

feat:支持wxs语法

现在好像还不支持wxs语法，打算支持嘛

不懂就问

这个可以给自己的app提供小程序容器吗？也就是让自己的app像微信那样可以打开app自己的小程序？

关于master中done方法的一些疑问

/web_modules/fard.master.js中
done方法中的if (!resolve) throw new Error('invalid get id') 是一定会抛出错误的呀，好像这个部分并没有起到什么作用~