Archsummit 2019重磅分享｜闲鱼Flutter＆FaaS云端一体化架构

作者：闲鱼技术－国有

我们提供的服务有：做网站、网站建设、微信公众号开发、网站优化、网站认证、富平ssl等。为1000多家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的富平网站制作公司

国有，闲鱼架构团队负责人。在7月13号落幕的2019年Archsummit峰会上就近一年来闲鱼在FlutterFaaS一体化项目上的 探索 和实践进行了分享。

随着无线，IoT的发展，5G的到来，移动研发越发向多端化发展。传统的基于Native＋Web＋服务端的开发方式，研发效率低下，显然已经无法适应发展需要。

我们希望 探索 闲鱼这样规模的独立APP的高效研发架构。主要思路是围绕Flutter解决多端问题，并使Flutter与FaaS等无服务容能力打通，形成云端一体化的研发能力，支持一云多端的发展需要。在某些场景已经取得效果，希望分享过程中的思考，与大家交流。

闲鱼选择Flutter主要是出于高性能的考虑。Flutter高性能主要来源于2个原因：

更多比较：

没有银弹的解决方案，Flutter与RN各有优点。如何选择因素很多，关键看如何取舍，举个例子：

云端技术栈的打通，是减少协同的不错的解法。以往前端＋Node.js的一体化方案大家应该不会陌生，然而如果端侧使用了Flutter，那云侧Dart自然是第一选择。

FaaS的本质是运行在云端，那Dart适合用在云/Server上吗？

Dart语言早于Flutter，在最初的设计上，Dart就可以用于Web、Server。Dart具备一些服务端语言的特点：

闲鱼首先尝试将Dart作为普通的Server，替代传统的Java　Server，然后再将Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。

闲鱼在Dart　Server方面的建设思路：

开发期：

运行期：

上述内容实现了FlutterDart FaaS的技术栈的统一，但仅技术栈统一还远远不够，端、云的同学仍然无法真正互补和一体化打通，原因在于还有更多深入问题需要考虑：

面向这些问题，闲鱼的解法思路：

案例一，一体化在资源均衡方面的体现。在近期的一个项目中，云端一体化使原本2个月的项目时间，减少了20天。

案例二，一体化在业务闭环方面的体现。负责增长的一位开发同学，专注在增长业务上，在合适的情况下为合适的人投放合适的内容，以此带来用户的增长和活跃效果。一体化的方式下，可以统一云、端的切面，业务研发不再受云、端的限制。

一体化是建设高效研发框架的方向，并不是所有场景都需要一体化的开发，但一体化的Flutter、FaaS等技术组件，可以独立使用，也会带来效率提升，并且与原有的开发模式兼容。从一体化的思路去建设，可以使整体架构体系更加一致，也有机会做一体的架构沉淀。

未来闲鱼希望在一体化上做更多尝试和深入 探索 ，包括一体化工具、一体化业务平台、数据化智能化等方向。

闲鱼前端基于serverless的一种多端开发解决方案

前端的发展太快了，前端框架和技术的发展也层出不穷，还包括不同智能设备的出现，对前端开发同学来说是个很大的跳转，简单列举下：

这样就滋生了一些问题，比如我要开发一个通用的页面，兼容不同的端侧和 小程序 ，显然目前是做不到的，我们只能开发多套页面去适配不同的场景，这样的话成本就太高了。

很多同学都在尝试解决这个问题，也催生了类似taro这样的多端统一开发框架，这是一个好的解决方案，但是比较被动，缺乏一定的扩展性。

这篇文章我们要探讨的是，看能不能换个角度去解决这个问题，提升开发效率。

ViewModel

当我们在开发一个页面的时候，不管用的是哪一种框架，通常都会抽象出一层viewmodel层，它主要有2个作用

从上图中我们可以看出，viewmodel是一段独立的通用代码逻辑，起到了承前启后的作用。它和view层关系更加紧密，因此通常会放在前端测。

既然viewmodel是独立的，那我们能不能把它放在后端呢？这样一个最大的好处就是viewmodel可以进行复用，不需要在重复编写，而且只需要改动一个viewmodel，就可以全量生效。

似乎是一个很美好的想法，但是这部分代码由谁去开发呢，总不可能寄希望于后端同学吧，当然只能是我们自己，也感谢于serverless架构的出现，让这件事情变成了可能。

有些同学可能会问，既然viewmodel后移了，那view呢？后续会考虑结合我们的ui2code技术，那真的就比较完美了。

什么是serverless

架构上，我们可以把serverless分为FaaS和BaaS。

FaaS是用于创建、运行、管理函数服务的计算平台，它支持多种开发语言，比如java、nodejs、dart等，这有利于不同端侧的开发同学介入开发。FaaS是基于事件驱动的思想，只有当一个函数被事件触发时才会占用服务器资源执行，不然都是无需占用服务器资源的。

BaaS提供了用于函数调用的第三方基础服务，比如身份校验、日志、数据库等，它是由服务商直接提供，开发者无需关系实现，直接调用即可。

业务落地

我们是通过gaia平台开发后端接口，gaia可以理解为上文提到的FaaS平台。

日常开发中有这样一个需求，下面是这个需求的一个页面。

因为这个页面上的数据比较多，先把它切分成一个个小的模块，后台返回数据的时候也根据模块来返回数据。

我们是根据viewmodel来设计接口，首先肯定有一个首屏数据接口；然后是页面上的交互，比如切换卡片、切换芝麻信用按钮，切换会引起页面数据变化，我们可以统一封装一个页面更新的接口；最后是一个开通的接口。

后端接口

前后端交互最重要的数据结构的设计，我们省略了中间的业务逻辑处理，看下接口的数据结构。

首屏接口返回的数据主要有几个特征：

更新接口的返回数据结构和首屏接口类似，但是入参有所不同，主要包括2个字段：

前端处理

从后端返回的数据可以看到，数据是及其详细的，无需我们做任何的业务逻辑处理，直接映射到页面即可。这样，前端已经变成了很薄的一层数据，没有任务的业务逻辑处理，变的很简单，当需要迁移到其他端时，只需要迁移视图层即可。当有任何的业务变动时，只需要修改后端的接口，就能生效。

收益与总结

通过具体的实践，我们发现，对于前端开发同学来说，变的简单了，开发效率有很大的提升，前端同学甚至都不需要去理解具体的业务逻辑，就能完成页面的开发。而且，提取的viewmodel可以复用到不同的端侧，设置还包括native端。我们还可以将viewmodel拆分成更小粒度的viewmodel，方便在不同的页面接口中进行复用。我们有同学还在FaaS侧基于redux的思想封装了一个通用的状态管理框架，规范了前后端的交互。

后面， 还有一些问题待我们去解决，比如开发成本、viewmodel的逻辑拆分、具体接口问题定位等。

闲鱼团队是Flutter+Dart FaaS前后端一体化新技术的行业领军者，就是现在！ 客户端／服务端java／架构／前端／质量工程师 面向 社会 招聘，base杭州阿里巴巴西溪园区，一起做有创想空间的社区产品、做深度顶级的开源项目，一起拓展技术边界成就极致！

*投喂简历给小闲鱼→ guicai.gxy@alibaba-inc .com

开源项目、峰会直击、关键洞察、深度解读

请认准 闲鱼技术

开源精粹（二）！22个实用、有趣的开源项目

作为一名开源爱好者，发掘优秀的开源项目是一件非常有趣的事情。在第一期中，我分享了单页个人网站模板、组装式 Flutter 应用框架、PHP 客户端库、Java 诊断工具等一些实用的库和工具。本期依旧会为大家分享一些前端、后端、移动开发的相关工具，希望你能“淘”到适合自己的工具。

1.Vue-EasyTable

Vue-EasyTable 是一款基于 Vue2.x 的 table 组件，具备自适应、表头与列固定、自定义单元格样式、自定义 Loading 等功能。

2.React-Calendar

这是一款具备原生日期格式的日历组件。它不依赖 Moment.js，支持日期选择范围，涵盖了各国语言，开箱即用。

3.Matter

CSS 实现的 Material 组件合集项目，作者已将部分作品开源，效果可以在 CodePen 上查看。

4.Revery

Revery 是一款用于构建高性能、跨平台桌面应用的框架。它类似于加速版的原生 Electron，除了拥有类似 React / Redux 的库，还具备 GPU 加速渲染功能，其内置的编译器速度也相当快。

5.Web Accessibility Guide

这是一个精选了 Web 可访问性贴士、技巧和最佳实践的开源项目，你将会学习到一些改善 Web 可访问性的实用做法。

1.SOFAJRaft

SOFAJRaft 是蚂蚁金服开源的生产级 Java Raft 算法库，它基于 Raft 一致性算法的生产级高性能 Java 实现，支持 MULTI-RAFT-GROUP，适用于高负载低延迟的场景，易于使用。

2. Dragonwell

阿里开源了 OpenJDK 发行版 Dragonwell，它提供长期支持，包括性能增强和安全修复。在数据中心大规模 Java 应用部署情况下，可以大幅度提高稳定性、效率以及性能。

3.Lawoole

Lawoole 是一款基于 Laravel 和 Swoole 的高性能 PHP 框架。它兼具了 Laravel 的特点，还解决了其功能背后的性能问题。同时，你还能感受到与 Laravel 一样的编码体验。

4.AntNest

AntNest 是一个简洁、快速的异步爬虫框架。它仅有 600 行代码，基于 Python 3.6+.

5.PHP-Awesome

这个仓库汇集了 PHP 优秀的资源，供你查询和参考。

1.FlutterBoost

FlutterBoost 是闲鱼开源的新一代 Flutter-Native 混合解决方案。它能够帮你处理页面的映射和跳转，你只需要关心页面的名字和参数即可。

2.MyLayout

MyLayout 是一套 iOS 界面视图布局框架，可谓 iOS 下的界面布局利器。它集成了 iOS Autolayout、Size Classes、Android 的 5 大布局体系、HTML/CSS 的浮动定位技术以及 Flex-Box 和 Bootstrap 框架等主流的平台的界面布局功能，并提供了一套简单、完备的多屏幕尺寸适配的解决方案。

3.SegementSlide

SegementSlide 是一个 iOS UI 库，它具备完整的滑滚及切换组件，旨在解决多层 UIScrollView 嵌套滚动的问题。

1.DevHub

DevHub 是一款跨平台的 GitHub 通知管理客户端，支持 Android、 iOS、网页和桌面上使用，帮助你便捷的接收 GitHub 各类通知。

2.Reqman

Reqman 是一个帮助后端工程师进行 API 测试的工具，同时也是一个基于 Node.js 的爬虫工具。

3.FreeCodeCamp

说到 FreeCodeCamp，或许大家不会陌生，而这个项目就是他们建立的开源课程和相应的代码库。网站提供了 6 大认证课程，也涉及了全栈开发认证。如果你感兴趣，不妨了解下。

4.Gitter

Gitter 是 GitHub 小程序客户端，作者采用 Taro 框架 + Taro UI 进行开发，而小程序内数据则来自 GitHub Api V3.

5.Awesome Podcasts

这个项目收集了各类实用的播客，涵盖了主流的编程语言，希望对你提升技术水平有所帮助。

6.编程图书大全

书籍不光能在你迷茫的时候，给予你答案，还能在你提升技能的时候，给予你帮助。这个仓库收集了众多编程图书，涉及主流编程语言、人工智能、算法、Linux、大数据等。看看，有木有你需要的。

7.VS Code Netease Music

很多开发者喜欢边写代码，边听音乐，VS Code Netease Music 这个插件就能满足你在 VS Code 上听歌的愿望。它使用 Webview 实现，不依赖命令行播放器。

Star-Battle

Star-Battle 是一款使用 JavaScript ES6、Canvas 开发的飞船射击类 游戏 。来 Enjoy 吧。

注：

如需转载，烦请按下方注明出处信息，谢谢！

新闻名称：闲鱼flutter模板,闲鱼放弃 flutter
当前链接：http://ybzwz.com/article/dscdojp.html