Open LipYoung opened 5 years ago
目前我打算用跨平台解决方案编写一个类似于百度贴吧的 APP 。我个人有5年的 iOS开发经常，使用 Object-C 和 Swift 开发过多个应用，也有3个月左右使用 React-Native 完整开了2个小型应用的经验，也了解一些 JS HTML 和 CSS 以及 React 知识。
环境介绍完毕，先上结论：
如果有以下几个前提，我会选择 RN ；中级以上的前端开发经验；需要 iOS 平台和 Android 平台展示各自平台的控件特性；暂时没有单元测试和持续交付的需求。
非常遗憾这几个条件我都不具备。
举个不成熟的抽象类比：使用RN 是 Facebook 官方团队在 iOS 系统和 Android 系统上编写了2个浏览器，而我们开发者需用 JS 编写一个网站，然后在2个浏览器上打开。
那么会有什么问题呢？如果开发者想要编写一个展示地图的UI组件，而且浏览器确没有 API 怎么办？你需要1名 Android 开发者，1名 iOS 开发者使用原生代码编写两个地图组件，然后和 RN 开发者一起制定一套独特的协议，来实现这个高级UI组件。开发的过程就如此复杂，如果再加上地区组件需要版本迭代，BUG修复难度就更佳复杂，也会导致开发团队的人员配置比较奇怪。如果你想从零成立一个开发小组，到底是招聘一个 React 开发人员？还是 招聘会编写 RN 的 iOS 或者 Android 开发人员呢？遇到我说的情况你的开发小组怎么处理呢？
flutter 我还没有完整的开发过一款应用，通过阅读官方和大量的三方文档，各路国内外的讨论。 flutter 更像是运行在 iOS 系统 和 Android 系统上的一款由谷歌开发和维护的独立游戏引擎，开发者需要学习这个引擎的。当然这只是我个人的推测。
我编写这篇博客时， flutter 在github上拥有69K的星星，RN 拥有78K的星星；再考虑到 RN 使用全球用户数量最多的JS编写，RN 2015年开源，flutter 2017年开源的事实，RN 的成绩并不理想。
RN 虽然已经开源多年，但是 Facebook 对于该项目的重视程度并不够，RN 最新也发布了0.60.0 版本，1.0.0 遥遥无期。从官方文档来看，第一篇环境搭建的文章非常详细，面向新手。但是整个文档更像 API 说明文档，如果想入门只靠官方文档并不够，还需要大量的三方教程来协助。对比 flutter 的文档，除了有详细的教程示例代码，对于测试打包和部署也进行了详细的教程式说明。
我在使用 RN 0.58.3 版本开发时，出现了 iOS 端GIF动画只播放一次的问题，只几天时间就被社区成员解决提交了 PR。
当然，flutter 因为是比较新的技术，且 Dart 是一门小众的语言，在选择 flutter 后，肯定要做好出现一些搜索不到解决方案 BUG 的心理准备。而且因为缺少大量成熟的三方库，预计 flutter 的开发时间会明显多余 RN 。
总的来说在文档和社区的对比上，各有千秋，算是55开吧。
参考某开发者的博客介绍，在当下手机性能过剩的情况下，使用 RN 或者 flutter 开发常规一些展示数据和动画，访问网络提交数据的应用，完全不用考虑性能问题，不论选择哪个技术都能在2019年的主流机型上达到60FPS的流畅效果。
在编写UI的过程中，两者都支持UI界面的热重载，加快开发速度。
因为RN 的社区非常强大和成熟，有大量的成熟三方UI库，就连最基础的页面导航功能也被三方库取代了。不论你遇到任何错误和问题，网络上也存在各种解决方案。但是非常遗憾，因为前端本身技术栈的碎片化，以及过多的依赖三方库，导致我在使用 RN 编写一个小型的只拥有登录，数据列表展示和表格数据填写的商家端 APP 时，依赖了14个三方仓库，其中部分仓库还需要自动或者手动导入 iOS 和 Android 工程内。虽然拥有成熟的 NPM 可以管理依赖，但是开发前期依旧花费了大量时间来处理环境导致的问题，如果你想使用 RN 只掌握了 前端知识和 React 是不够的，依赖三方库的过程出现的问题都需要一些基础的 iOS 端和 Android 端开发知识，以及对 Xcode 和 AndroidStudio 基本使用才能处理。
在我开发 RN 的几个月内，对于 RN 的调试是万分痛恨的，首先我尝试了各种解决方案，都无法再使用 Chrome 对 RN 开发时进行断掉调试，项目刚开始时构建了新项目时还是可以的，随着三方库的引入和功能代码的增加就彻底失去了断点调试的功能。（当然，这也可能是我个人能力不足导致的）
我在开发时，被迫只能编写了大量的打印函数 console.log ，这除了麻烦以外还增加了代码被反编译的风险。
对比 flutter 的官方调试文档说明，一个天上一个地下。flutter 除了拥有谷歌开发和维护的 Dart Observatory 功能，可以详细展示堆栈内信息和详细的UI层级说明。而且还有一个 flutter analyze 语法分析工具，在编写代码阶段就可以详细检查语法错误。对比JS的脚本语言特性，虽然你也可以使用ESLint工具进行一样的检查，但是配置 ESLint 的检查语法也是一个十分麻烦的工作，这一点前端工程师应该深有体会。
RN 基于 js 和 React ，导致虽然有 JTest 可以使用，但是该工具只能测试 JS 部分的代码，还记得刚才编写地图功能的例子吗？这样的模块，你还要编写 对于 iOS 和 Android 平台的 Java 代码 和 Object-C 代码的测试。而且因为 RN 本身的架构设计，前端工程师熟悉的工具没有办法对 iOS 平台 和Android 平台进行UI自动测试和持续部署。
flutter 从官方文档来看是不光有对应的详细单元测试UI测试功能，官方工具也支持持续交付，当然需要你重写学习一整套全新且独立的 CLI 工具集。
flutter 发布了1.5版本，除了 iOS Android 外还增加了嵌入式和 web 平台的支持。
因为我不是熟练的JS前端开发人员，不管哪个平台都需要从零学习；已有的 3个月 RN 开发经验虽然让我感觉到了 RN 对于基础功能开发的快速，也看到了对于高级UI功能方面的不足。且我个人希望能更多的接触单元测试和持续发布方面。所以还是选择了 flutter 技术栈。
现在是什么情况？
目前我打算用跨平台解决方案编写一个类似于百度贴吧的 APP 。我个人有5年的 iOS开发经常，使用 Object-C 和 Swift 开发过多个应用，也有3个月左右使用 React-Native 完整开了2个小型应用的经验，也了解一些 JS HTML 和 CSS 以及 React 知识。
环境介绍完毕，先上结论：
非常遗憾这几个条件我都不具备。
RN 和 flutter 给我的印象
举个不成熟的抽象类比：使用RN 是 Facebook 官方团队在 iOS 系统和 Android 系统上编写了2个浏览器，而我们开发者需用 JS 编写一个网站，然后在2个浏览器上打开。
那么会有什么问题呢？如果开发者想要编写一个展示地图的UI组件，而且浏览器确没有 API 怎么办？你需要1名 Android 开发者，1名 iOS 开发者使用原生代码编写两个地图组件，然后和 RN 开发者一起制定一套独特的协议，来实现这个高级UI组件。开发的过程就如此复杂，如果再加上地区组件需要版本迭代，BUG修复难度就更佳复杂，也会导致开发团队的人员配置比较奇怪。如果你想从零成立一个开发小组，到底是招聘一个 React 开发人员？还是 招聘会编写 RN 的 iOS 或者 Android 开发人员呢？遇到我说的情况你的开发小组怎么处理呢？
flutter 我还没有完整的开发过一款应用，通过阅读官方和大量的三方文档，各路国内外的讨论。 flutter 更像是运行在 iOS 系统 和 Android 系统上的一款由谷歌开发和维护的独立游戏引擎，开发者需要学习这个引擎的。当然这只是我个人的推测。
我编写这篇博客时， flutter 在github上拥有69K的星星，RN 拥有78K的星星；再考虑到 RN 使用全球用户数量最多的JS编写，RN 2015年开源，flutter 2017年开源的事实，RN 的成绩并不理想。
已知的优缺点对比
RN 虽然已经开源多年，但是 Facebook 对于该项目的重视程度并不够，RN 最新也发布了0.60.0 版本，1.0.0 遥遥无期。从官方文档来看，第一篇环境搭建的文章非常详细，面向新手。但是整个文档更像 API 说明文档，如果想入门只靠官方文档并不够，还需要大量的三方教程来协助。对比 flutter 的文档，除了有详细的教程示例代码，对于测试打包和部署也进行了详细的教程式说明。
我在使用 RN 0.58.3 版本开发时，出现了 iOS 端GIF动画只播放一次的问题，只几天时间就被社区成员解决提交了 PR。
当然，flutter 因为是比较新的技术，且 Dart 是一门小众的语言，在选择 flutter 后，肯定要做好出现一些搜索不到解决方案 BUG 的心理准备。而且因为缺少大量成熟的三方库，预计 flutter 的开发时间会明显多余 RN 。
总的来说在文档和社区的对比上，各有千秋，算是55开吧。
参考某开发者的博客介绍，在当下手机性能过剩的情况下，使用 RN 或者 flutter 开发常规一些展示数据和动画，访问网络提交数据的应用，完全不用考虑性能问题，不论选择哪个技术都能在2019年的主流机型上达到60FPS的流畅效果。
在编写UI的过程中，两者都支持UI界面的热重载，加快开发速度。
因为RN 的社区非常强大和成熟，有大量的成熟三方UI库，就连最基础的页面导航功能也被三方库取代了。不论你遇到任何错误和问题，网络上也存在各种解决方案。但是非常遗憾，因为前端本身技术栈的碎片化，以及过多的依赖三方库，导致我在使用 RN 编写一个小型的只拥有登录，数据列表展示和表格数据填写的商家端 APP 时，依赖了14个三方仓库，其中部分仓库还需要自动或者手动导入 iOS 和 Android 工程内。虽然拥有成熟的 NPM 可以管理依赖，但是开发前期依旧花费了大量时间来处理环境导致的问题，如果你想使用 RN 只掌握了 前端知识和 React 是不够的，依赖三方库的过程出现的问题都需要一些基础的 iOS 端和 Android 端开发知识，以及对 Xcode 和 AndroidStudio 基本使用才能处理。
在我开发 RN 的几个月内，对于 RN 的调试是万分痛恨的，首先我尝试了各种解决方案，都无法再使用 Chrome 对 RN 开发时进行断掉调试，项目刚开始时构建了新项目时还是可以的，随着三方库的引入和功能代码的增加就彻底失去了断点调试的功能。（当然，这也可能是我个人能力不足导致的）
我在开发时，被迫只能编写了大量的打印函数 console.log ，这除了麻烦以外还增加了代码被反编译的风险。
对比 flutter 的官方调试文档说明，一个天上一个地下。flutter 除了拥有谷歌开发和维护的 Dart Observatory 功能，可以详细展示堆栈内信息和详细的UI层级说明。而且还有一个 flutter analyze 语法分析工具，在编写代码阶段就可以详细检查语法错误。对比JS的脚本语言特性，虽然你也可以使用ESLint工具进行一样的检查，但是配置 ESLint 的检查语法也是一个十分麻烦的工作，这一点前端工程师应该深有体会。
RN 基于 js 和 React ，导致虽然有 JTest 可以使用，但是该工具只能测试 JS 部分的代码，还记得刚才编写地图功能的例子吗？这样的模块，你还要编写 对于 iOS 和 Android 平台的 Java 代码 和 Object-C 代码的测试。而且因为 RN 本身的架构设计，前端工程师熟悉的工具没有办法对 iOS 平台 和Android 平台进行UI自动测试和持续部署。
flutter 从官方文档来看是不光有对应的详细单元测试UI测试功能，官方工具也支持持续交付，当然需要你重写学习一整套全新且独立的 CLI 工具集。
flutter 发布了1.5版本，除了 iOS Android 外还增加了嵌入式和 web 平台的支持。
总结
因为我不是熟练的JS前端开发人员，不管哪个平台都需要从零学习；已有的 3个月 RN 开发经验虽然让我感觉到了 RN 对于基础功能开发的快速，也看到了对于高级UI功能方面的不足。且我个人希望能更多的接触单元测试和持续发布方面。所以还是选择了 flutter 技术栈。