跨端技术 | 青训营笔记

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

跨端背景

随着业务的发展，产生了越来越多的业务场景，同时随着技术的发展，产生了越来越多的端，PC端，移动端，web端

常见痛点

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

跨端技术方案

1. 研发效率高

   • 学习成本低
   • 多端一致性高

2. 用户体验好

   • 稳定性高
   • 性能体验好

3. 动态化

   • 支持动态化下发，满足日益增长的业务需求

跨端技术方案

Hybrid

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

原生渲染

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

• React Native——使用React开发跨平台的移动应用

自渲染

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

• Flutter

小程序

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

技术方案	视图层	逻辑层	优点	缺点
hybrid	webview	webview JS thread	1. 开发成本低 2. CSS全集 3. 一致性好	性能中等
原生渲染	原生组件	JS Engine	1. 性能好	1. CSS子集 2. 一致性一般
自渲染	Skia	Dart VM	1. 性能最好 2. 一致性好	1. CSS子集 2. Dart生态一般 3. 开发成本较高
小程序	webview+原生组件	JS Engine	1. 开发成本低 2. CSS全集 3. 一致性好	1. 性能较好

小程序

快速开发

1. 下载小程序开发工具
2. 小程序开发、调试
3. 小程序上传

性能优化

• 优化的意义

  1. 留住用户
  2. 提升转化率
  3. 提升用户体验

随着技术的发展，一定有越来越多不同种类不同系统的设备投入到我们的生活以及开发中，熟悉常用的跨端开发方案，有利于日后发展，能够更好的适应这个时代