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

152 阅读1分钟

这是我参与「第五届青训营 」笔记创作活动的第7天,关于跨端技术概述的知识点总结,包括:跨端是什么和跨端技术方案介绍。

———Zy_Thomas

1.跨端是什么

跨端的背景

业务的发展,产生越来越多的业务场景,并且随着技术的发展,产生越来越多的端,PC端(Window、Mac),移动端(andriod、iOS)、web端、IoT设备(车载设备、手表)等。

常见痛点:

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

跨端技术方案目标

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

2.跨端技术方案介绍

Hybrid方案

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

898FEBE77D7189BCA07449F8B9931C9F.png

原生渲染方案

使用JS开发,通过中间层桥接后使用原生组件来渲染UI界面。如React-Native 0B9F25B314B871EDE4F99D93AE59F1C8.png

自渲染方案

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

2FE8D1C2ED334BEC8C67D9828C961C13.png

小程序方案

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

73EB4D2697F11B68EF99FB9E026D7A7D.png 9BC90B36E9501760FDA6F7B7A5CC8863.png 6AF3CF82FCBB01D724FFF43FD1847120.png

跨端技术方案对比

E7AF38F2D5EF2F3488BF72E7F09A8C5E.png