跳转至

Flutter 与网页端开发

补充于 230703

首先，应用开发基本上只针对两种平台：桌面端（电脑）和移动端（手机和平板）。这两个平台的交互不一样：桌面端使用键鼠、移动端使用触屏；这两个平台的目的不一样：电脑一般用于办公、而移动端一般用于日常生活；这两个平台的性能不一样：桌面端屏幕大性能强、移动端屏幕小性能弱。综合桌面端和移动端的差异，最好的应用开发方式是桌面端和移动端分开开发，这也就从根部结束了所谓跨端的想法，因为这并不符合实际的使用逻辑。

在考虑桌面端开发的过程中，我们希望一款应用开发后可以编译至 macOS、Windows、Linux 三个目标平台（跨桌面端设备）；在移动端应用开发的过程中，我们希望一款应用开发后可以编译至 iOS、Android 手机、iPadOS、Android 平板（跨移动端设备）。因此一般不考虑原生开发框架，除非你希望维护多套相同功能的不同代码库。只有一种特例，就是需要调用某个平台特有的硬件或 SDK，如需要调用 NVIDIA 的显卡做计算、要使用 Apple Pencil 的压感书写、要调用 ARKit 中的算法，这些特定的应用直接使用原生开发就好了，因为根本没有跨设备的需求。

综合各点考虑，

  • 桌面端最合适的应用开发框架是 web。
    • 优势有：用户在浏览器输入链接打开即可使用；用户打开永远是最新版本，省去了手动更新的步骤，对于开发者来说降低了维护成本；API 对于 web 这个平台来说是原生的，不需要编写跨 macOS、Windows、Linux 三个平台的插件；现在桌面端电脑的性能已经很足够了，web 虽然性能较差但是不太会影响桌面端的用户体验。
    • 桌面端 Flutter 的作用是开发一些体量较大的生产力工具（如富文本编辑器、IDE、平面设计工具）和一些需要经常读写用户本地数据的应用（如本地音乐播放器、本地相册、OBS、视频剪辑软件）。对于一些包体较大的应用，Flutter 当然可以做，但是在 web 端渐进式下载资源以及本地持久存储看起来也不会遇到太大问题。
    • 对于重渲染的应用（实时渲染的游戏、三维设计工具），还是得使用游戏引擎或者原生框架的渲染 SDK。
  • 移动端最合适的应用开发框架是微信小程序或者 Flutter。
    • 微信小程序的优势是在中国可以扫码打开，对于使用者来说足够简便，对于业务逻辑简单的信息交互应用性能完全足够。
    • Flutter 的优势是可以轻松上架应用商店，性能和用户体验有保障，调用 Android 和 iOS 的原生功能相对简单。

写于 230420

对于我（个人开发者）而言的应用开发框架选取指南（从上往下）：

  1. 是否重渲染：如果应用主体为 3D 或非常看重实时渲染性能，考虑使用 原生开发框架提供的渲染 SDK 或 游戏引擎，如 Unity。
  2. 是否需要原生功能：如果应用主体需要使用目标平台提供的原生 API 或 SDK，如 Apple Pencil、ARKit、Metal、录屏，使用 原生开发框架。
  3. 是否不常更新：对于个人本地使用、要存储大量用户数据、包体本身较大、注重性能、不常更新的应用，选用 Flutter 开发客户端应用，如工具类应用（计算器、音乐播放器、相册、笔记软件）、发版周期较长的生产力工具（如富文本编辑器、IDE、平面设计工具、视频剪辑软件）、app-like game（非 video game）。
  4. 是否为移动端：默认 Android 与 iOS 共用代码仓库，优先考虑使用 微信小程序 或 React 构建移动端网页应用；如果一定要以 app 的形式存在，使用 ReactNative；如果遇到性能瓶颈，选用 Flutter。
  5. 是否为网页端单页应用：如果在网页上发布的更像一个 app，可以考虑 Flutter。
  6. 是否为网页端：使用 React 构建目标为桌面端浏览器的网页。

关于 Flutter 的一些经验之谈：

  • 不要将 Flutter 看作一个跨平台的框架，更准确的表达应该是多平台。Flutter 应该被分为三种：移动端 Flutter、桌面端 Flutter、网页端 Flutter。
    • 个人感觉网页端 Flutter 有些寄，难以撼动 HTML CSS JS 的原生技术。
  • 需要调用操作系统提供的一些 API 则直接使用原生开发，反过来说，举个例子，如果应用需要使用的功能都被 Flutter SDK 包含，再考虑使用 Flutter 开发。
  • Flutter 没有热更新（参考 GitHub | Flutter - Code Push / Hot Update / out of band updates），所以不适合做传统意义上需要不断更新的互联网产品。

最开始在朋友圈发的思考，主要是在考虑用 Flutter 还是 React：

最近非常想学一学网页端开发，目前比较想着手的是 React 开发。

​苹果平台的原生开发我肯定是不会再做了，因为苹果太 close 了，即便有各种好用的 API。

​跨平台就是最近一直在用的 Flutter。桌面端网页端移动端六个平台一起部署这确实很爽。我现在用 Flutter 已经开发了一个桌面端和一个网页端的实际应用，开发体验很棒，工具链完整。

一直没有试网页端的开发，是因为我不喜欢 HTML CSS JS 这一套工具，我希望精确控制界面元素位置和样式，希望代码能明确变量类型。

​但网页端优势太明显了，不同平台的共同标准，无数的第三方包实现各种各样的功能，实时部署用户无需更新应用，现在的浏览器性能强大也不需要太多优化，事实上大多数应用也不需要那么强的性能。React 的思想和 SwiftUI 以及 Flutter 是一致的，加上 JS 我应该能很快上手。

现在主要在考虑的就是我希望之后只使用一个框架，问题：Flutter or React。

朋友圈可以给一些建议吗？

之后想清楚了，结论如下：

首先明确：桌面端的应用都可以通过浏览器来实现（必须要桌面端的应用，好像也就只有浏览器、虚拟机、实时渲染类的游戏），桌面端浏览器屏幕大且性能给力，开发框架选 React。

其次：移动端的大部分应用在浏览器内体验其实没有那么好（微信小程序暂时不考虑），因为屏小且性能没那么强，大部分应用都是原生应用，而且要通过应用商店审核，开发框架选 ReactNative。

再次：如果需要蓝牙、USB、Apple Pencil、ARKit 这种必须要调用原生 API 的应用，不如直接整个应用全用原生框架来做。

【所以，答案就只能是 React 了啊。】为什么不能 React Flutter 两个都要呢？因为我是个人开发者，不想同时折腾两个框架，选一个一直用精通就完事儿了。

Flutter 在浏览器中的渲染性能其实不太好的，感觉有些卡。而且官方说不支持热更新，这一点我觉得实在不能接受，对开发者来说维护成本略高，开发 bug 一大堆，上线后肯定要继续修的，难道每次都要让用户在使用前去应用商店下载一下最新版吗。即使说 Flutter 跨平台是优势，遇到没有的包你也得自己写一堆插件，这意味着你要清楚的知道所有平台的原生代码怎么写…

【感觉 Flutter 比较擅长的应该是一些不常更新、注重性能、包体比较大的客户端程序，非常适合游戏（准确来说 app-like game，而非 video game）和那种一个月或一年发布一次新版的生产力工具（如富文本编辑器、平面/3D/视频/动画设计、IDE）。】

React or Vue，我在考虑，仅仅从官方文档的角度来看，React 比 Vue 更清晰，更符合我现阶段已有的应用开发思维。JS or TS，我也在考虑，TS 更符合我的编程习惯，JS 则直接是浏览器标准。