跨平台APP开发框架flutter

flutter实践

数加产品线完整的闭环有一个面向用户的APP端，由于公司没有native app开发，所以选用了跨平台技术开发，任务也自然交给了前端。

技术选型

由于大家都没有APP开发的经验，技术选型显得尤为重要。本着用新不用旧的原则，技术团队对flutter这个极其新的东西产生了浓厚的兴趣。经过一系列调研，对比react native，以下便是差异之处。

基础特性	RN	flutter
语言	JS	Dart
渲染机制	通过JS代码调用原生UI渲染界面，效率要慢一些，UI统一性也并不能做到完全统一，只能牺牲部分设计	框架自带UI体系，直接与更底层的skia交互，理论上效率要更高，并且能保证在不同平台上的一致表现
生态	有大量的开源组件以及成熟的解决办法	刚开始兴起，有一些高质量的开源组件，但数量不多
上手难度	简单	对于前端工程师需要另学一门语言，布局方式也和CSS截然不同，上手偏难

通过上述分析可以得知flutter作为一个新兴框架，其底层机制比RN更为优秀，但是由于处于起步阶段，生态上来说是比不上RN的，再次本着程序员对未知事物充满好奇的心，大家一致选择flutter。

项目搭建

有对新事物的热情就必然要有采坑的准备，搭建项目时问题就层出不穷，iOS端cocoapods下了一天都没下下来，最终解决办法竟然是多试几次...接下来使用安卓模拟器控制台报错不断，原因是不能使用最新的安卓Q版本，原来flutter在GitHub上几千个issue是有道理的。虽然困难重重，但是花了一周时间终于把项目建好了，谷歌还是给了开发者一条活路。

编码体验

在通读了一遍Dart文档加上flutter教程的基础上，本以为按照知乎大神们俩小时上手开发的速度应该可以马上高效的进行编码了，然而对着UI设计图，脑子空空如也，完全不知道该如何下手，无奈的又边翻阅文档边看技术博客一点一点把页面磊出来了，开始的开发速度简直不忍直视。

1. 首先的难点在于flutter整个的布局规则已经大改了，需要理解很多新的概念，溢出，堆叠，边界约束全部都和CSS不一样。就拿溢出举例，CSS溢出是自然溢出，父元素样式决定子元素溢出表现，到flutter那是直接报错！是的，你没看错，完全不允许溢出，要先考虑内容是否过长来使用不一样的盒子。更别说还有一堆的概念比如长宽自动伸缩方式，对齐方式，堆叠情况下占满宽度的盒子等等，现在想起来都是一头的包。
2. 还有一个比较典型的就是flutter也是组件化理念，状态控制视图，但是组件之间通过类来进行蹩脚的通信实在是感觉麻烦，远没有react或者Vue简单直观。
3. 各种基础widget的设计纷繁杂乱，有的使用难度极高，到现在我还不明白ListView的builder模式是怎么工作的。

打包部署

本以为在构建项目时遇到的问题在部署时应该会重现，但实际打包过程出奇的流畅，只有在打IOS包的时候由于其平台的安全性而显得有点步骤冗长之外，基本没有别的问题，成功的能在双端真机上运行release包，项目开发到最后也是终于松了口气。

flutter的优点

虽然对于前端程序员来说编码体验很糟糕，但是不得不说这个糟糕体验是在快速上手的前提下，深入理解加上大量的代码经验我相信同样能让flutter工程师高效的进行开发。flutter也有很多不可否认的闪光点的，在release环境下，速度和流畅度都有着非常优良的体验，并且整个项目做下来，几乎没有遇到过双端UI表现不一致的情况，谷歌这个承诺是达到了，不用为平台做特殊兼容对于之前受IE荼毒的前端工程师来说无疑是幸福愉悦的。

---

以上就是flutter开发的实践体验，总得来说flutter是一个优秀的框架，性能以及UI表现值得肯定，但是还是希望谷歌能够多照顾照顾开发者，大家时间都很宝贵，对于一个框架来说易用性也是一个很重要的因素。