Kotlin Livestreams

网络研讨会视频:Flutter x Ktor 打造跨平台全端应用

跨平台一直是大家追求的梦想。对开发者来说,只要维护一个 Code Base 就能部署至多个平台可以省下不少工作时间;对企业来说,可以更快速交付产品、验证市场。本次网络研讨会运用两种跨平台技术:Flutter 及 Ktor,Flutter 在移动端有着一致的 UI 表现,Ktor 编译后可以在跨平台的服务器上运行,由两位讲师为大家演示如何串起两种技术,从前端到后端打造跨平台全端应用。

本次视频已同步发表至 B 站

主題分享

本次分享由滴滴出门 Flutter 工程师鑫磊及 JetBrains 技术布道师圣佑两人合力完成一个日记应用,由鑫磊以 Flutter 实作 Mobile App、再串接由圣佑以 Ktor 实作的 Backend API。实作的部份由鑫磊的前端开始,鑫磊首先简介 Flutter 技术的概念及现况,并在 Android Studio 上创建一个全新的项目,以 Flutter Widget 逐步完成两个 App 页面,包括日记列表页(空的状态及有日记的状态)及日记编辑页。在 Flutter Hot Reload 的帮助下,鑫磊只花了约 20 分钟就创建了一个暗色主题、可以编辑/储存/浏览日记的 Flutter App。

从 UI 思考 JSON

接着就由圣佑接手介绍 Ktor。Ktor 是由 JetBrains 团队以 100% Kotlin 打造的 Web 框架,提供了 Server 及 Client 两种组件,轻量、语法简洁易学是它的特色,非常适合用于网站、API 及微服务。在 IntelliJ IDEA 里创建好 Ktor 项目后,圣佑就从 UI 去思考 JSON 格式,再从 JSON 格式去设计交换资料所需的 Kotlin Data Class。接着依序安装依赖、设计数据库、载入 Ktor ContentNegotiation Feature、配置 Route、操作数据库、错误处理,逐步完成一个后端 API,最后部署上云。

以 Ktor 开发 API

在拿到 JSON API 后,鑫磊向大家介绍 Flutter 状态管理的观念,并在演示的日记应用里开始实现。为了取得后端数据,首先要在项目里集成 http 库,在发出 HTTP Request 拿到 JSON 后,通过 json.decode 转成 Map,再以 Diary Model.fromJson 将 API 取得的数据转成 Flutter 可以操作的 Model,最后由数据趋动 UI 更新。就这样,一个可以同步后端 API 的 Diary Mobile App 就在两人联手下,只花约 1 小时就完成!

演示完后的问答环节非常热烈,在这边将同学们的提问整理如下:

問答

Q. Kotlin/Ktor 及 Flutter 各有什么新动态?

圣佑:Kotlin 在今年 8 月中正式发布 1.4,接着 9 月中持续发布 1.4.10 等更新。这次更新的重点在代码质量及性能,10/12-10/15 这周 Kotlin 团队会举办网络大会,分语言、库、KMM(Kotlin Multiplatform Mobile)及 Backend 四大主题分享新版本的功能特性,有兴趣的朋友可以线上报名。随着 1.4 的发布, Ktor 也一并更新至 1.4.0,也有全新的官网,文档也正在更新中,请大家期待。习惯看中文的朋友可以浏览 由 Kotlin User Group 翻译的版本

鑫磊:最近 Flutter 比较多的新动态都是在多平台方面,最近刚公布了对 Windows 平台的支持,目前是 Alpha 版,我估计在年底或明年上半年应该会相对 Stable,详细的信息可以参考 Flutter 官方 Medium 上的文章,我们 中文社区 也会持续提供相关的信息。

Q. Flutter 会取代 Android 和 iOS 吗?Flutter 值得不值得后端学习呢?

鑫磊:实际上最开始我也是后端,主要研究 Spring Boot 方面。原本以为自己一辈子不会做介面,开始接触 Flutter 后觉得写 UI 很好玩,上手后觉得 Flutter 的发展挺好的,所以就决定往 Flutter 走。我觉得还是要先看需求,假如你的工作刚好有需要处理全栈的需求,那用 Flutter 做跨端应用的学习成本是比较低的。

圣佑:每个技术在解决问题的思路是不太一样的,所以我会鼓励大家多接触不同的技术,了解后再选自己喜欢的。这次之所以挑 Flutter 和 Ktor,就是因为这两种技术都能够跨端使用,大家可以依照自己的喜好和熟悉的编程语言来选择。

Q. Ktor 开发的后台应用能最多同时承担多少访问量呢,因为一直在做移动端开发,对后端不是很了解,最近想用 Ktor 来实现 API 做一款独立应用,在这方便比较欠缺。有没有更细致一点的部署,优化的文档呢?官方文档感觉东西还是太基础。

圣佑:一个应用能承担多少访问量取决于怎么撰写以及部署时架构怎么设计,所以没办法直接拿出一个数据来说明。不过 Ktor 在设计上是相对轻量的框架,在性能上会比大型框架好,很适合拿 Ktor 开发 API 或微服务。文档的部份,目前 Ktor 团队正在更新,未来也会增加更多的内容,我也会将这个需求提交给团队参考。

Q. 请问 Ktor 和 Spring Boot 相比有什么优势?

圣佑:Ktor 相比于 Spring Boot 的优势有几个,包括它是 100% 用 Kotlin 实现,所以语法特性会比较符合 Kotlin 开发者的习惯与喜好。它的核心功能比较轻巧,性能较大型框架来得好。不过因为 Ktor 相对是较年轻的框架,所以功能(在 Ktor 称为 Feature)目前相比其他框架较少,一些较为复杂的功能会缺乏开箱即用的方案。我会建议两种框架都玩玩看,就能清楚两者间的差异。

Q. Ktor 能够支持 protobuf 作为传输协议吗?

圣佑:目前 Ktor 还没有支持。不过这个建议已经纪录在 Ktor 团队的 Issue Tracking 上了,假如你也希望 Ktor 在未来能支持这个特性的话,欢迎到 YouTrack 上按赞。按赞数愈高,团队会提高这个工作的优先序。

Q. fromJson 如何快速生成的?

鑫磊:在演示的过程中为了结省打字的时间,所以我是用 IDE 里的 Live Template 来快速生成的。真实开发的时候,我建议大家使用官方推荐的 JSON Serializable 这个库。不过这个库跟自己习惯定义的方式可能不同,比方说在 Key 的处理上预设是用 Lower Camel Case,但我可能想用 Snake Case,因此在使用上要注意一下。

圣佑:Live Template 是 IntelliJ 系列 IDE 都有的功能,Android Studio 因为也是用 IntelliJ 平台实现,所以也有这个功能。你可以设置一个关键字后按 Tab,就可以快速生成一段代码模块,在开发或演示的时候特别好用。

Q. 直播中提到的 Bloc 中,Sink 和 Stream 两个对象它们在功能上有什么侧重点,能简单介绍下吗?为什么要设计成两个对象来实现 bloc?

鑫磊:Sink 和 Stream 都是 StreamController 提供的成员变量,你可以理解方 StreamController 一创建出来后就会有 Sink 和 Stream。当资料通过 Sink、StreamController 及 Stream 后,UI 就会在观察后进行处理,演示里的 StreamBuilder 就是在接到数据后更新 UI,也就完成了状态更新。

Q. Flutter 支持原生操作吗?比如打开摄像头,获取访问权限什么的?

鑫磊:Flutter 为了要跨平台,所以本身的 API 跟平台是无关,所以框架本身不支持原生操作。但实际上 Flutter 有一个平台层,往下可以对接各平台的代码,就可以把这个能力给 Flutter,比如打开摄像头之类的。Flutter 的 Pub.dev 提供了很多库,引入后加一点点代码就能拿到这些原生能力,这些能力都已经封装在 Plugin 里了,有兴趣的话可以上 Pub.dev 上搜索。

Q. Bloc 相对于官方推荐的 Provider,有什么异同和优劣?

鑫磊:我自己两个都有使用,一开始用 Bloc、后来用 Provider、现在又改回 Bloc。Provider 用于单页面共享的场景,尤其是单页面上有很多 Widget,Provider 可以减少深层的传递。Bloc 的好处就是可以通过 Stream 这个基础的对象,给我们一个观察者模式的能力。只要我定义好这个 View 所关心的数据及行为后,就可以完全解耦,释放内存也很简单,所以我现在比较常使用 Bloc。不过 Provider 的问题作者也看到了,所以近期推出新的 Riverpod ,它的好处是不依赖于 Flutter。我自己还没有机会试用,但这个作者出的东西都很不错,跟 Provider 的使用方式也相似,有兴趣的同学可以关注下。

Q. 针对 Flutter 有没有什么好的架构?

鑫磊:照我的理解,架构跟自己的业务比较有关系。比方说对页面刷新及状态管理需求的不同,可能产生出来的架构也不同。只要把 Widget 跟自己的业务分离开,其实跟大家写 Android 或 iOS 也很像,Flutter 的架构可能相对还比较简单。

Q. 刚才老师用到了什么插件生成的 Model?

鑫磊:这个也是跟前面一样用 Live Template 生成的。另外也有一个 JsonToDart 的网站,可以把 JSON 粘贴到里边,就可以生成对应的 Dart Model。但实际上只能简便一部份的工作量,比方说一些成员变量,但有时解析会不成功所以还是要手动调整。

Q. 目前 Flutter 就业形势如何呢?

鑫磊:就我了解大厂纯 Flutter 的职位还是比较少。假如你会 Flutter 加 Android 或 iOS 其中一端的话会比较吃香,像我们滴滴、阿里、腾讯等大企业近期对 Flutter 挺重视的,在招聘时会是很好的加分项。但假如纯 Flutter 的话,可能无法升任工作上全部的需求。

Q. Ktor 在分布式和集群方面有更多的资料吗?

圣佑:目前 Ktor 还没有这方面的文档,我也会将这个需求提交给 Ktor 团队,请他们在后续版本增加这方面的内容。

Q. Flutter 可以与 H5 代码做混合开发吗?

鑫磊:Flutter 有提供 WebView 的功能可以用于混合开发,不过早期我听说有些坑,我自己也没试过。工作上我们团队是用 Native 提供的 H5 能力实现,所以对这一块的支持我还不清楚。

Q. 作为一个 Adroid 开发,想要入门 Flutter,请问是先学 Dart 还是什么,有什么推荐的学习路径和网站的吗?

鑫磊:我个人会推荐 flutter.cn 中文社区网站,上面的文档跟英文是几乎同步的。Google 也有出一套 Flutter 的入门教程以及 Widget 的介绍,也可以通过 Codelabs 里手把手的教程来学习。另外,也可以参考掘金及闲鱼团队的博客,上面有不少进阶的内容。

相信大家看完两人的实作后,就能了解这两种跨平台技术的潜力及好处。而从两人通力合作的过程中,也能一窥前后端串接的技巧,对全端开发会有更深刻的体认。希望本次网络研讨会的内容对大家有帮助,我们未来也会继续针对不同应用场景做分享,敬请期待,我们下次见!

image description

Discover more