移动端-原生开发和混合开发

核心内容：主要介绍端内开发UI的方式，方便定出自己的位置、选择技术方案、推进合作。

=========

1. 原生开发

原生体验最好

1.1 静态原生开发方式

• iOS原生开发：使用 Swift/Objective-C 语言
  • 使用 Xcode 作为IDE
  • 直接调用iOS系统API - 性能最优，体验最好
• Android原生开发：使用 Kotlin/Java 语言
  • 使用 Android Studio 作为IDE
  • 直接调用Android系统API - 同样具有最佳性能和体验

1.2 动态化原生开发方式

• 阿里DynamicX
• 美团 MTFlexbox
• 通过自定义 DSL 实现动态更新

2. 混合开发

2.1 混合开发

WebView、React Native、Flutter 三种方式在混合开发上有代表性。

• WebView：在原生应用中嵌入浏览器内核来渲染Web页面，本质是一个微型浏览器。
• React Native：使用JavaScript编写UI，通过Bridge桥接机制转换为原生平台的UI组件进行渲染。
• Flutter：使用自己的Skia渲染引擎直接绘制UI像素，不依赖原生组件，实现"一切皆Widget"。

2.2 对比分析

2.2.1 性能表现

• WebView：
  • 性能最差，因为需要加载网页内容和JavaScript引擎
  • 内存占用较大，特别是打开多个WebView时
  • 启动速度慢，需要初始化浏览器引擎
• React Native：
  • 性能中等，因为需要JavaScript引擎和原生桥接
  • 复杂界面可能出现卡顿，因为JS和原生通信成本
  • 启动速度比WebView快，但比Flutter慢
• Flutter：
  • 性能最好，接近原生应用
  • 自带渲染引擎，减少中间层
  • 60fps的流畅度，动画表现优秀

2.2.2 用户体验

• WebView：

  • 体验最差，感觉像在用网页
  • 手势响应有延迟
  • 动画效果不流畅

• React Native：

  • 较好的原生体验，使用原生组件
  • 在不同平台有一致的外观
  • 手势响应和动画表现尚可

• Flutter：

  • 最接近原生的体验
  • 完全自定义的UI渲染
  • 动画流畅，手势响应及时

2.2.3 开发效率

• WebView：
  • 开发最快，可直接使用Web技术栈
  • 团队容易组建，Web开发者众多
  • 热更新方便，直接更新网页内容
• React Native：
  • 开发效率中等，需要了解原生平台特性
  • 可以复用React知识，学习成本适中
  • 支持热重载，开发体验不错
• Flutter：
  • 需要学习Dart语言和Flutter框架
  • 完善的开发工具和热重载支持
  • 组件化开发，代码复用性强

2.2.4 维护效率

• WebView：

  • 维护简单，只需更新网页内容
  • 问题定位较易，使用Web调试工具
  • 版本兼容性好

• React Native：

  • 维护成本中等，需要处理原生平台差异
  • 依赖管理复杂，版本更新可能带来兼容问题
  • 调试相对复杂，需要同时处理JS和原生代码

• Flutter：

  • 统一的代码库，维护成本低
  • 强类型语言，代码更可靠
  • 版本升级较为平滑

2.2.5 适用场景

• WebView：
  • 简单的内容展示
  • 需要频繁更新的功能
  • 已有Web应用快速移动化
• React Native：
  • 中小型应用
  • 团队已熟悉React技术栈
  • 对性能要求不是特别高的场景
• Flutter：
  • 大型复杂应用
  • 要求高性能和优秀用户体验
  • 需要精确控制UI和动画的场景

3 WEEX架构

3.1 架构

1. Framework层

   • JS Framework: 负责解析JS代码,管理数据流
     • JS引擎: 使用V8/JavaScriptCore解析执行JS代码
     • 数据管理: 实现数据响应式系统,类似Vue的数据绑定
     • 组件系统: 管理组件生命周期、属性更新等
     • 模块管理: 注册和管理Native模块的JS接口
   • Native Framework: 负责渲染、事件处理等原生功能
     • 页面管理: 负责页面的创建、销毁、导航等
     • 渲染管理: 调度渲染任务,管理渲染队列
     • 事件系统: 处理触摸、手势等原生事件
     • 动画系统: 实现原生动画效果

2. Bridge层

   • 通信机制:
     • JS到Native: 通过注入全局API实现
     • Native到JS: 通过evaluateScript实现
   • 处理数据格式转换
     • JSON序列化/反序列化
     • 数据类型映射(JS类型←→Native类型)
   • 管理模块注册
     • 注册Native模块供JS调用
     • 管理模块生命周期
   • 回调管理
     • 维护异步调用的回调函数
     • 处理成功/失败的回调

3. Render层

   • 渲染引擎
     • 布局引擎: 负责计算元素位置和大小
     • 样式处理: 解析和应用CSS样式
     • 渲染优化: 脏区检测；渲染合并；异步渲染。
   • Virtual DOM
     • DOM Tree: 维护组件树结构
     • Diff算法: 计算最小更新路径
     • Patch操作: 更新真实DOM节点
   • Native UI组件
     • 基础组件: div、text、image等
     • 复杂组件: list、scroll等
     • 自定义组件: 支持扩展原生组件

3.2 工作流程

1. JS代码经过JS Framework解析,生成Virtual DOM
2. 通过Bridge层传递给Native层
3. Native层根据Virtual DOM进行渲染,生成原生UI
4. 用户交互事件通过Bridge反向传递给JS层处理

这种架构设计的优点:

• 实现了跨平台
• 性能好,渲染效率高
• 可扩展性强