小程序多平台同构方案分析-kbone 与 remax

只要你感受就 · 发表于 2023-2-6 09:54:47

目前海内女伶 href="https://www.taojin168.com/cloud/" target="_blank">小法式仄台浩瀚，微疑小法式、付出宝小法式、头条小法式、和未来借会呈现的新小法式仄台，以是为了处置一套代码能够正在多个小法式仄台上运行，呈现了多种计划去处置，京东的 Taro、蚂蚁的 Remax、微疑的 Kbone，各有特性，主要回为二品种型，编译时取运行时适配二种。

此文介绍海内支流小法式的架构，和颠末运行时适配可到达一套小法式代码运行正在多个小法式仄台上的计划，主要介绍 kbone 取 remax 二套计划，他们道理根本不合，统统小法式代码皆正在 worker 线程上运行，终极正在 worker 线程天生一棵 dom tree，再把 dom tree 共步到 render 线程上颠末 w/axml中止衬着。
小法式架构

小法式素质上是运行正在 webview 上的一个 H5 使用，代码颠末挨包后别离运行正在 render 线程取 worker 线程，这样干最年夜的启事是包管仄台宁静性，不克不及闪开收者掌握 render 线程，掌握 render 线程将会构成小法式仄台圆管控艰难，好比颠末 js dom api 操纵 dom 元艳，颠末 location.href 随便跳转，这全部小法式便完整不成控，能够沉意绕太小法式考核，上线时是个一般小法式，开辟者能够随便掌握界里上展示的实质或者随便跳转到打赌或者黄色页里。小法式仄台便把 view 取逻辑别离，view 搁正在 render 线程，供给了一种特别的语言（微疑嚷 wxml 、付出宝嚷 axml）去写 view，而且不克不及写进 js 代码，逻辑便搁正在 worker 线程，因为 worker 其实不能操纵 dom，以是便处置了上面管控艰难的成就，架构以下：

小法式多仄台共构计划阐发-kbone 取 remax-1.jpg

每一个小法式界里有 axml 取 js 文献，js 文献是页里逻辑，逻辑主要干二件工作：

照应 render 线程的工作，并施行小法式营业逻辑。
准备佳数据，颠末 setData 传到 page 中，由 page中止衬着。

以上是海内微疑、付出宝、头条小法式的架构，可是今朝开辟者假设要把一个小法式撑持三个仄台战 web 仄台，便需要开辟屡次，今朝呈现了多种共构仄台。有编译时取运行时静态变换二种。
编译时 Taro 干的很胜利，Taro 可让开辟者用 React 写小法式，终极颠末编译变换到差别仄台的小法式。
来日诰日道的是另一种计划，没有靠编译时去完毕，而是正在运行时干适配，别离是微疑供给的 kbone 取付出宝供给的 remax 二个计划。
二个计划比照：

差异面
- 皆是正在 worker 线程保护一棵 vdom tree，而后共步到 render 线程颠末 w|axml 去截至衬着。
差别面
- kbone 是适配了 js dom api ，基层能够用所有框架，如 react、vue、本死 js 去写小法式。remax 是自已经写了一套 react 的 renderer，基层只撑持 react。
- remax 正在 dom tree发作变革时，没有是把整棵 vdom tree 传到 render 线程，而是计较差别，把差别传到 render 线程，那面能够放慢了二个线程之间的数据传输速率。

kbone

kbone 正在 worker 线程适配了一套 js dom api，基层不论是哪一种前端框架(react、vue)或者本死 js 终极皆需要挪用 js dom api 操纵 dom，适配的 js dom api 则接收了统统的 dom 操纵，并正在内乱存中保护了一棵 dom tree，统统基层终极挪用的 dom 操纵城市革新到那棵 dom tree 中，屡屡操纵(有撙节)后会把 dom tree 共步到 render 线程中，颠末 wxml 自界说组件截至 render。
过程以下：

小法式多仄台共构计划阐发-kbone 取 remax-2.jpg

因而统统小法式的代码皆是搁正在 worker 上跑，开辟者能够颠末差别的前端框架(react、vue、angular) 或者本死 js 去建立小法式了。
worker 线程

worker 线程会运行统统的小法式代码，并适配了 js dom api 战界说一套数据构造去描绘一棵 dom tree。
模仿 js dom api 即是把 api 函数从头完毕一次，那些函数用去操纵自己正在内乱存中保护的 dom tree，比方以下 api办法：

document.createElement
document.createTextNode
…

正在 worker 线程中自己是不 document 工具的，只要供把自己模仿的 document 工具寄存到全部变质中，这基层的前端框架或者本死 js 代码就可以挪用到了。颠末 document创立的每一个节面有四个主要的属性：

type:以后节面范例
parentNode：女节面工具
childNodes: 儿童节面工具数组

当 worker 线程创立佳了 dom tree 后，正在内乱存中的大要少上面如许：

{
&#34;innerChildNodes&#34;: [],
&#34;childNodes&#34;: [{
&#34;nodeId&#34;: &#34;b-1573463704434&#34;,
&#34;pageId&#34;: &#34;p-1573463704431-/pages/index/index&#34;,
&#34;type&#34;: &#34;element&#34;,
&#34;tagName&#34;: &#34;div&#34;,
&#34;id&#34;: &#34;app&#34;,
&#34;class&#34;: &#34;h5-div node-b-1573463704434 &#34;,
&#34;childNodes&#34;: [{
&#34;nodeId&#34;: &#34;b-1573463704435&#34;,
&#34;pageId&#34;: &#34;p-1573463704431-/pages/index/index&#34;,
&#34;type&#34;: &#34;element&#34;,
&#34;tagName&#34;: &#34;div&#34;,
&#34;id&#34;: &#34;&#34;,
&#34;class&#34;: &#34;h5-div node-b-1573463704435 &#34;,
&#34;childNodes&#34;: [{
&#34;nodeId&#34;: &#34;b-1573463704436&#34;,
&#34;pageId&#34;: &#34;p-1573463704431-/pages/index/index&#34;,
&#34;type&#34;: &#34;element&#34;,
&#34;tagName&#34;: &#34;button&#34;,
&#34;id&#34;: &#34;&#34;,
&#34;class&#34;: &#34;h5-button node-b-1573463704436 &#34;,
}, {
&#34;nodeId&#34;: &#34;b-1573463704438&#34;,
&#34;pageId&#34;: &#34;p-1573463704431-/pages/index/index&#34;,
&#34;type&#34;: &#34;element&#34;,
&#34;tagName&#34;: &#34;span&#34;,
&#34;id&#34;: &#34;&#34;,
&#34;class&#34;: &#34;h5-span node-b-1573463704438 &#34;,
} ]
}]
}]
}

复造代码

那是一棵多叉树，每一个节面界说了目前节面的属性战儿童节面。交下来即是把那棵树传到 render 线程，并由 render 线程把他显现进去。那里传到 render 线程接纳的是小法式供给的办法 setData，把那棵 dom tree 当做数据传到 render 界里。

render 线程

<view>
<picker></picker>
<button>面尔</button>
<Element>
<button></button>
<button></button>
</Element>
</view>

复造代码

上面代码是 wxml 语法写的一个小法式界里，worker 线程中的内乱存 dom tree 能够战 wxml 里的节面一一对于应，只要供把 dom tree 颠末递回迭代映照到 wxml 的节面。
kbone 界说了一个 [Element 自界说组件]，用于衬着 dom tree 上的每一个节面战他的儿童节面。
Element 节面干的工作比力简朴，起首是把自己衬着进去，而后再把子节面衬着进去，共时子节面的子节面又颠末 Element 去衬着，如许便颠末自界说组件完毕了递回功用，那是 wxml 自界说组件供给的自引用特征，每一个节面颠末 dom 节面的 type 去辨别，进而把一棵内乱存 dom tree 颠末 wxml 衬着进去了。
Element 代码以下(简单)：

<cover-view wx:elif=&#34;{{wxCompName === &#39;cover-view&#39;}}&#34; id=&#34;{{id}}&#34; class=&#34;{{class}}&#34; style=&#34;{{style}}&#34; hidden=&#34;{{hidden}}&#34; scroll-top=&#34;{{scrollTop}}&#34;>
<template is=&#34;subtree-cover&#34; data=&#34;{{childNodes: innerChildNodes}}&#34; />
</cover-view><scroll-view wx:elif=&#34;{{wxCompName === &#39;scroll-view&#39;}}&#34; id=&#34;{{id}}&#34; class=&#34;{{class}}&#34; style=&#34;{{style}}&#34; hidden=&#34;{{hidden}}&#34; scroll-x=&#34;{{scrollX}}&#34; scroll-y=&#34;{{scrollY}}&#34; upper-threshold=&#34;{{upperThreshold}}&#34; lower-threshold=&#34;{{lowerThreshold}}&#34; scroll-top=&#34;{{scrollTop}}&#34; scroll-left=&#34;{{scrollLeft}}&#34; scroll-into-view=&#34;{{scrollIntoView}}&#34; scroll-with-animation=&#34;{{scrollWithAnimation}}&#34; enable-back-to-top=&#34;{{enableBackToTop}}&#34; enable-flex=&#34;{{enableFlex}}&#34; bindscrolltoupper=&#34;onScrollViewScrolltoupper&#34; bindscrolltolower=&#34;onScrollViewScrolltolower&#34; bindscroll=&#34;onScrollViewScroll&#34;>
<template is=&#34;subtree&#34; data=&#34;{{childNodes: innerChildNodes, inCover}}&#34; />
</scroll-view>
<live-player wx:elif=&#34;{{wxCompName === &#39;live-player&#39;}}&#34; id=&#34;{{id}}&#34; class=&#34;{{class}}&#34; style=&#34;{{style}}&#34; hidden=&#34;{{hidden}}&#34; src=&#34;{{src}}&#34; mode=&#34;{{mode}}&#34; autoplay=&#34;{{autoplay}}&#34; muted=&#34;{{muted}}&#34; orientation=&#34;{{orientation}}&#34; object-fit=&#34;{{objectFit}}&#34; background-mute=&#34;{{backgroundMute}}&#34; min-cache=&#34;{{minCache}}&#34; max-cache=&#34;{{maxCache}}&#34; sound-mode=&#34;{{soundMode}}&#34; auto-pause-if-navigate=&#34;{{autoPauseIfNavigate}}&#34; auto-pause-if-open-native=&#34;{{autoPauseIfOpenNative}}&#34; bindstatechange=&#34;onLivePlayerStateChange&#34; bindfullscreenchange=&#34;onLivePlayerFullScreenChange&#34; bindnetstatus=&#34;onLivePlayerNetStatus&#34;>
<template is=&#34;subtree-cover&#34; data=&#34;{{childNodes: innerChildNodes}}&#34; />
</live-player>
<block wx:for=&#34;{{childNodes}}&#34; wx:key=&#34;nodeId&#34; wx:for-item=&#34;item1&#34;>
<block wx:if=&#34;{{item1.type === &#39;text&#39;}}&#34;>{{item1.content}}</block>
<image wx:elif=&#34;{{item1.isImage}}&#34; data-private-node-id=&#34;{{item1.nodeId}}&#34; data-private-page-id=&#34;{{item1.pageId}}&#34; id=&#34;{{item1.id}}&#34; class=&#34;{{item1.class || &#39;&#39;}}&#34; style=&#34;{{item1.style || &#39;&#39;}}&#34; src=&#34;{{item1.src}}&#34; rendering-mode=&#34;{{item1.mode ? &#39;backgroundImage&#39; : &#39;img&#39;}}&#34; mode=&#34;{{item1.mode}}&#34; lazy-load=&#34;{{item1.lazyLoad}}&#34; show-menu-by-longpress=&#34;{{item1.showMenuByLongpress}}&#34; bindtouchstart=&#34;onTouchStart&#34; bindtouchmove=&#34;onTouchMove&#34; bindtouchend=&#34;onTouchEnd&#34; bindtouchcancel=&#34;onTouchCancel&#34; bindtap=&#34;onTap&#34; bindload=&#34;onImgLoad&#34; binderror=&#34;onImgError&#34;></image>
<view wx:elif=&#34;{{item1.isLeaf || item1.isSimple}}&#34; data-private-node-id=&#34;{{item1.nodeId}}&#34; data-private-page-id=&#34;{{item1.pageId}}&#34; id=&#34;{{item1.id}}&#34; class=&#34;{{item1.class || &#39;&#39;}}&#34; style=&#34;{{item1.style || &#39;&#39;}}&#34; bindtouchstart=&#34;onTouchStart&#34; bindtouchmove=&#34;onTouchMove&#34; bindtouchend=&#34;onTouchEnd&#34; bindtouchcancel=&#34;onTouchCancel&#34; bindtap=&#34;onTap&#34;>
{{item1.content}}
<block wx:for=&#34;{{item1.childNodes}}&#34; wx:key=&#34;nodeId&#34; wx:for-item=&#34;item2&#34;>
<block wx:if=&#34;{{item2.type === &#39;text&#39;}}&#34;>{{item2.content}}</block>
<image wx:elif=&#34;{{item2.isImage}}&#34; data-private-node-id=&#34;{{item2.nodeId}}&#34; data-private-page-id=&#34;{{item2.pageId}}&#34; id=&#34;{{item2.id}}&#34; class=&#34;{{item2.class || &#39;&#39;}}&#34; style=&#34;{{item2.style || &#39;&#39;}}&#34; src=&#34;{{item2.src}}&#34; rendering-mode=&#34;{{item2.mode ? &#39;backgroundImage&#39; : &#39;img&#39;}}&#34; mode=&#34;{{item2.mode}}&#34; lazy-load=&#34;{{item2.lazyLoad}}&#34; show-menu-by-longpress=&#34;{{item2.showMenuByLongpress}}&#34; bindtouchstart=&#34;onTouchStart&#34; bindtouchmove=&#34;onTouchMove&#34; bindtouchend=&#34;onTouchEnd&#34; bindtouchcancel=&#34;onTouchCancel&#34; bindtap=&#34;onTap&#34; bindload=&#34;onImgLoad&#34; binderror=&#34;onImgError&#34;></image>
<view wx:elif=&#34;{{item2.isLeaf || item2.isSimple}}&#34; data-private-node-id=&#34;{{item2.nodeId}}&#34; data-private-page-id=&#34;{{item2.pageId}}&#34; id=&#34;{{item2.id}}&#34; class=&#34;{{item2.class || &#39;&#39;}}&#34; style=&#34;{{item2.style || &#39;&#39;}}&#34; bindtouchstart=&#34;onTouchStart&#34; bindtouchmove=&#34;onTouchMove&#34; bindtouchend=&#34;onTouchEnd&#34; bindtouchcancel=&#34;onTouchCancel&#34; bindtap=&#34;onTap&#34;>
{{item2.content}}
</view>
<element wx:elif=&#34;{{item2.type === &#39;element&#39;}}&#34; in-cover=&#34;{{inCover}}&#34; data-private-node-id=&#34;{{item2.nodeId}}&#34; data-private-page-id=&#34;{{item2.pageId}}&#34; id=&#34;{{item2.id}}&#34; class=&#34;{{item2.class || &#39;&#39;}}&#34; style=&#34;{{item2.style || &#39;&#39;}}&#34; bindtouchstart=&#34;onTouchStart&#34; bindtouchmove=&#34;onTouchMove&#34; bindtouchend=&#34;onTouchEnd&#34; bindtouchcancel=&#34;onTouchCancel&#34; bindtap=&#34;onTap&#34; generic:custom-component=&#34;custom-component&#34;></element>
</block>
</view>
<element wx:elif=&#34;{{item1.type === &#39;element&#39;}}&#34; in-cover=&#34;{{inCover}}&#34; data-private-node-id=&#34;{{item1.nodeId}}&#34; data-private-page-id=&#34;{{item1.pageId}}&#34; id=&#34;{{item1.id}}&#34; class=&#34;{{item1.class || &#39;&#39;}}&#34; style=&#34;{{item1.style || &#39;&#39;}}&#34; bindtouchstart=&#34;onTouchStart&#34; bindtouchmove=&#34;onTouchMove&#34; bindtouchend=&#34;onTouchEnd&#34; bindtouchcancel=&#34;onTouchCancel&#34; bindtap=&#34;onTap&#34; generic:custom-component=&#34;custom-component&#34;></element>
</block>

复造代码

remax

remax 是颠末 react 去写小法式，全部小法式是运行正在 worker 线程，remax 完毕了一套自界说的 renderer，道理是正在 worker 线程保护了一套 vdom tree，那个 vdom tree 会颠末小法式供给的 setData办法传到 render 线程，render 线程则把 vdom tree 递回的遍历进去。
以是部分完毕战 kbone类似，皆是正在 worker 线程保护一棵 dom tree，再把那棵 dom tree 传到 render 线程截至衬着，唯一的区分是 remax dom tree发作变革时，管帐算差别，而没有需要把整棵树皆传到 render 线程，此功用是 react 供给的，即是正在 diff 完后找出差别，则把差别传到 render 线程，比方：

小法式多仄台共构计划阐发-kbone 取 remax-3.jpg

差别里面记载佳了是哪一个节面要截至简略或者增加，此中 path 变质标记是树上的哪一个节面，如 root.children.0.children.1，他代表的意义即是顶节面下第 0 个儿童节面下的第 1 个儿童节面。
render 线程会记载一棵 vdom tree 正在内乱存中，屡屡 worker 线程传过去的 patch 会标记要操纵树上的哪些节面，把那些节面 patch 到 render 线程的 vdom tree 上后，再革新到界里上。
归纳

小法式共构计划呈现过许多，把 vue 或者 react交流失落现有的女伶 href="https://www.taojin168.com" target="_blank">小法式开辟方法实是很没有错，开辟者能够拿自己熟谙的开辟框架去开辟小法式，共时 vue 取 react 的社区死态这样老练，如组件库、形状办理框架等均可以间接拿去使用，放慢了小法式的开辟速率。
kbone 取 remax 二套计划，觉得 kbone开展远景没有错，他可让您颠末 vue 取 react 等统统框架去开辟小法式。可是里面必然另有许多坑要处置，一个老练的框架借需要相干配套皆老练，今朝 kbone 取 remax 那二块干的借不敷，期望前期他们能够放慢开辟速率，完美相干配套。