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

跨端是什么

跨端背景

随着业务场景和技术进步，端越来越多，如PC端（Windows、Mac），移动端（Android、IOS）、Web端、IoT设备（车载、手表）等

常见痛点：各端功能几乎一致，但各端需要单独配置开发人员，造成了开发、维护成本高等问题

跨端技术方案设计目标

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

跨端技术方案

四种常见方案

Hybrid方案

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

原生渲染方案

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

• React Native

  • Facebook于2015年发布的开源JS框架，实现JS和Reac移动应用的跨平台开发
  • 原理：原生组件渲染（OEM widgets）效率比WebView高，但能力受限
  • JSI：JavaScript Interface 直接操作C++对象，性能优化的产物
  • FABRIC：桥接层
  • TURBO MOUDULES：逻辑代码

自渲染方案

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

• Flutter

  • Google在2018年公布的开源框架，一套代码库就能构建原生平台编译的多平台应用

小程序方案

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

• 字节小程序

  • 多个渲染层WebView（区别Hybrid）
  • 逻辑层JSC（JavaScript Core）
  • 对接Native平台

• 小程序性能优化的意义：留住用户，提升转化率和用户体验

技术方案对比

小结：随着端越来越多，跨端的需求会越来越强烈，跨端技术方案会不断迭代，核心目标仍然是“write once，run anywhere”，未来在渲染方面可能会出现更多的机会。