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

99 阅读2分钟

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

一.跨端背景

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

常见痛点:

  • 各端功能几乎一致,各端需要单独配置研发人员
  • 开发、维护成本高
  • 安卓、ioS 发版周期长

二.跨端技术方案目标

  1. 研发效率高
  • 学习成本低
  • 多端一致性高
  1. 用户体验好
  • 稳定性高
  • 性能体验好
  1. 动态化
  • 支持动态化下发,满足日益增长的业务需求

三.跨端技术方案介绍

1.Hybrid 方案

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

架构图:

f0d4f2ccd657888f16781208ca8af12.png

2.原生渲染方案

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

原生渲染方案 - React Native

React Native 是一个由 Facebook 于 2015 年9 月发布的一款开源的 JavaScript 框架,它可以让开发者使用 JavaScript 和 React来开发跨平台的移动应用。

架构图:

899f7a99884f62b43b9eaecbe4c2693.png

3.自渲染方案

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

自渲染方案 - Flutter

Flutter 是 Google 在 2018 年世界移动大会公布的开源应用开发框架,仅通过-套代码库,就能构建精美的、原生平台编译的多平台应用。

架构图:

985994ce9b5aebf3b1467e06970e48a.png

4.小程序

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

小程序方案 - 字节小程序

字节小程序是一种全新的连接用户与服务的方式,它可以在宿主( 抖音、头条等App)内被便捷地获取和传播,同时具有出色的使用体验

架构图:

image.png

四.跨端技术方案对比

120cb6c482200f08c1f11f276611aa3.png