背景（Why）
为什么需要多端一体化
- 多端复用
- ...
概览（What）
多端一体化是什么（不是什么）
跨端方案描述
- Flutter：Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
- ReactNative：Learn once, write anywhere.
- Qt：One framework. One codebase. Any platform.
- Eletron：Build cross-platform desktop apps with JavaScript, HTML, and CSS
跨端方案对比
| / | Android | iOS | Windows | MacOS | Linux | Web |
|---|---|---|---|---|---|---|
| Flutter | ✅ 推荐 | ✅ 推荐 | ✅ 推荐 | ✅ 推荐 | ✓ | ✓ |
| ReactNative | ✅ 推荐 | ✅ 推荐 | ✓ | ✓ | ? | |
| Electron | ✅ 推荐 | ✅ 推荐 | ✅ 推荐 | |||
| Qt | ✓ | ✓ | ✅ 推荐 | ✅ 推荐 | ✅ 推荐 | ✓ |
- 主流通用方案：Flutter/ReactNaitve
- Android、iOS、Web使用频次高，覆盖范围广
- 桌面通用方案：Electron
- Windows、macOS主流桌面平台
- 高性能通用方案：Qt
原理（How）
多端一体化如何做到——Flutter框架剖析
Dart构建方式
Dart编译图谱@mermaidjs
- Dart支持两种构建方式：编译成Native代码 & 转译成JavaScript代码，使Flutter能适配Native APP和Web APP
- Dart的常量构造函数使Flutter支持声明式编程布局，无需JSX、XML或者单独的可视化界面构建器，大大降低Flutter适配多平台难度（why-flutter-uses-dart，Flutter FAQ）
| / | develop | production |
|---|---|---|
| dart2native | JIT | AOT |
| dartdevc | ✓ | |
| dart2js | ✓ |
Flutter-平台 构建体系
Android/iOS-macOS/Flutter
| / | 编译器 | 运行时 | 包管理器 | 构建系统 |
|---|---|---|---|---|
| Kotlin | kotlinc | JVM | Maven | Gradle |
| Java | javac | JVM | Maven | Gradle |
| - | ||||
| Swift | swiftc | Swift Runtime | SPM | swift-llbuild |
| ObjC | ObjC Runtime | CocoaPods | Xcode Build | dart/build |
| - | ||||
| Dart | dart2native | dartaotruntime | Pub | dart/build |
- Android/iOS与Flutter
Android/iOS与Flutter@mermaidjs
Windows/Linux/Web
| / | 编译器 | 运行时 | 包管理器 | 构建系统 |
|---|---|---|---|---|
| C# | MSVC# | .Net | NuGet | MSBuild |
| C/C++(Win) | MSVC | MSVC runtime | NuGet/Vcpkg | MSBuild |
| - | ||||
| C/C++(Linux) | GCC | libc/libstdc++ | Conan/Hunter | CMake |
| - | ||||
| JavaScript | (browser) | NPM | Webpack/Grunt/Gulp |
- Windows与Flutter
Windows与Flutter@mermaidjs
- Web 与 Flutter
Web与Flutter@mermaidjs
Flutter-平台 交互能力
Dart API与平台API@mermaidjs
| / | Android | iOS-macOS | Windows | Linux | Web |
|---|---|---|---|---|---|
| MessageChannel | ✅ 推荐 | ✅ 推荐 | ✓ | ✓ | |
| dart:ffi | ✓ | ✓ | ✅ 推荐 | ✅ 推荐 | |
| dart:js | ✅推荐 |
Flutter-平台 混合方式
Package vs Plugin
| / | Dart | Flutter | Platform |
|---|---|---|---|
| Dart pacakge | ✓ | ||
| Flutter pacakge | ✓ | ✓ | |
| Flutter plugin | ✓ | ✓ | ✓ |
- Dart package
Dart package@mermaidjs
- Flutter package
Flutter package@mermaidjs
- Flutter plugin
Flutter plugin@mermaidjs
- 合并起来
Dart package & Flutter package & Flutter plugin@mermaidjs
Add-to-app
- Android/iOS
Android/iOS@mermaidjs
- Windows/macOS
Flutter官方尚未提供
- Web
Flutter官方尚未提供，可以手动或者自动集成
Web@mermaidjs
