写给前端的跨平台方案、跨端引擎的本质

标签: 前端 跨平台 引擎 | 发表时间:2021-05-26 15:50 | 作者:zxg_神说要有光
出处:https://juejin.cn/frontend

近些年来,前端领域的跨端技术越来越多了:react native、weex、flutter、electron、kraken 等等。

那么多跨端方案,他们有没有通用的思路?我们能不能从这么多方案中找出本质的原理?

本文会尝试探究探究以下问题:

  • 什么是跨平台
  • 有哪些方案是跨平台的
  • 跨端和跨平台的区别是什么
  • 前端领域有哪些跨端方案
  • 跨平台、跨端的通用原理是什么

什么是跨平台

我们知道,cpu 有不同的架构和指令集,上层也有不同的操作系统,一个系统的可执行文件在另一个系统上就是不可执行的,比如 windows 的 exe 文件在 mac 上就不能直接执行。不同的系统就是不同的运行平台。可执行文件是不跨平台的。

不同平台提供的 api 不同,所以代码逻辑可能也不同,需要不同平台单独维护代码。这样就带来了几个问题:

  • 多平台各自开发,怎么保证功能是一致的
  • 多平台各自开发,那是不是得各自测试,开发和测试的人力都是多份的

所以出现了跨平台的一些技术,目标是一份代码跑在任意平台。

我们先来看一些各领域的跨平台方案:

浏览器

操作系统不同,浏览器上跑的网页的代码确实同一份。浏览器就是一种历史悠久的跨平台方案。

网页跨平台不意味着浏览器也是跨平台的,浏览器的可执行文件还是每个平台单独开发和编译的,但是他们支持的网页解析逻辑一样,这样上面跑的网页就是跨平台的。

浏览器提供了一个容器,屏蔽了底层差异,提供了统一的 api(dom api),这样就可以实现同一份代码跑在不同平台的统一的容器里。这个容器叫做浏览器引擎,由 js 引擎、渲染引擎等构成。

docker

docker 是一种虚拟化技术,可以在操作系统之上加一个虚拟层,在这层之上划分一到多个容器,容器里再去跑系统、app,这样可以实现硬件和软件的分离,动态分配硬件资源给容器,并且方便 app 运行环境的整体迁移(保存成镜像)。

docker 很明显也是一种跨平台技术,同一个镜像可以跑在任何操作系统的 docker 上。只要不同操作系统实现同样的容器即可。

jvm

java 是一门编译 + 解释的语言,java 源码编译成字节码,然后字节码直接在 vm 上解释执行。

java 为什么这么火呢?主要是因为跨平台。

c、c++ 这种语言写的代码需要编译成不同操作系统上的可执行文件来跑,而且每个平台的代码可能还不一样,需要写多份。

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

jvm 也是通过容器的技术实现了一份代码跑在多个平台,而且 jre 提供了统一的 api,屏蔽掉了底层的差异。

node、deno

node 和 deno 也是跨平台的技术,通过提供一套一致的 api,让其上的 js 代码可以跨平台。这些 api 也是不同平台各自实现的。

electron

electron 内置了 chromium,并为其注入了 node 的 api 和一些 GUI 相关的 api,是基于两大跨平台技术综合而成的跨平台方案。基于这些方案的组合使得 electron 支持用前端技术开发桌面端。

跨平台方案的优缺点

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

但是跨平台方案也有缺点:

  • 因为多了一层容器,所以性能相比直接调用系统 api 会有所下降

  • 为了实现多平台的一致,需要提供一套统一的 api,这套 api 有两个难题:

    • api 怎么设计。要综合不同平台的能力,取一个合适的集合来实现。设计上有一定难度。node、deno、java 都抽象了操作系统的能力,提供了各自的跨平台 api

    • 部分 api 很难做到多平台的一致性

    • 当容器没有提供的能力需要扩展的时候比较麻烦,比如 js 引擎的 bridge、 jvm 的 jni、node 的 c++ addon 等都是为这个容器扩展能力的方式

前端领域的跨端方案

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

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

现在主流的跨端方案有 react native、weex、flutter、kraken 以及各家自研的跨端引擎等。

react native

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

其中 native api 和组件(灰色画出的部分)并没有做到双端一致,而且有的时候扩展图中灰色部分需要原生配合,混杂 rn 代码和自己扩展的代码导致代码比较难管理。最著名的事件就是 airbnb 从最大的 react native 支持者到弃用 react native。

weex

weex 也是类似的思路来实现跨端的,不过他对接的上层 ui 框架是 vue,而且努力做到了双端的组件 和 api 的一致性(虽然后续维护跟不上了)。架构和上图类似。

flutter

flutter 是近些年流行的跨端方案,跨的端包括安卓、ios、web 等。它最大的特点是渲染不是基于操作系统的组件,而是直接基于绘图库(skia)来绘制的,这样做到了渲染的跨端。逻辑的跨端也不是基于 js 引擎,而是自研的 dart vm 来跨端,通过 dart 语言来写逻辑,

kraken

跨端包括两部分,渲染跨端和逻辑跨端。有时候只需要渲染跨端、有时候只需要逻辑跨端,有的时候需要完整的跨端引擎,这 3 种情况都有各自的适用场景。

kraken 就是一个跨端渲染引擎,基于 flutter 的绘图能力实现了 css 的渲染,实现了渲染的跨端。

自研渲染引擎

跨端引擎很依赖底层实现的组件和 api,用开源方案也一样得扩展这部分,所以有一定规模的团队都会选择自研。

自研跨端引擎会和 rn、weex 不同:

  • 渲染部分不需要实现 virtual dom 的渲染,而是直接对接 dom api,上层应用基于这些 dom api 实现跨端渲染。这样理论上可以对接任意前端框架。

  • 逻辑部分也是基于 js 引擎,通过 binding 直接注入一些 c++ 实现的 api,或者运行时通过 bridge 来注入一些安卓、ios 实现的 api。

自研跨端引擎的好处是组件和 api 可以自己扩展,更快的响应业务的需求。其中组件和 api 的双端一致性,以及统一的 api 的设计都是难点。

跨端的通用原理是什么

其实跨端和跨平台的思路类似,都是实现一个容器,给它提供统一的 api,这套 api 由不同的平台各自实现,保证一致的功能。

具体一些的话,跨端分为渲染和逻辑跨端,有的时候只需要单独的渲染跨端方案(比如 karen)和逻辑跨端方案,有的时候需要完整的跨端引擎。

weex、react native 的渲染部分都是通过实现了 virtual dom 的渲染,用安卓、ios 各自的渲染方式实现,逻辑部分使用 js 引擎,通过 bridge 注入一些安卓、ios 的 api。

flutter 则是直接使用 skia 绘图库绘制,并且逻辑跨端使用 dart vm。

但是不管具体实现怎样,思路都大同小异: 跨端引擎需要实现一个渲染引擎、实现一个 vm,基于这套架构实现各种组件和 api,跨端容器上层对接一个 ui 框架,再上层的业务代码可以基于容器的 api 实现跨端的渲染和逻辑

web container

这两天 web container 比较火,其实也是一种跨平台技术,它是在浏览器里面实现的容器,通过 wasm 实现了 node 的 api,这样在这个容器里面可以跑 node 代码。其实思路比较常见,但是是一个新场景。

浏览器容器之上又跑了个容器,容器套娃。

总结

我们聊了跨平台和跨端的区别,跨平台是指跨操作系统,而跨端则是指跨客户端。

跨平台技术聊了 docker、浏览器、jvm、node、deno、electron、web container 等,他们都是跨平台(操作系统)的方案,跨平台有优点也有缺点,缺点就在于 api 的设计比较难,node、deno、java 等都有自己的一层 api 设计;api 一致性的保障也比较困难;其次就是扩展方式复杂一些(jvm 的 jni、node 的 c++ addon 等)。

跨端方案聊了 react native、weex、flutter、kraken 等,有的是绑定了 react、vue 等前端框架,直接从 virtual dom 渲染,有的是实现了 dom api,可以对接任意前端框架。当然可以单独做渲染或逻辑跨端。渲染跨端或者用安卓、ios 提供的方式,或者自己绘制,逻辑跨端或者用 js 引擎(可以对接前端框架)或者用 dart vm。

希望这篇文章可以让你理解跨端和跨平台的容器的思路和优缺点,遇到一些新技术(比如 web container)也能快速的理解。

相关 [前端 跨平台 引擎] 推荐:

写给前端的跨平台方案、跨端引擎的本质

- - 掘金 前端
近些年来,前端领域的跨端技术越来越多了:react native、weex、flutter、electron、kraken 等等. 那么多跨端方案,他们有没有通用的思路. 我们能不能从这么多方案中找出本质的原理. 本文会尝试探究探究以下问题:. 我们知道,cpu 有不同的架构和指令集,上层也有不同的操作系统,一个系统的可执行文件在另一个系统上就是不可执行的,比如 windows 的 exe 文件在 mac 上就不能直接执行.

适合前端Vue开发童鞋的跨平台Weex - SegmentFault 思否

- -
基于 Vue 技术栈的你如果需要选用一种移动端跨平台框架,是 Weex. 无疑,相对于后两者,因为你现在已有比较熟练的 Vue 基础,如果在其他条件一致的情况,Weex 无疑是最佳选择;但是 Weex 真的适合在实际项目中进行移动端跨平台开发吗. Weex 的开发效率、Weex 的质量是否满足需求.

浅析渲染引擎与前端优化

- - JDC | 京东设计中心
浅析浏览器内核的工作原理(以. 浅析由浏览器内核想到的前端优化,或者说前端优化规则是从哪儿来的. 大家知道,大部分的 WEB 页面依托浏览器呈现,而浏览器能够将页面展示出来,基本依赖于浏览器的内核,即渲染引擎. 今天以 Chrome 浏览器的内核 WebKit(更确切是 WebKit 分支 Blink,以下统称为 WebKit )为例,对渲染引擎如何展示页面做个简单、全面的了解.

十大跨平台优秀软件

- james - cnBeta全文版
从Window到Linux到Mac,企业和用户越来越难以抉择使用一个单一的平台. 因此,我们需要一些有应用程序可以在各种平台上应用,这里列举了10 个跨平台程序,与你想象的相比怎么样呢. 在跨平台的世界,你需要一些应用程序不论你使用什么系统都可支持的. 杰克.瓦伦列出了下面是个跨平台程序,他认为是不可或缺的.

云笔记:跨平台笔记服务

- one dollar - 天涯海阁-Web2.0Share
云笔记是一款跨平台的笔记服务,目前提供了Android、iPhone、iPad客户端(FIT写字板、FIT Paper). 最早知道云笔记也是因为一直使用FIT写字板,发现FIT写字板更新之后支持了云同步,才发现了云笔记. 云笔记是新点科技旗下的产品,相信Mac用户都会知道FIT输入法,Mac和iOS上面很棒的输入法应用.

Double Commander: 免費、跨平台的Total Commander

- - Integreted Life
版權所有:晴耕雨讀@ 【牧碼志】,如需轉載,請注明出處. 原文地址: http://0x3f.org/?p=2108. 由於Total Commander很貴,在Windows下又是必不可少的,我一直希望能找到一個TC的免費替代品. 試用過很多免費的文件管理器,但都不理想. 偶然看到 Double Commander,才發現這幾乎完全就是我想要的.

Rserve与Java的跨平台通信

- - 统计之都
R的极客理想系列文章,涵盖了R的思想,使用,工具,创新等的一系列要点,以我个人的学习和体验去诠释R的强大. R语言作为统计学一门语言,一直在小众领域闪耀着光芒. 直到大数据的爆发,R语言变成了一门炙手可热的数据分析的利器. 随着越来越多的工程背景的人的加入,R语言的社区在迅速扩大成长. 现在已不仅仅是统计领域,教育,银行,电商,互联网….都在使用R语言.

移动端跨平台技术总结

- - CSDN博客推荐文章
曾经大家以为在手机上可以像桌面那样通过 Web 技术来实现跨平台开发,却因为性能或其他问题而放弃,不得不针对不同平台开发多个版本. 而React Native让跨平台移动端开发在次回到人们的视野中,其成功的原因除了他“一次编写处处运行”,还因为它相比h5等前端技术,有了更接近原生的体验. 为了方便理解,笔者将跨平台技术分为4大流派:.

Qik 升级:让 Android 和 iOS 跨平台视频聊天

- zeng - 爱范儿 · Beats of Bits
Qik 原本是一个视频分享服务,最大的特点是可以一边拍摄一边上传,玩现场直播. 后来这个团队被 Skype 收购,想把它做成一个跟 Skype 略微不同的聊天服务. 今天,基于 Android 版本的 Qik 终于升级到新版,获得了跟 iOS 版本一样的功能. 最低安装要求是 Android 2.1 ,它能利用手机的摄像头(前置后置皆可),实时拍摄和分享,或者进行跨平台视频聊天.

10款优秀的跨平台免费生产力软件

- yuan - Solidot