Flutter

Edit 变更圈子

查看历史

Share

Flag

传统移动端开发往往需要同时兼顾Android和IOS的开发，而桌面端开发又需要同时兼顾Windows、MacOS、Linux系统。如果你想要全平台覆盖，不仅意味着要同时维护多套完全不同的代码（极大提高了维护成本），并且代码和逻辑还可能不能复用，这意味着高昂的开发成本（极低开发效率），每个平台都得从零开始写。现在国内还多出个鸿蒙系统，这意味着你要同时开发和维护更多套代码，哪怕补贴钱，这成本也不是小企业能够负担得起的。于是，跨平台框架应运而生，Facebook开源的React Native，曾经是最流行的框架，不过近几年被Flutter超越。它不仅能让你使用React语言同时开发Android和IOS APP，甚至还能进行Windows桌面端开发。而谷歌开源的Flutter，是目前最流行的跨平台框架，略微领先React Native。它能让你使用dart语言开发移动端与桌面端应用。而Tauri则允许你使用任何前端框架进行全平台开发，不过也需要你懂得一些Rust语言。我们先从开发体验出发来对比这三个跨平台框架。首先，React Native能够让你完全用JSX语言来进行跨平台开发，这对于本身熟悉Web技术的Web开发者而言无疑是非常好的。这意味着他们不需要多余学习太多东西即可直接上手。不过React Native虽然前面带个React，却跟Web端React本身有很多不一样的地方（见 给Web开发者写的React Native简介，React Native与React的区别与对比（1）），因此同样需要开发者去适应。而Flutter对于Web开发者而言就没那么好上手了，它需要开发者掌握dart语言进行开发。dart语言跟JavaScript有很大不同，这会让Web开发者觉得“反人类”设计。不过dart的语法跟Java或者Swift有点像，对于Android或者IOS开发者而言，Flutter或许倒没那么难上手。最后Tauri可以说是对Web开发者最友好的跨平台框架了，它允许你使用任何前端框架进行开发。不过想要开发完整的应用，你免不了得懂一些Rust，毕竟Tauri其实就是个Rust GUI框架。而Rust对于新人而言，学起来可比学C++要难一些。接着从性能出发（不准确），React Native会将所有代码编译成原生组件，生成UI画面则是通过原生的渲染，性能上比较接近原生应用。而Flutter则不使用原生的渲染模式，它自己在不同平台使用不同方法实现画面的渲染，性能方面比React Native稍好。最后Tauri通过调用各个平台的WebView来渲染画面，底层使用Rust来进行WebView与OS系统的通信，性能似乎比Flutter和React Native差一些。更细节、更准确的对比网上已经有许多了，我就不过多评价了毕竟性能这方面我也不太懂。最后从生态出发，React Native许多功能的实现非常依赖于社区的第三方库，而有很多库已经没人维护了。Flutter据说也好不到哪里去，但根据我自己的搜索，像渲染HTML、富文本编辑器、渲染数学公式，以及微信、支付宝接口，这些功能Flutter的支持似乎比React Native的要好，故而从整体上而言，Flutter的生态比React Native的要好，这也意味着在React Native想要实现相同的功能，可能要耗费更多时间。而Tauri呢能够完全使用整个Web端的生态，前端方面自然不用多说，主要是Rust的生态还是太不成熟了，有些Rust库早已过时但也没人维护，这就导致有些Tauri的插件用不了，因此你可能会在Rust方面耗费大量时间。总之，移动端方面React Native、Flutter、Tauri各有优劣，对于熟悉Web技术的开发者而言，React Native可能是最好的选择，Tauri次之。但从整体出发，Flutter可能是最好的选择，React Native次之。

Flutter、Tauri、React Native都是目前移动端流行的跨平台开发框架，并且他们还能胜任全平台开发。React Native是最早开源的跨平台框架，而Flutter紧跟其后，并且Flutter最近几年超越React Native成为当前世界上最流行的跨平台框架。Tauri则是最近几年诞生的新跨平台框架，跟其他框架显著不同的一点是，它允许你使用任何前端框架，即你能够自由使用整个Web生态进行跨平台开发。Flutter、Tauri、React Native、Android原生我都尝试过，接下来我说一下我分别使用他们的开发经历。首先，我第一个使用的跨平台框架是Tauri，当时Tauri V2.0已经发布，我看它能够使用Nuxt.js或者Next.js进行开发，觉得蛮不错的。毕竟我有两个网站，一个是Nuxt写的，另一个是Next写的，这样我就只需要在原有代码基础上修改一下就行了。于是很快我就栽跟头了，首先是Nuxt的桌面端应用，我在dev模式下，没有发现任何问题，$fetch请求也能正常发送。结果build以后，发现所有的请求都废了，全是404，将url改为完整url，结果就是跨域问题。之后我才明白，Tauri其实是一个Rust GUI框架，HTML、CSS、JavaScript都只是用来渲染画面罢了，想要发送HTTP请求还得通过Rust。于是，在Tauri官方文档中，我找到了HTTP请求的插件，最后才解决了这个问题。这还只是个小问题，最后真正劝退我的还是写移动端的时候。之后我找到了一个Web端的手机端UI库，于是打算从零开始写一个手机端APP。刚开始一切都没问题，开发起来就跟Web端我适配手机端时一样。直到写登录功能时，我才遇到一个新问题。在Web端我们可以直接使用cookie来实现登录功能，而在Tauri似乎并没有cookie这个概念，我得使用OAuth2实现登录功能，并将access token与refresh token存放到安全的地方。而这就是一切问题的起因，我查看了Tauri官方提供的插件，最后找到了两个能用来存储数据的插件——Store和Stronghold，而Stronghold就是专门用于存储敏感数据的。于是，我直接根据官网的步骤开始使用，结果最后运行的时候rust build报错了，怎么样都修复不了。谷歌上也找不到什么有用的信息，最后我不得已去GitHub提了一下issue，没人答复。于是我只能放弃Tauri，毕竟这么简单的功能都解决不了，谁知道后面有没有更难的。后来我也知道这是为什么了，就是Stronghold的一个依赖过时了，但没人替换掉，总之这个问题短期内是无法解决的。具体见Stronghold doesn't work在放弃Tauri后，接着，我使用了React Native来开发。React Native虽然使用的语言是React的，但是开发体验完全不一样。并且我刚开始使用了错误的UI库Tamagui上手（具体见React Native UI库介绍与对比），加上创建项目使用的template不同，总之刚开始用了不多久，我就放弃React Native了，转而尝试安卓原生和Flutter。说到安卓原生，我的开发时间很短，因为一开始用了没多久就把我劝退了😅。首先是很奇葩的需要将所有的string都写进一个xml文件里，这跟Web开发这么久所形成的习惯格格不入。接着就是布局组件这些，都得在xml文件里写，而函数调用那些就得在kt文件里写。接着就是实现一个ListView想不到也这么麻烦，最后根据网上找的资料，我才勉勉强强实现一个。最后把我劝退的，是在安卓原生发送HTTP请求，我对Java或者Kotlin本身就不熟悉，结果我发现想要发送一个简单的请求居然如此麻烦，对比React Native直接一个fetch搞定，安卓原生哪怕下了OkHttp也还是那么复杂。总之，最后我觉得按这个情况下去，开发完一个APP得猴年马月。于是，这时我第一次使用Flutter进行开发，虽然Flutter用的是dart语言，对熟悉JavaScript的Web开发者来说有些反人类设计，但其写法跟Java相似，并且跟安卓原生相比，已经简化很多了，接着还有一点就是它的官方文档十分齐全，还附有视频。刚开始用Flutter开发也没啥大问题，基本上都克服了。Flutter的状态管理相比于React Native能够使用Zustand还是复杂很多，不过发送HTTP请求还算简单跟fetch有得一比，比安卓原生简单不知道多少倍。而Authentication的实现比React native navigation的实现过程复杂一些，但最后也是顺利实现。目前看来，我应该可以使用Flutter一直开发下去。最后是什么劝退我使用Flutter呢？答案很简单，因为我无法使用Android emulator进行测试。前面我使用flutter都是直接用浏览器来测试的，也就是说我测试的是Web端，而Web端想要实现跨域很麻烦，反正我一直实现不了。毕竟我要开发的只是手机端，于是我直接打开安卓版，结果要么是报错，要么好不容易报错没了，结果Android emulator崩了。最后我花了不少时间，都解决不了Android emulator崩溃的问题，GitHub上也有不少人遇到这个问题，于是我只好放弃Flutter。最后我重新使用React Native进行开发，并且弃用Tamagui，改用React native paper以后，基本上也没遇到什么大问题。一路顺利推进下去，而偶尔也会遇到一些问题，需要花很多时间来解决。就这样前前后后花了三个月，弦圈APP终于在3月1号开发完成。