跨端技术 | 青训笔记

75 阅读2分钟

这是我参与【第五届青训营】伴学笔记创作活动的第八天

跨端是什么

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

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

跨端技术目标

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

跨端技术方案介绍

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

Hybrid方案

640be67b2bd94b99dbdaa3e6b7b7507.png

0b1345499b93a8d17dc8dc0956c7362.png

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

原生渲染方案-React Native

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

c10abcb9274aca15096d0bcbe6dea71.png

5254803ab5a85c1345879b58f23558e.png

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

自渲染方案-Flutter

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

700dd7a274e3d210ed0bf95051a9d45.png

155bb68180b19d60049950c096691a6.png

1e3e83c89b928401a34b29e3dc6ebcd.png

小程序方案-字节小程序

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

96a3e3ca8ccef6a8630db121871be5c.png

1568a48d9a3541d428f54cd8111c98b.png

4e7d9b36ef5ee5fbfc588ffb5c1df74.png

247d32b7f719fabe2f9064f8d522332.png

跨端技术方案对比

f8f54dc33c287648c1454f4413f0659.png