(TODO)跨平台UI组件的实现方案

Flutter

https://www.zhihu.com/question/360437733/answer/2560633661

https://www.zhihu.com/pub/reader/120156292

风险：

https://www.zhihu.com/question/485985051/answer/2411741267

Flutter的可视化库：

https://zhuanlan.zhihu.com/p/247778062?utm_source=zhihu&utm_medium=social&utm_oi=796708517322055680

Flutter的UI组件库：

https://www.getwidget.dev/

两条路：

1、用一个跨平台的库来做，比如flutter，根据不同平台打包不同产物

2、以webview嵌入各个应用的方式(flutter也会有这个问题吧？)

用flutter是不是也不行？我们只是组件，不是整个页面，得其他人也用Flutter作为页面开发才行吧？

关于css的学习：参考着交叉学习，和flutter一起

Rust

https://www.zhihu.com/question/518079472/answer/2398647166

公司：1Password1Password 现在也加入了 Rust 基金会。其产品大约 63% 的 1Password 核心代码（加密和同步数据）使用了 Rust 。用 Rust 开发的跨平台组件来支持多个平台，包括移动端和浏览器（将 Rust 编译为 WebAssembly）。但 1Password 把这种方式叫「混合（hybrid）应用程序开发」。

1Password 也开源了一些跨平台库。比如， sys-locale，轻量级获取位置的跨平台库，支持 iOS/ Android/ MacOS/ Linux/ Windows/ WebAssembly 。还有一个早期开源的 TypeShare库，用于把一些用Rust写的类型生成为其他语言的对应类戏，目前已经不再维护，但是其公司内部还在使用。

看看这个轻量级的库，搞成wasm有多大：

https://github.com/1Password/sys-locale

如何做跨平台：

不能影响用户体验。App应该做到性能足够好、耗电尽量少。与原生平台交互应该非常方便不应只是单独的一些组件，而是对整体代码做过权衡之后的核心代码（非 UI 代码可以跨平台，UI 代码使用本地语言-那玩个蛋~~~）。

想想也是，音视频ffmpeg也是非UI部分用的wasm

Rust或者wasm的应用场景：

1、计算

2、鉴权(比如飞书)

3、通信？？？

4、逻辑(游戏AI，比如Piccolo公司)

总之就是不适合写UI？？

AppFlowy 公司的架构：Rust(数据组件) + Flutter(UI组件)

img

似乎主流的思路，都是主要开发app端，然后通过WebAssembly给web用？

https://bevyengine.org/

这个纯Rust的游戏引擎，和Unity同样的思路，wasm给web用

ToC的不适合，画个button就要加载4M的wasm文件

Rust的可视化UI库：

https://github.com/plotters-rs/plotters

这个还可以，78K的wasm

Figma

What is Figma’s tech stack?

https://www.quora.com/What-is-Figmas-tech-stack

The graphics code of the core editor is written in C++, and compiled to JavaScript using asm.js. When WebAssembly becomes publicly available, it’ll compile to that. The backend is written in Ruby with Sinatra, using Postgres as the database, and is hosted on AWS. The front-end is written in TypeScript, using React, Redux, and CSS Modules.

Under the hood of Figma’s infrastructure: Here’s what goes into powering a web-based design tool

https://www.figma.com/blog/under-the-hood-of-figmas-infrastructure/

WebAssembly cut Figma’s load time by 3x：

https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/

PS：这个也是前端和C++都精通的。

初期是用C++写的，然后编译为asm.js(一个JS的子集)应用到浏览器上

RayData

RayDataWeb是用Unity做的，通过wasm展示在网页上。

比如访问官方的“智慧城市模板”，抓包可以看到下载了一个10M大小的wasm文件：WebPro.wasm.unityweb

另外查看中间的Canvas结构，也能看到Unity的身影：

1
2
3
<div id="unity-container" style="width: 100%; height: 100%;">
   <canvas id="unity-canvas" style="width: 100%; height: 100%; cursor: default;" __spector_context_type="webgl2" width="1920" height="1080"></canvas>
</div>

模型数据应该是放在这个文件里面的：shanghaiqibaobaolong_waiguan091701.db，大约30M

都是非写实风格的，感觉渲染效果很一般。

(精)上手玩一下WebAssembly

I want to… - WebAssembly

常规语言都有。