快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线：028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后，网站问题一站解决

闲鱼基于Dart生态的FaaS前端一体化建设-创新互联

背景

为托克逊等地区用户提供了全套网页设计制作服务，及托克逊网站建设行业解决方案。主营业务为网站制作、做网站、托克逊网站设计，以传统方式定制建设网站，并提供域名空间备案等一条龙服务，秉承以专业、用心的态度为用户提供真诚的服务。我们深信只要达到每一位用户的要求，就会得到认可，从而选择与我们长期合作。这样，我们也可以走得更远！

随着Flutter对现有业务的不断参透，闲鱼Serverless基建的重心也倾向了dart生态，先是将dart容器打包到服务器上，实现dart编程语言的统一，在统一的容器之上实现编程框架一体化(nexus、story)，以及后端领域服务一体化。基于dart生态下，前端的FaaS在研发交付其实并不高效，研发阶段主要面临的问题是：
编程语言不统一：编程语言本身虽然不是大的障碍，但这也确实给前端开发者增加不少门槛，而且更重要的是语言背后的生态、环境与体系更是一道高高的墙。
工程割裂与背后环境复杂：端侧一个工程，FaaS侧也有一个独立的工程，它们背后都有着自己的一套构建、调试、集成/发布的工具链；除此之外FaaS还有自己配套的环境、runtime、框架作为支撑。开发者面对这样复杂的FaaS研发环境与双重的研发工作流是无法做到高效交付的。

编程语言一体化

Typescript作为Javascript的超集，弥补了Javascript的静态类型检查，同时扩展了很多OOP的语法特性，使得TS跟dart在语法特性上有非常多相似的地方，为后面的转换提供了可能与便利。要实现语言层面转换背后都会有一个小型的编译器在支撑着，不过幸运的是Typescript官方已经提供语法解析器，通过它我们很容易就拿到一份可靠的AST，所以我们只需要实现一个dart generator就行了。生成器大致可以分为四个层面的工作：

  • 基础语法转换

  • 原生方法差异转换

  • 业务框架桥接

  • 依赖库与头文件桥接

基础语法转换

这部分很好理解，就是最基本的语法层面转换，用个最简单的例子看下。
闲鱼基于Dart生态的FaaS前端一体化建设

原生方法差异转换

两种语言在内置原生方法上也有很大区别，举个例子：可以看到下面数组的实例方法在两种语言体系上是不一致的，除了数组插入还有很多很多原生方法是不一致的。当然也没太必要被这个难以想象的数量吓到，大多数情况：90%的场景只会用到那10%的方法，完成了10%的转换就能cover到90%的场景。

  1. // ts
  2. list2.push(10)
  4. // dart
  5. list2.add(10)

要实现系统方法的差异转化首先要识别出该方法是来自于哪个类，比如说 list2.push(10) 我不可能只检查 push ，因为随便一个类/对象都可以实现一个push方法。我们必须识别出 list2.push 的 push 属于 Array.push，别忘了整个typescript编译器中占比大的类型检查器 ts.TypeChecker ，它可以很好的帮我们解决这个问题。大致思路如下：
闲鱼基于Dart生态的FaaS前端一体化建设

业务框架桥接

在完成上面两块能力转换后，常规裸写一段逻辑进行转换问题是不大的；但业务是不可能裸写，业务需要框架，需要借助框架进行通讯、与容器打交道。需要借助框架进行业务抽象，更好的组织、管理业务逻辑。我们来看个例子：

DartMtopResult result = awaitHsfServices.request(moduleName, parameter);

上面的这段代码是用于在dart侧进行内部服务请求的，从代码表明我们可以获取到三部分信息：

  1. 有一个HsfServices的类

  2. HsfServices有一个同步返回结果的request方法，接收两个参数

  3. 最终返回DartMtopResult的数据结构

我们再翻一下 request 的实现与 DartMtopResult 的申明：

  1. // DartMtopResult.dart
  2. classDartMtopResult implements xxxx {
  3.   T data;
  4. bool success;
  5. String errMsg;
  6. String errCode;
  8. // more code hidden
  9. }
  11. // HsfServices.dart
  12. classHsfServices{
  13. // more code hidden
  14. staticFuture> request(String moduletName, String parameter) async{
  15. // more code hidden
  16. }
  17. // more code hidden
  18. }

就看这么多足够了，打个比方如果我希望在typescript侧编写一个能用 HsfServices.request 发请求的ts代码且不报错，那应该怎么做呢？像下面这样申明一个：

  1. // HsfServices.d.ts
  2. export declare classHsfServices{
  3. static request(moduletName: string, parameter: string): Promise>;
  4. }
  5. // DartMtopResult.d.ts
  6. export declare classDartMtopResult {
  7.   data: T;
  8.   success: boolean;
  9.   errMsg: string;
  10.   errCode: string;
  11. }
  13. // business.ts
  14. import{HsfServices} from"HsfServices.d.ts"
  15. import{DartMtopResult} from"DartMtopResult.d.ts"
  16. const result: DartMtopResult= awaitHsfServices.request>('recycleGet', parameter);

非常简单就能让业务逻辑正常写下去并且不报错。但你肯定会说这样的代码也没法运行起来，是的，但我并不需要上面代码运行起来，我需要的是将它转成dart，并能在dart runtime中运行就可以了。大致的桥接思路如下：
闲鱼基于Dart生态的FaaS前端一体化建设

依赖库与头文件桥接

这部分工作是从业务框架桥接中衍生出来的，我们还是用一个例子来说明一下问题产生的原因。ts源码如下：
// business.tsimport {HsfServices} from "@ali/faas-hsf"import {DartMtopResult} from "@ali/faas-mtop-result"const result: DartMtopResult = await HsfServices.request>('recycleGet', parameter);
dart源码如下：
// business.dartimport 'package:hsf_services/hsf_services.dart';import 'package:dart_mtop_result/dart_mtop_result.dart';DartMtopResult result = await HsfServices.request(moduleName, parameter);
可以看到上面逻辑除了发请求部分要转成dart，还有业务引用头文件需要桥接过去，而头文件的引入通常是靠pub依赖包(pubspec.yaml)安装进来的，就意味着转换器需要拿到 @ali/faas-hsf 对应dart侧的pub包与引入头文件。我们的解决思路大致是这样的：在 @ali/faas-hsf 模块中放入 faas.yaml 文件来指定对应的映射关系。
  1. @ali/faas-hsf
  2. |--lib/
  3. |--faas.yaml
  4. |--package.json
  6. // faas.yaml
  7. faas_pub:
  8.     # 映射的dart侧依赖包
  9.     hsf_services: ^1.1.7
  10.     # 映射引入头文件
  11.     index: hsf_services.dart
研发过程中再通过工程脚手架来自动完成这之间的映射关系的提取：头文件映射与依赖包映射。头文件映射最终会交给转换器，而依赖包映射会交给背后自动维护着的dart工程（后面会提到背后自动维护的dart工程）。大概的思路如下图所示：
闲鱼基于Dart生态的FaaS前端一体化建设
研发工程一体化编程语言一体化只是整个FaaS一体化研发的第一步，也只有统一了编程语言之后，背后的生态(npm)、工具链(build)与工程才可能一体化。我们看下现状：开发者面对的是两个割裂的工程，两套不同的环境、生态。这正如文章一开始所说的：编程语言本身不是大的障碍，但语言背后的环境与生态却是一道高高的墙。在我们统一编程语言之后，研发工程一体化就变得可行了。
闲鱼基于Dart生态的FaaS前端一体化建设
正如上图所示，FaaS工程本身的复杂在于整个工程需要运行在一个本地容器之中，因为容器要为工程提供runtime、相应的工具链、框架依赖等能力。所以本地容器本身是必不可少的，我们能做的只是尽可能让开发者无感容器的存在；除此之外还要对两个工程的逻辑做一定的融合，大致可以抽象成四部分工作：研发代码层面融合代码层面融合包括两部分：业务逻辑融合、业务逻辑所依赖编程框架融合。分别体现在 faas_src 存放业务逻辑的ts版， package.json 存放业务逻辑所依赖的编程框架（前面我们介绍到业务框架桥接最终就体现在端侧的依赖包上）
├── faas_pub.yaml├── faas_src│   └── Home│       └── index.ts├── package.json├── src│   ├── components│   └── pages│       └── Home│           ├── index.css│           └── index.js└── README.md
FaaS侧的工程黑盒化使端侧脚手架全权接管FaaS侧的工程初始化、热部署、调试信息，暴露出来给开发者的只有一套工具链，只有两个指令 init  dev ，让开发者0门槛初始化出一套统一而可靠环境的FaaS工程。
闲鱼基于Dart生态的FaaS前端一体化建设
对接编译器进行研发实时编译
这部分主要负责对接转换器实时将ts编译成dart，并同步到黑盒中的FaaS工程。在实时编译过程有两部分内容：一部分是纯ts逻辑编译成dart，另一部分是依赖包的同步安装，其中 faas_pub.yaml 由脚手架通过探测端侧package.json中的faas依赖包来进行提取生成的，并不需要人工维护。
闲鱼基于Dart生态的FaaS前端一体化建设串联调试阶段的编译流从保存每一个改动到在浏览器上能成功发起一个faas函数请求，这之间大致经过这些步骤：监控改动、编译代码、产物部署的流，由统一的端侧脚手架进行串联起来。
闲鱼基于Dart生态的FaaS前端一体化建设效果
经过编程语言的一体化后，我们不仅为开发者提供一种熟悉的技术栈，也为后面工程一体化提供了可能性；再经过工程一体化后，我们为开发者解决了工程割裂，解决背后复杂的FaaS本地运行环境，带来与原研发模式基本一致的研发体验。
闲鱼基于Dart生态的FaaS前端一体化建设后续一体化之路还很多要去建设的，调试、发布、回滚等等；除此之外，FaaS毕竟还是运行在后端，最终通过网络协议与端侧通讯，那在两份代码中必然存在两份数据结构申明，两套封包解包逻辑；这为后面数据结构的一体化与自动化建设提供了很好的发挥余地。

闲鱼技术团队不仅是阿里巴巴集团旗下闲置交易社区的创造者，更是移动与高并发大数据应用新技术的引导者与创新者。我们与Google Flutter/Dart小组密切合作，为社区贡献了多个高star的项目和大量PR。我们正在积极探索深度学习和视觉技术在互动、交易、社区场景的创新应用。闲鱼技术与集团中间件团队共同打造的FaaS平台每天支持数以千万级用户的高并发访问场景。 

就是现在！客户端／服务端java／架构／前端／质量工程师面向社会+校园招聘，base杭州阿里巴巴西溪园区，一起做有创想空间的社区产品、做深度顶级的开源项目，一起拓展技术边界成就极致！


当前文章：闲鱼基于Dart生态的FaaS前端一体化建设-创新互联
文章起源：http://6mz.cn/article/coiijc.html

其他资讯