Archsummit 2019重磅分享｜閑魚Flutter＆FaaS云端一體化架構(gòu)

作者：閑魚技術(shù)－國有

我們提供的服務(wù)有：做網(wǎng)站、網(wǎng)站建設(shè)、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、富平ssl等。為1000多家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的富平網(wǎng)站制作公司

國有，閑魚架構(gòu)團(tuán)隊(duì)負(fù)責(zé)人。在7月13號落幕的2019年Archsummit峰會上就近一年來閑魚在FlutterFaaS一體化項(xiàng)目上的 探索 和實(shí)踐進(jìn)行了分享。

隨著無線，IoT的發(fā)展，5G的到來，移動研發(fā)越發(fā)向多端化發(fā)展。傳統(tǒng)的基于Native＋Web＋服務(wù)端的開發(fā)方式，研發(fā)效率低下，顯然已經(jīng)無法適應(yīng)發(fā)展需要。

我們希望 探索 閑魚這樣規(guī)模的獨(dú)立APP的高效研發(fā)架構(gòu)。主要思路是圍繞Flutter解決多端問題，并使Flutter與FaaS等無服務(wù)容能力打通，形成云端一體化的研發(fā)能力，支持一云多端的發(fā)展需要。在某些場景已經(jīng)取得效果，希望分享過程中的思考，與大家交流。

閑魚選擇Flutter主要是出于高性能的考慮。Flutter高性能主要來源于2個原因：

更多比較：

沒有銀彈的解決方案，F(xiàn)lutter與RN各有優(yōu)點(diǎn)。如何選擇因素很多，關(guān)鍵看如何取舍，舉個例子：

云端技術(shù)棧的打通，是減少協(xié)同的不錯的解法。以往前端＋Node.js的一體化方案大家應(yīng)該不會陌生，然而如果端側(cè)使用了Flutter，那云側(cè)Dart自然是第一選擇。

FaaS的本質(zhì)是運(yùn)行在云端，那Dart適合用在云/Server上嗎？

Dart語言早于Flutter，在最初的設(shè)計(jì)上，Dart就可以用于Web、Server。Dart具備一些服務(wù)端語言的特點(diǎn)：

閑魚首先嘗試將Dart作為普通的Server，替代傳統(tǒng)的Java　Server，然后再將Dart容器嵌入到FaaS容器中。建立Dart Server能力是第一步，也是主要的工作量所在。

閑魚在Dart　Server方面的建設(shè)思路：

開發(fā)期：

運(yùn)行期：

上述內(nèi)容實(shí)現(xiàn)了FlutterDart FaaS的技術(shù)棧的統(tǒng)一，但僅技術(shù)棧統(tǒng)一還遠(yuǎn)遠(yuǎn)不夠，端、云的同學(xué)仍然無法真正互補(bǔ)和一體化打通，原因在于還有更多深入問題需要考慮：

面向這些問題，閑魚的解法思路：

案例一，一體化在資源均衡方面的體現(xiàn)。在近期的一個項(xiàng)目中，云端一體化使原本2個月的項(xiàng)目時間，減少了20天。

案例二，一體化在業(yè)務(wù)閉環(huán)方面的體現(xiàn)。負(fù)責(zé)增長的一位開發(fā)同學(xué)，專注在增長業(yè)務(wù)上，在合適的情況下為合適的人投放合適的內(nèi)容，以此帶來用戶的增長和活躍效果。一體化的方式下，可以統(tǒng)一云、端的切面，業(yè)務(wù)研發(fā)不再受云、端的限制。

一體化是建設(shè)高效研發(fā)框架的方向，并不是所有場景都需要一體化的開發(fā)，但一體化的Flutter、FaaS等技術(shù)組件，可以獨(dú)立使用，也會帶來效率提升，并且與原有的開發(fā)模式兼容。從一體化的思路去建設(shè)，可以使整體架構(gòu)體系更加一致，也有機(jī)會做一體的架構(gòu)沉淀。

未來閑魚希望在一體化上做更多嘗試和深入 探索 ，包括一體化工具、一體化業(yè)務(wù)平臺、數(shù)據(jù)化智能化等方向。

閑魚前端基于serverless的一種多端開發(fā)解決方案

前端的發(fā)展太快了，前端框架和技術(shù)的發(fā)展也層出不窮，還包括不同智能設(shè)備的出現(xiàn)，對前端開發(fā)同學(xué)來說是個很大的跳轉(zhuǎn)，簡單列舉下：

這樣就滋生了一些問題，比如我要開發(fā)一個通用的頁面，兼容不同的端側(cè)和 小程序 ，顯然目前是做不到的，我們只能開發(fā)多套頁面去適配不同的場景，這樣的話成本就太高了。

很多同學(xué)都在嘗試解決這個問題，也催生了類似taro這樣的多端統(tǒng)一開發(fā)框架，這是一個好的解決方案，但是比較被動，缺乏一定的擴(kuò)展性。

這篇文章我們要探討的是，看能不能換個角度去解決這個問題，提升開發(fā)效率。

ViewModel

當(dāng)我們在開發(fā)一個頁面的時候，不管用的是哪一種框架，通常都會抽象出一層viewmodel層，它主要有2個作用

從上圖中我們可以看出，viewmodel是一段獨(dú)立的通用代碼邏輯，起到了承前啟后的作用。它和view層關(guān)系更加緊密，因此通常會放在前端測。

既然viewmodel是獨(dú)立的，那我們能不能把它放在后端呢？這樣一個最大的好處就是viewmodel可以進(jìn)行復(fù)用，不需要在重復(fù)編寫，而且只需要改動一個viewmodel，就可以全量生效。

似乎是一個很美好的想法，但是這部分代碼由誰去開發(fā)呢，總不可能寄希望于后端同學(xué)吧，當(dāng)然只能是我們自己，也感謝于serverless架構(gòu)的出現(xiàn)，讓這件事情變成了可能。

有些同學(xué)可能會問，既然viewmodel后移了，那view呢？后續(xù)會考慮結(jié)合我們的ui2code技術(shù)，那真的就比較完美了。

什么是serverless

架構(gòu)上，我們可以把serverless分為FaaS和BaaS。

FaaS是用于創(chuàng)建、運(yùn)行、管理函數(shù)服務(wù)的計(jì)算平臺，它支持多種開發(fā)語言，比如java、nodejs、dart等，這有利于不同端側(cè)的開發(fā)同學(xué)介入開發(fā)。FaaS是基于事件驅(qū)動的思想，只有當(dāng)一個函數(shù)被事件觸發(fā)時才會占用服務(wù)器資源執(zhí)行，不然都是無需占用服務(wù)器資源的。

BaaS提供了用于函數(shù)調(diào)用的第三方基礎(chǔ)服務(wù)，比如身份校驗(yàn)、日志、數(shù)據(jù)庫等，它是由服務(wù)商直接提供，開發(fā)者無需關(guān)系實(shí)現(xiàn)，直接調(diào)用即可。

業(yè)務(wù)落地

我們是通過gaia平臺開發(fā)后端接口，gaia可以理解為上文提到的FaaS平臺。

日常開發(fā)中有這樣一個需求，下面是這個需求的一個頁面。

因?yàn)檫@個頁面上的數(shù)據(jù)比較多，先把它切分成一個個小的模塊，后臺返回?cái)?shù)據(jù)的時候也根據(jù)模塊來返回?cái)?shù)據(jù)。

我們是根據(jù)viewmodel來設(shè)計(jì)接口，首先肯定有一個首屏數(shù)據(jù)接口；然后是頁面上的交互，比如切換卡片、切換芝麻信用按鈕，切換會引起頁面數(shù)據(jù)變化，我們可以統(tǒng)一封裝一個頁面更新的接口；最后是一個開通的接口。

后端接口

前后端交互最重要的數(shù)據(jù)結(jié)構(gòu)的設(shè)計(jì)，我們省略了中間的業(yè)務(wù)邏輯處理，看下接口的數(shù)據(jù)結(jié)構(gòu)。

首屏接口返回的數(shù)據(jù)主要有幾個特征：

更新接口的返回?cái)?shù)據(jù)結(jié)構(gòu)和首屏接口類似，但是入?yún)⒂兴煌饕?個字段：

前端處理

從后端返回的數(shù)據(jù)可以看到，數(shù)據(jù)是及其詳細(xì)的，無需我們做任何的業(yè)務(wù)邏輯處理，直接映射到頁面即可。這樣，前端已經(jīng)變成了很薄的一層數(shù)據(jù)，沒有任務(wù)的業(yè)務(wù)邏輯處理，變的很簡單，當(dāng)需要遷移到其他端時，只需要遷移視圖層即可。當(dāng)有任何的業(yè)務(wù)變動時，只需要修改后端的接口，就能生效。

收益與總結(jié)

通過具體的實(shí)踐，我們發(fā)現(xiàn)，對于前端開發(fā)同學(xué)來說，變的簡單了，開發(fā)效率有很大的提升，前端同學(xué)甚至都不需要去理解具體的業(yè)務(wù)邏輯，就能完成頁面的開發(fā)。而且，提取的viewmodel可以復(fù)用到不同的端側(cè)，設(shè)置還包括native端。我們還可以將viewmodel拆分成更小粒度的viewmodel，方便在不同的頁面接口中進(jìn)行復(fù)用。我們有同學(xué)還在FaaS側(cè)基于redux的思想封裝了一個通用的狀態(tài)管理框架，規(guī)范了前后端的交互。

后面， 還有一些問題待我們?nèi)ソ鉀Q，比如開發(fā)成本、viewmodel的邏輯拆分、具體接口問題定位等。

閑魚團(tuán)隊(duì)是Flutter+Dart FaaS前后端一體化新技術(shù)的行業(yè)領(lǐng)軍者，就是現(xiàn)在！ 客戶端／服務(wù)端java／架構(gòu)／前端／質(zhì)量工程師 面向 社會 招聘，base杭州阿里巴巴西溪園區(qū)，一起做有創(chuàng)想空間的社區(qū)產(chǎn)品、做深度頂級的開源項(xiàng)目，一起拓展技術(shù)邊界成就極致！

*投喂簡歷給小閑魚→ guicai.gxy@alibaba-inc .com

開源項(xiàng)目、峰會直擊、關(guān)鍵洞察、深度解讀

請認(rèn)準(zhǔn) 閑魚技術(shù)

開源精粹（二）！22個實(shí)用、有趣的開源項(xiàng)目

作為一名開源愛好者，發(fā)掘優(yōu)秀的開源項(xiàng)目是一件非常有趣的事情。在第一期中，我分享了單頁個人網(wǎng)站模板、組裝式 Flutter 應(yīng)用框架、PHP 客戶端庫、Java 診斷工具等一些實(shí)用的庫和工具。本期依舊會為大家分享一些前端、后端、移動開發(fā)的相關(guān)工具，希望你能“淘”到適合自己的工具。

1.Vue-EasyTable

Vue-EasyTable 是一款基于 Vue2.x 的 table 組件，具備自適應(yīng)、表頭與列固定、自定義單元格樣式、自定義 Loading 等功能。

2.React-Calendar

這是一款具備原生日期格式的日歷組件。它不依賴 Moment.js，支持日期選擇范圍，涵蓋了各國語言，開箱即用。

3.Matter

CSS 實(shí)現(xiàn)的 Material 組件合集項(xiàng)目，作者已將部分作品開源，效果可以在 CodePen 上查看。

4.Revery

Revery 是一款用于構(gòu)建高性能、跨平臺桌面應(yīng)用的框架。它類似于加速版的原生 Electron，除了擁有類似 React / Redux 的庫，還具備 GPU 加速渲染功能，其內(nèi)置的編譯器速度也相當(dāng)快。

5.Web Accessibility Guide

這是一個精選了 Web 可訪問性貼士、技巧和最佳實(shí)踐的開源項(xiàng)目，你將會學(xué)習(xí)到一些改善 Web 可訪問性的實(shí)用做法。

1.SOFAJRaft

SOFAJRaft 是螞蟻金服開源的生產(chǎn)級 Java Raft 算法庫，它基于 Raft 一致性算法的生產(chǎn)級高性能 Java 實(shí)現(xiàn)，支持 MULTI-RAFT-GROUP，適用于高負(fù)載低延遲的場景，易于使用。

2. Dragonwell

阿里開源了 OpenJDK 發(fā)行版 Dragonwell，它提供長期支持，包括性能增強(qiáng)和安全修復(fù)。在數(shù)據(jù)中心大規(guī)模 Java 應(yīng)用部署情況下，可以大幅度提高穩(wěn)定性、效率以及性能。

3.Lawoole

Lawoole 是一款基于 Laravel 和 Swoole 的高性能 PHP 框架。它兼具了 Laravel 的特點(diǎn)，還解決了其功能背后的性能問題。同時，你還能感受到與 Laravel 一樣的編碼體驗(yàn)。

4.AntNest

AntNest 是一個簡潔、快速的異步爬蟲框架。它僅有 600 行代碼，基于 Python 3.6+.

5.PHP-Awesome

這個倉庫匯集了 PHP 優(yōu)秀的資源，供你查詢和參考。

1.FlutterBoost

FlutterBoost 是閑魚開源的新一代 Flutter-Native 混合解決方案。它能夠幫你處理頁面的映射和跳轉(zhuǎn)，你只需要關(guān)心頁面的名字和參數(shù)即可。

2.MyLayout

MyLayout 是一套 iOS 界面視圖布局框架，可謂 iOS 下的界面布局利器。它集成了 iOS Autolayout、Size Classes、Android 的 5 大布局體系、HTML/CSS 的浮動定位技術(shù)以及 Flex-Box 和 Bootstrap 框架等主流的平臺的界面布局功能，并提供了一套簡單、完備的多屏幕尺寸適配的解決方案。

3.SegementSlide

SegementSlide 是一個 iOS UI 庫，它具備完整的滑滾及切換組件，旨在解決多層 UIScrollView 嵌套滾動的問題。

1.DevHub

DevHub 是一款跨平臺的 GitHub 通知管理客戶端，支持 Android、 iOS、網(wǎng)頁和桌面上使用，幫助你便捷的接收 GitHub 各類通知。

2.Reqman

Reqman 是一個幫助后端工程師進(jìn)行 API 測試的工具，同時也是一個基于 Node.js 的爬蟲工具。

3.FreeCodeCamp

說到 FreeCodeCamp，或許大家不會陌生，而這個項(xiàng)目就是他們建立的開源課程和相應(yīng)的代碼庫。網(wǎng)站提供了 6 大認(rèn)證課程，也涉及了全棧開發(fā)認(rèn)證。如果你感興趣，不妨了解下。

4.Gitter

Gitter 是 GitHub 小程序客戶端，作者采用 Taro 框架 + Taro UI 進(jìn)行開發(fā)，而小程序內(nèi)數(shù)據(jù)則來自 GitHub Api V3.

5.Awesome Podcasts

這個項(xiàng)目收集了各類實(shí)用的播客，涵蓋了主流的編程語言，希望對你提升技術(shù)水平有所幫助。

6.編程圖書大全

書籍不光能在你迷茫的時候，給予你答案，還能在你提升技能的時候，給予你幫助。這個倉庫收集了眾多編程圖書，涉及主流編程語言、人工智能、算法、Linux、大數(shù)據(jù)等?？纯矗心居心阈枰?。

7.VS Code Netease Music

很多開發(fā)者喜歡邊寫代碼，邊聽音樂，VS Code Netease Music 這個插件就能滿足你在 VS Code 上聽歌的愿望。它使用 Webview 實(shí)現(xiàn)，不依賴命令行播放器。

Star-Battle

Star-Battle 是一款使用 JavaScript ES6、Canvas 開發(fā)的飛船射擊類 游戲 。來 Enjoy 吧。

注：

如需轉(zhuǎn)載，煩請按下方注明出處信息，謝謝！

網(wǎng)頁題目：閑魚flutter模板,閑魚放棄 flutter
分享鏈接：http://www.rwnh.cn/article28/dscdojp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供服務(wù)器托管、網(wǎng)站收錄、小程序開發(fā)、外貿(mào)建站、關(guān)鍵詞優(yōu)化、品牌網(wǎng)站制作

廣告

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