閑魚(yú)基于Dart生態(tài)的FaaS前端一體化建設(shè)-創(chuàng)新互聯(lián)

背景

為托克遜等地區(qū)用戶提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及托克遜網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站制作、做網(wǎng)站、托克遜網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

隨著Flutter對(duì)現(xiàn)有業(yè)務(wù)的不斷參透，閑魚(yú)Serverless基建的重心也傾向了dart生態(tài)，先是將dart容器打包到服務(wù)器上，實(shí)現(xiàn)dart編程語(yǔ)言的統(tǒng)一，在統(tǒng)一的容器之上實(shí)現(xiàn)編程框架一體化(nexus、story)，以及后端領(lǐng)域服務(wù)一體化?；赿art生態(tài)下，前端的FaaS在研發(fā)交付其實(shí)并不高效，研發(fā)階段主要面臨的問(wèn)題是：
編程語(yǔ)言不統(tǒng)一：編程語(yǔ)言本身雖然不是大的障礙，但這也確實(shí)給前端開(kāi)發(fā)者增加不少門(mén)檻，而且更重要的是語(yǔ)言背后的生態(tài)、環(huán)境與體系更是一道高高的墻。
工程割裂與背后環(huán)境復(fù)雜：端側(cè)一個(gè)工程，F(xiàn)aaS側(cè)也有一個(gè)獨(dú)立的工程，它們背后都有著自己的一套構(gòu)建、調(diào)試、集成/發(fā)布的工具鏈；除此之外FaaS還有自己配套的環(huán)境、runtime、框架作為支撐。開(kāi)發(fā)者面對(duì)這樣復(fù)雜的FaaS研發(fā)環(huán)境與雙重的研發(fā)工作流是無(wú)法做到高效交付的。

編程語(yǔ)言一體化

Typescript作為Javascript的超集，彌補(bǔ)了Javascript的靜態(tài)類(lèi)型檢查，同時(shí)擴(kuò)展了很多OOP的語(yǔ)法特性，使得TS跟dart在語(yǔ)法特性上有非常多相似的地方，為后面的轉(zhuǎn)換提供了可能與便利。要實(shí)現(xiàn)語(yǔ)言層面轉(zhuǎn)換背后都會(huì)有一個(gè)小型的編譯器在支撐著，不過(guò)幸運(yùn)的是Typescript官方已經(jīng)提供語(yǔ)法解析器，通過(guò)它我們很容易就拿到一份可靠的AST，所以我們只需要實(shí)現(xiàn)一個(gè)dart generator就行了。生成器大致可以分為四個(gè)層面的工作：

• 基礎(chǔ)語(yǔ)法轉(zhuǎn)換

• 原生方法差異轉(zhuǎn)換

• 業(yè)務(wù)框架橋接

• 依賴庫(kù)與頭文件橋接

基礎(chǔ)語(yǔ)法轉(zhuǎn)換

這部分很好理解，就是最基本的語(yǔ)法層面轉(zhuǎn)換，用個(gè)最簡(jiǎn)單的例子看下。

原生方法差異轉(zhuǎn)換

兩種語(yǔ)言在內(nèi)置原生方法上也有很大區(qū)別，舉個(gè)例子：可以看到下面數(shù)組的實(shí)例方法在兩種語(yǔ)言體系上是不一致的，除了數(shù)組插入還有很多很多原生方法是不一致的。當(dāng)然也沒(méi)太必要被這個(gè)難以想象的數(shù)量嚇到，大多數(shù)情況：90%的場(chǎng)景只會(huì)用到那10%的方法，完成了10%的轉(zhuǎn)換就能cover到90%的場(chǎng)景。

// ts
list2.push(10)
// dart
list2.add(10)

要實(shí)現(xiàn)系統(tǒng)方法的差異轉(zhuǎn)化首先要識(shí)別出該方法是來(lái)自于哪個(gè)類(lèi)，比如說(shuō) list2.push(10) 我不可能只檢查 push ，因?yàn)殡S便一個(gè)類(lèi)/對(duì)象都可以實(shí)現(xiàn)一個(gè)push方法。我們必須識(shí)別出 list2.push 的 push 屬于 Array.push，別忘了整個(gè)typescript編譯器中占比大的類(lèi)型檢查器 ts.TypeChecker ，它可以很好的幫我們解決這個(gè)問(wèn)題。大致思路如下：

業(yè)務(wù)框架橋接

在完成上面兩塊能力轉(zhuǎn)換后，常規(guī)裸寫(xiě)一段邏輯進(jìn)行轉(zhuǎn)換問(wèn)題是不大的；但業(yè)務(wù)是不可能裸寫(xiě)，業(yè)務(wù)需要框架，需要借助框架進(jìn)行通訊、與容器打交道。需要借助框架進(jìn)行業(yè)務(wù)抽象，更好的組織、管理業(yè)務(wù)邏輯。我們來(lái)看個(gè)例子：

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

上面的這段代碼是用于在dart側(cè)進(jìn)行內(nèi)部服務(wù)請(qǐng)求的，從代碼表明我們可以獲取到三部分信息：

1. 有一個(gè)HsfServices的類(lèi)

2. HsfServices有一個(gè)同步返回結(jié)果的request方法，接收兩個(gè)參數(shù)

3. 最終返回DartMtopResult的數(shù)據(jù)結(jié)構(gòu)

我們?cè)俜幌?request 的實(shí)現(xiàn)與 DartMtopResult 的申明：

// DartMtopResult.dart
classDartMtopResult<T> implements xxxx {
  T data;
bool success;
String errMsg;
String errCode;
// more code hidden
}
// HsfServices.dart
classHsfServices{
// more code hidden
staticFuture<DartMtopResult<String>> request(String moduletName, String parameter) async{
// more code hidden
}
// more code hidden
}

就看這么多足夠了，打個(gè)比方如果我希望在typescript側(cè)編寫(xiě)一個(gè)能用 HsfServices.request 發(fā)請(qǐng)求的ts代碼且不報(bào)錯(cuò)，那應(yīng)該怎么做呢？像下面這樣申明一個(gè)：

// HsfServices.d.ts
export declare classHsfServices{
static request(moduletName: string, parameter: string): Promise<DartMtopResult<string>>;
}
// DartMtopResult.d.ts
export declare classDartMtopResult<T> {
  data: T;
  success: boolean;
  errMsg: string;
  errCode: string;
}
// business.ts
import{HsfServices} from"HsfServices.d.ts"
import{DartMtopResult} from"DartMtopResult.d.ts"
const result: DartMtopResult<string>= awaitHsfServices.request<DartMtopResult<string>>('recycleGet', parameter);

非常簡(jiǎn)單就能讓業(yè)務(wù)邏輯正常寫(xiě)下去并且不報(bào)錯(cuò)。但你肯定會(huì)說(shuō)這樣的代碼也沒(méi)法運(yùn)行起來(lái)，是的，但我并不需要上面代碼運(yùn)行起來(lái)，我需要的是將它轉(zhuǎn)成dart，并能在dart runtime中運(yùn)行就可以了。大致的橋接思路如下：

依賴庫(kù)與頭文件橋接

這部分工作是從業(yè)務(wù)框架橋接中衍生出來(lái)的，我們還是用一個(gè)例子來(lái)說(shuō)明一下問(wèn)題產(chǎn)生的原因。ts源碼如下：

// business.tsimport {HsfServices} from "@ali/faas-hsf"import {DartMtopResult} from "@ali/faas-mtop-result"const result: DartMtopResult<string> = await HsfServices.request<DartMtopResult<string>>('recycleGet', parameter);

dart源碼如下：

// business.dartimport 'package:hsf_services/hsf_services.dart';import 'package:dart_mtop_result/dart_mtop_result.dart';DartMtopResult<String> result = await HsfServices.request(moduleName, parameter);

可以看到上面邏輯除了發(fā)請(qǐng)求部分要轉(zhuǎn)成dart，還有業(yè)務(wù)引用頭文件需要橋接過(guò)去，而頭文件的引入通常是靠pub依賴包(pubspec.yaml)安裝進(jìn)來(lái)的，就意味著轉(zhuǎn)換器需要拿到 @ali/faas-hsf 對(duì)應(yīng)dart側(cè)的pub包與引入頭文件。我們的解決思路大致是這樣的：在 @ali/faas-hsf 模塊中放入 faas.yaml 文件來(lái)指定對(duì)應(yīng)的映射關(guān)系。

@ali/faas-hsf
|--lib/
|--faas.yaml
|--package.json
// faas.yaml
faas_pub:
    # 映射的dart側(cè)依賴包
    hsf_services: ^1.1.7
    # 映射引入頭文件
    index: hsf_services.dart

研發(fā)過(guò)程中再通過(guò)工程腳手架來(lái)自動(dòng)完成這之間的映射關(guān)系的提?。侯^文件映射與依賴包映射。頭文件映射最終會(huì)交給轉(zhuǎn)換器，而依賴包映射會(huì)交給背后自動(dòng)維護(hù)著的dart工程（后面會(huì)提到背后自動(dòng)維護(hù)的dart工程）。大概的思路如下圖所示：

研發(fā)工程一體化編程語(yǔ)言一體化只是整個(gè)FaaS一體化研發(fā)的第一步，也只有統(tǒng)一了編程語(yǔ)言之后，背后的生態(tài)(npm)、工具鏈(build)與工程才可能一體化。我們看下現(xiàn)狀：開(kāi)發(fā)者面對(duì)的是兩個(gè)割裂的工程，兩套不同的環(huán)境、生態(tài)。這正如文章一開(kāi)始所說(shuō)的：編程語(yǔ)言本身不是大的障礙，但語(yǔ)言背后的環(huán)境與生態(tài)卻是一道高高的墻。在我們統(tǒng)一編程語(yǔ)言之后，研發(fā)工程一體化就變得可行了。

正如上圖所示，F(xiàn)aaS工程本身的復(fù)雜在于整個(gè)工程需要運(yùn)行在一個(gè)本地容器之中，因?yàn)槿萜饕獮楣こ烫峁﹔untime、相應(yīng)的工具鏈、框架依賴等能力。所以本地容器本身是必不可少的，我們能做的只是盡可能讓開(kāi)發(fā)者無(wú)感容器的存在；除此之外還要對(duì)兩個(gè)工程的邏輯做一定的融合，大致可以抽象成四部分工作：研發(fā)代碼層面融合代碼層面融合包括兩部分：業(yè)務(wù)邏輯融合、業(yè)務(wù)邏輯所依賴編程框架融合。分別體現(xiàn)在 faas_src 存放業(yè)務(wù)邏輯的ts版， package.json 存放業(yè)務(wù)邏輯所依賴的編程框架（前面我們介紹到業(yè)務(wù)框架橋接最終就體現(xiàn)在端側(cè)的依賴包上）

├── faas_pub.yaml├── faas_src│   └── Home│       └── index.ts├── package.json├── src│   ├── components│   └── pages│       └── Home│           ├── index.css│           └── index.js└── README.md

FaaS側(cè)的工程黑盒化使端側(cè)腳手架全權(quán)接管FaaS側(cè)的工程初始化、熱部署、調(diào)試信息，暴露出來(lái)給開(kāi)發(fā)者的只有一套工具鏈，只有兩個(gè)指令 init  dev ，讓開(kāi)發(fā)者0門(mén)檻初始化出一套統(tǒng)一而可靠環(huán)境的FaaS工程。

對(duì)接編譯器進(jìn)行研發(fā)實(shí)時(shí)編譯

這部分主要負(fù)責(zé)對(duì)接轉(zhuǎn)換器實(shí)時(shí)將ts編譯成dart，并同步到黑盒中的FaaS工程。在實(shí)時(shí)編譯過(guò)程有兩部分內(nèi)容：一部分是純ts邏輯編譯成dart，另一部分是依賴包的同步安裝，其中 faas_pub.yaml 由腳手架通過(guò)探測(cè)端側(cè)package.json中的faas依賴包來(lái)進(jìn)行提取生成的，并不需要人工維護(hù)。

串聯(lián)調(diào)試階段的編譯流從保存每一個(gè)改動(dòng)到在瀏覽器上能成功發(fā)起一個(gè)faas函數(shù)請(qǐng)求，這之間大致經(jīng)過(guò)這些步驟：監(jiān)控改動(dòng)、編譯代碼、產(chǎn)物部署的流，由統(tǒng)一的端側(cè)腳手架進(jìn)行串聯(lián)起來(lái)。
效果
經(jīng)過(guò)編程語(yǔ)言的一體化后，我們不僅為開(kāi)發(fā)者提供一種熟悉的技術(shù)棧，也為后面工程一體化提供了可能性；再經(jīng)過(guò)工程一體化后，我們?yōu)殚_(kāi)發(fā)者解決了工程割裂，解決背后復(fù)雜的FaaS本地運(yùn)行環(huán)境，帶來(lái)與原研發(fā)模式基本一致的研發(fā)體驗(yàn)。
后續(xù)一體化之路還很多要去建設(shè)的，調(diào)試、發(fā)布、回滾等等；除此之外，F(xiàn)aaS畢竟還是運(yùn)行在后端，最終通過(guò)網(wǎng)絡(luò)協(xié)議與端側(cè)通訊，那在兩份代碼中必然存在兩份數(shù)據(jù)結(jié)構(gòu)申明，兩套封包解包邏輯；這為后面數(shù)據(jù)結(jié)構(gòu)的一體化與自動(dòng)化建設(shè)提供了很好的發(fā)揮余地。

閑魚(yú)技術(shù)團(tuán)隊(duì)不僅是阿里巴巴集團(tuán)旗下閑置交易社區(qū)的創(chuàng)造者，更是移動(dòng)與高并發(fā)大數(shù)據(jù)應(yīng)用新技術(shù)的引導(dǎo)者與創(chuàng)新者。我們與Google Flutter/Dart小組密切合作，為社區(qū)貢獻(xiàn)了多個(gè)高star的項(xiàng)目和大量PR。我們正在積極探索深度學(xué)習(xí)和視覺(jué)技術(shù)在互動(dòng)、交易、社區(qū)場(chǎng)景的創(chuàng)新應(yīng)用。閑魚(yú)技術(shù)與集團(tuán)中間件團(tuán)隊(duì)共同打造的FaaS平臺(tái)每天支持?jǐn)?shù)以千萬(wàn)級(jí)用戶的高并發(fā)訪問(wèn)場(chǎng)景。 

就是現(xiàn)在！客戶端／服務(wù)端java／架構(gòu)／前端／質(zhì)量工程師面向社會(huì)+校園招聘，base杭州阿里巴巴西溪園區(qū)，一起做有創(chuàng)想空間的社區(qū)產(chǎn)品、做深度頂級(jí)的開(kāi)源項(xiàng)目，一起拓展技術(shù)邊界成就極致！

當(dāng)前文章：閑魚(yú)基于Dart生態(tài)的FaaS前端一體化建設(shè)-創(chuàng)新互聯(lián)
轉(zhuǎn)載來(lái)于：http://www.muchs.cn/article22/coiijc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、軟件開(kāi)發(fā)、自適應(yīng)網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)