跨平台和跨端技术:从浏览器到移动应用

79 阅读3分钟

跨平台

不同的系统就是不同的运行平台。 一份代码跑在任意平台

浏览器

浏览器提供了一个容器,屏蔽了底层差异,提供了统一的 api,这样就可以实现同一份代码跑在不同平台的统一的容器里。这个容器叫做浏览器引擎。

image.png

docker

docker 是一种虚拟化技术,可以在操作系统之上加一个虚拟层,在这层之上划分一到多个容器,容器里再去跑系统。

image.png

jvm

java 因为提供了 jvm 容器,只要把源码编译成 jvm 能解释的字节码就行了,而且 jdk 提供了统一的 api,分别由不同操作系统的底层 api 来实现

image.png

node、deno

提供一套一致的 api,让其上的 js 代码可以跨平台。

image.png

electron

electron 内置了 chromium,并为其注入了 node 的 api 和一些 GUI 相关的 api,是基于两大跨平台技术综合而成的跨平台方案。

image.png

跨平台方案的优缺点

跨平台方案的优点很明显,就是一份代码跑在不同平台的同样的容器内,不用不同平台单独开发,节省成本。

缺点:

  • 因为多了一层容器,所以性能相比直接调用系统 api 会有所下降
  • 为了实现多平台的一致,需要提供一套统一的 api
    • api 怎么设计。要综合不同平台的能力,取一个合适的集合来实现。设计上有一定难度。node、deno、java 都抽象了操作系统的能力,提供了各自的跨平台 api
    • 部分 api 很难做到多平台的一致性
    • 当容器没有提供的能力需要扩展的时候比较麻烦,比如 js 引擎的 bridge、 jvm 的 jni、node 的 c++ addon 等都是为这个容器扩展能力的方式

跨端

跨平台指的是跨操作系统,而跨端是指客户端。

客户端的特点就是有界面、有逻辑,所以包含逻辑跨端和渲染跨端。主要的客户端有 web、安卓、ios、iot 设备等。

跨端包括逻辑跨端和渲染跨端

react native

  • 逻辑跨端是基于 js 引擎,通过 bridge 注入一些设备能力的 api
  • 渲染跨端则使用安卓、ios api 实现 react 的 virtual dom 的渲染

image.png

weex

同 react-native,ui 框架是 vue

flutter

  • 逻辑跨端自研的 dart vm,通过 dart 语言来写逻辑
  • 渲染跨端基于绘图库(skia)

image.png

kraken

渲染跨端基于 flutter 的绘图能力实现

image.png

自研跨端引擎

  • 渲染跨端直接对接 dom api,上层应用基于这些 dom api 实现跨端渲染。
  • 逻辑跨端基于 js 引擎,通过 binding 直接注入一些 c++ 实现的 api,或者运行时通过 bridge 来注入一些安卓、ios 实现的 api

image.png

跨端的通用原理是什么

跨端引擎需要实现一个渲染引擎、实现一个 vm,基于这套架构实现各种组件和 api,跨端容器上层对接一个 ui 框架,再上层的业务代码可以基于容器的 api 实现跨端的渲染和逻辑

web container

浏览器里面实现的容器,通过 wasm 实现了 node 的 api

image.png