跨端技术概述 | 青训营笔记

68 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天

上完这堂课,我对于跨端技术有了一定的了解。

跨端背景

随着业务的发展,产生了更多的业务场景,也随着技术的发展,产生了很多的端。PC端(Windows、Mac),移动端(安卓、iOS)、web端、IoT设备(车载设备、手表)等。

痛点

  • 各端功能基本一致,却需要单独配备开发人员
  • 开发、维护成本高
  • 安卓、iOS发版周期长

跨端技术方案目标

  • 研发效率高
    • 学习成本低
    • 多端一致性高
  • 用户体验好
    • 稳定性高
    • 性能体验好
  • 动态化
    • 支持动态化下开发,满足目前业务需求

跨端技术方案

Hybrid方案

基于WebView渲染,通过JS Bridge把一部分系统能力开放给JS调用。

image.png

原生渲染方案-React Native

使用JS开发,通过中间层桥接后使用原生组件来渲染U界面。

image.png

image.png

React Native是—主要有JSI、Fabric、TurboModules 组成。

JSI是Javascript lnterface的缩写,一个用C++写成的轻量级框架,它作用就是通过JSI,JS对象可以直接获得C++对象(Host Objects引用,并调用对应方法。有了JSI,JS和Native就可以直接通信了,调用过程如下:JS->JSI->C++->ObjectC/Java。 JSI是整个架构的核心和基石,所有的一切都是建立在它上面。

Fabric是新的渲染系统,它将取代当前的Ul Manager。

在之前的架构中JS使用的所有Natve Modules(例如蓝牙、地理位置、文件存储等)都必须在应用程序打开之前进行初始化,这意味着即使用户不需要某些模块,但是它仍然必须在启时时进行初始化,Turob Modules是对这些Natie模块的增强,正如在前面个绍的那祥,现在JS将能够持有这些模块的引用,所以JS代码可以仅在需要时加载对应模块,这样可以将显著缩短RN应用的启动时间。

自渲染方案-Flutter

利用Skia重新实现渲染管线,不依赖原生组件。

image.png

小程序方案-字节小程序

使用小程序DSL +JS 开发,通过中间层桥接后调用原生能力,使用webview来渲染UI界面。

image.png

对比

image.png