基于Flutter商用APP制作的10个经验教训
全文共4593字，预计学习时长12分钟
图源：unsplash
近两年来，我们花费了大量时间在Flutter框架上开发了10个商用APP，本文将分享我们的收获。
本文将帮助你了解：
· 为何选择Flutter?它对预算和稳定性有什么影响?
· Flutter是否能完全适用于企业APP？
· Flutter与Xamarin相比表现如何？
· Flutter适合哪些项目？
2018年7月，我们在Flutter上使用LeanCode开发了第一款商用APP。在初次了解Flutter时，尽管它前景可观，但由于不久前投资Xamarin的失败，我们对它持着观望态度。
其实我们乐于为项目增添一些高新科技，因此希望Flutter证明它能为客户带来真正的价值。这是一个涉及畜群管理的农业项目，而Flutter在该行业的运用很典型，饲养员广泛使用该工具来计算谷仓需求，从用户体验（UX）角度来看，本团队赞成该观点。
他们在两天内充分展示了概念验证（POC）方案，演示了如何轻松制作动画轮播，带来流畅出色的用户体验。最终演变为下方所示的原比例动画：
Kedzia APP项目在Flutter中的简单动画示例
在看到这一惊喜成果之后，我们下定决心，认为Flutter值得一试。
起初，我们不打算100%投入使用Flutter，同时也在运行RN原生（React Native）项目。这种悲观态度是因为在首次编写谷歌地图（Google Maps）代码时，我们没有获得Flutter团队官方支持。最终，我们花了不到500小时在Flutter上开发并交付了一个简易APP，上面只有不到40个视图。
在交付了首个APP并获得客户的五星评价后，2019年初，我们开始更积极地向客户推广Flutter。从2019年5月起，Flutter成为我们处理移动技术的不二之选，同时，我们也停止了基于其他框架的APP开发。
目前为止，我们已经在Flutter上交付了10余种移动产品，并提供了数十种最小可行产品或概念证明（MVP / PoCS)算法。现在，是时候得出结论了。
Flutter更快捷
虽然理论方法也很有趣，但本文不作讨论。我们在Flutter上重写了原本基于Xamarin（面向客户的移动端APP）和ReactJS（面向餐厅经理的网页APP）的APP，可以将二者结果进行对比。
当在后端使用相同的精确位置指示器（API）在相同的作用域上创建应用时，相比Xamarin（667h比987h）和ReactJS (486h比704h)，Flutter分别节省了33%和31%的时间。
仔细思考这些数字，这回答了如何更快捷实惠地构建移动APP。在经济不景气时期，在预算内按时交付新的数字产品变得尤为重要。这也意味着，预算相同时，Flutter用户可以多交付50％的工作量。
假设你是一名产品经理，为研发团队优先处理问题，使用Flutter可以降低至少50%的预算壁垒！
上图对比了Flutter重写的项目版本与原本基于移动端Xamarin和网页端ReactJS的版本所花费的时间，这将极大提高团队创造力并保证所交付工作的质量。
平均90%的代码可在iOS和Android间通用
90%的代码不必在这两种本地平台上重复编写，相比研发本地APP，这节省了90%的时间，同时由于团队目标一致，不必分为两个本地流，极大地激发了创造力。除了共享业务逻辑和用户体验，还可以使用大量现成的库，这会带来附加利益。
首先，它们可以为APP内运用的多类事物（如：与服务器即HTTP客户端通信、推送通知、安全存储、数据库、动画等）提供常用逻辑，从而加快开发过程。
其次，它更容易整合一些常用服务（如：重火力点、地图、支付方式、社交登录、分析、崩溃报告服务等）。因此，只有在编写特定平台的自定义代码时，才需要分别在iOS端和Android端编写代码。然而即使这样，在资料分析记录带（Dart）和本地代码之间建立桥接也相当容易，下文将对此进行解释。
更重要的是，如果考虑到质量因素，它减少了APP的长期维护费用，将可以节省更多成本。这促使我们研究基于Xamarin，React Native和Flutter构建的所有项目，以寻找规律。我们发现，在进行错误处理时，与范围7–14％的React Native和11–23％的Xamarin相比，Flutter的项目通常需要8–10％时间。
呈现最好的用户体验和用户界面（UX/UIs）
在Flutter上开发项目时，UX/UI设计师与开发者的合作常能迸发出火花。他们不再需要无聊地等待本地化过程，能充分发挥创造力。React Native团队本来也应如此，但事实却恰恰相反。
深入研究发现，Flutter能让界面设计师感受到由衷的喜悦，而这在之前只会降低开发速度，造成的额外负担。他们也因此更乐于合作。根据观察，结对编程会议在设计师与开发者携手进行现场实验时就开始了。
几次交互后，得益于稳健的主题驱动，团队为APP提出了一个强适应性的设计语言，使其不仅在Figma或Adobe XD中看起来不错，还能带来最佳用户体验、连贯性和恰当的设计顺序。这种有趣的连贯性体现在项目的整个生命周期中。
过去，当UX/UI设计师在演示会上评估产品时，他们通常会在项目结束时提出建议，在亲身体验后改变想法或简化操作。Flutter的独特之处就在于，设计师一早于APP设计修改环节完成了工作，在项目结束时已悄悄隐退。这也意味着在后续进行Sprint细化时能省下更多时间，这种持续合作将体现在新版本的稳定敏捷开发（scrum）中。
图源：unsplash
简单实惠的动画
Flutter不仅易于实现某些静态视图，同时也为动画制作提供了新的可能。这使用户体验和开发者的合作更上一层楼，实现了前所未有的出色转换特效。此前，这种情况只出现在大预算项目中。多亏了Flutter，如今所有开发人员都可以使用这类特效。
这是因为Flutter呈现于裸机上，直接在画布上完全控制绘图，从而在所有平台上创建像素完美的图像，不像其他跨平台框架需要额外的条件格式。而在React Native绘制是基于可以改变新控件外观的默认视图，其生成了一个蹩脚代码，该代码依赖于平台，与共享代码不应包含于其部署平台中的方法相矛盾。
FlutterAPP更轻盈
渐进式网页APP（PWA）证明了在手机上添加快捷方式、将网站保存为APP极其容易，对于PWA这种全新的业务选择，Flutter真的值得考虑。在这里我们不考虑用户体验，仅参考下载APP的负担（虽然事实上这两种情况下都不轻松）。
根据SimiCart博客，最好的PWA网站也只能给用户提供4.9MB到11.6MB的下载量。这远远低于平均大小为25MB的Xamarin APP和32MB的React Native APP，但非常接近平均11MB的Flutter，Flutter APP的存储量为9-14MB （注意，尽管这些数字似乎有关联，但它们不能直接比较）。
不得不承认，11MB对于本地APP体验、流畅的视觉和触感、快速的反应及其他所有典型的本地APP服务（如推送通知等）来说已经是很低的要求了。这意味着用户能非常流畅地下载APP并开始使用其插件和集成，而由于它们可以用更小的代码执行类似任务，这也意味着APP的性能变高。
与其他跨平台框架相比，这种性能提升直接转化为在冷负荷APP、动画、CPU和内存使用时毫秒级的快速体验（实际上，相比Swift/Kotlin本地APP，Flutter可以提供更好的APP冷启动）。
需要时可以访问本地代码
Flutter的优点在于，移动团队更渴望使用本地代码编写Kotlin / Swift程序包，因为不同于最终代码生成于独立黑匣子中的Xamarin，它们可以完全控制本地实现。由于完全透明，它们与本地代码的连接也更强大，对本地迁移的开发人员更友好。采用这种方法后，想要实现诸如本地支付提供商或复合生态库的特定功能也变得相对容易。
更重要的是，即使是需要生物特征识别算法进行面部或指纹识别的高级功能，在Flutter上也能顺利运行，在由Jakub Biliński主导的Flutter华沙集会期间，荷兰国际集团(ING)为业务开发的银行APP证明了这一点。
简单的Flutter概念证明
当为了进行风险最大化假设检验而构建概念证明时，集成本地代码的好处显而易见。这意味着在客户决定签署整个项目的合同之前，我们可以构建尽可能小的APP，以解决最关键的业务或技术问题，这对于避免高估Flutter来说很重要。
这些开发新方案通常安排在两天内，以找出在如此短的时间内可以实现的目标。截至目前，我们已经对各种PoCs进行了实验，包括支持增强现实技术（AR）的图像检测系统，如下：
Flutter有关AR展示的PoC示例于2天内完成。
通过白板图纸和高级动画：
这样建立快速的PoC不仅能够展示开发速度，还有助于更准确地对最终项目进行估算。
快乐的开发者
从建设内部团队的角度来看，Flutter是一个不错的选择。
最初，由于缺乏专业经验，Flutter开发员少之又少。不同于具有C语言背景的Xamarin开发人员，所有的Flutter候选人都是从以Android为主的本地转移过来的移动开发人员。
随着Flutter越来越流行，加之社区积极组织定期聚会和网络研讨会，人才库中的可用候选人数量呈指数增长，如今，越来越多的专业人士愿意改变多年的本地APP开发立场，寻找与Flutter项目有关的工作。得益于有据可查的Flutter代码和可供利用的其他社区驱动库，进行此类转变非常容易，一些之前拥有独立移动团队的公司正在围绕Flutter调整他们的团队。
我们在LeanCode组织了Flutter训练营，将在湖边举办为期三天的培训项目，让学员获得实操经验，并为为期两个月的强化学习项目挑选最佳候选人，在学习Flutter的同时完成一些非商业项目。
学员们的学习成果出人意料，经过9周的培训，开发员已经能与那些早已开始使用Flutter进行编程的同事并肩工作。如此短的学习周期足以证明，从企业老板的角度看，从本地APP转换至Flutter不是一种革命，而是一种进化，在这种进化中，企业内部团队的作用至关重要。
图源：unsplash
技术堆栈的正确选择将对你的业务和个人职业生涯产生深远影响，毕竟，很少有选择如此简单。Flutter势不可挡、不容忽视，它正不断发展，并向具有极高质量标准的银行、保险等保守行业扩展（例如NuBank，ING和AXA等）。
无论你从事什么行业，早期使用者的时代都已经过去，我们很快就会见证越来越多的成熟参与者进入Flutter生态系统。
推荐阅读专题
留言点赞发个朋友圈
我们一起分享AI学习与发展的干货
编译组：郝岩君、朱怡
相关链接：
https://medium.com/swlh/lessons-learned-after-making-the-first-10-commercial-apps-in-flutter-f420808048cd
如转载，请后台留言，遵守转载规范
推荐文章阅读
长按识别二维码可添加关注
读芯君爱你