閒魚前端基於serverless的一種多端開發解決方案

前端的發展太快了，前端框架和技術的發展也層出不窮，還包括不一樣智能設備的出現，對前端開發同窗來講是個很大的跳轉，簡單列舉下：

• 前端框架：vue、react、angular
• 小程序：微信小程序、支付寶小程序、字節跳動小程序
• 智能設備：蘋果設備、天貓精靈、小度

這樣就滋生了一些問題，好比我要開發一個通用的頁面，兼容不一樣的端測和小程序，顯然目前是作不到的，咱們只能開發多套頁面去適配不一樣的場景，這樣的話成本就過高了。

不少同窗都在嘗試解決這個問題，也催生了相似taro這樣的多端統一開發框架，這是一個好的解決方案，可是比較被動，缺少必定的擴展性。

這篇文章咱們要探討的是，看能不能換個角度去解決這個問題，提高開發效率。

viewmodel

當咱們在開發一個頁面的時候，無論用的是哪種框架，一般都會抽象出一層viewmodel層，它主要有2個做用

• 和服務端進行交互，接受後臺返回的數據，進行加工並傳遞給view層渲染
• 接受view層的回調，加工數據並返回給view層渲染

從上圖中咱們能夠看出，viewmodel是一段獨立的通用代碼邏輯，起到了承前啓後的做用。它和view層關係更加緊密，所以一般會放在前端測。

既然viewmodel是獨立的，那咱們能不能把它放在後端呢？這樣一個最大的好處就是viewmodel能夠進行復用，不須要在重複編寫，並且只須要改動一個viewmodel，就能夠全量生效。

彷佛是一個很美好的想法，可是這部分代碼由誰去開發呢，總不可能寄但願於後端同窗吧，固然只能是咱們本身，也感謝於serverless架構的出現，讓這件事情變成了可能。

有些同窗可能會問，既然viewmodel後移了，那view呢？後續會考慮結合咱們的ui2code技術，那真的就比較完美了。

什麼是serverless

咱們先簡單介紹一下什麼是serverless，serverless的基礎是雲技術，它是雲技術發展到必定階段而出現的一種革命性的高端架構。serverless並非說不須要服務器，而是指不須要開發者去關心底層服務器的狀態、資源和擴容等，開發者只須要關注於業務邏輯實現。

架構上，咱們能夠把serverless分爲FaaS和BaaS。

FaaS是用於建立、運行、管理函數服務的計算平臺，它支持多種開發語言，好比java、nodejs、dart等，這有利於不一樣端測的開發同窗介入開發。FaaS是基於事件驅動的思想，只有當一個函數被事件觸發時纔會佔用服務器資源執行，否則都是無需佔用服務器資源的。

BaaS提供了用於函數調用的第三方基礎服務，好比身份校驗、日誌、數據庫等，它是有服務商直接提供，開發者無需關係實現，直接調用便可。

實踐一下

咱們是經過gaia平臺開發後端接口，gaia能夠理解爲上文提到的FaaS平臺。

平常開發中有這樣一個需求，下面是這個需求的一個頁面

由於這個頁面上的數據比較多，先把它切分紅一個個小的模塊，後臺返回數據的時候也根據模塊來返回數據。

咱們是根據viewmodel來設計接口，首先確定有一個首屏數據接口；而後是頁面上的交互，好比切換卡片、切換芝麻信用按鈕，切換會引發頁面數據變化，咱們能夠統一封裝一個頁面更新的接口；最後是一個開通的接口。

後端接口

先後端交互最重要的數據結構的設計，咱們省略了中間的業務邏輯處理，看下接口的數據結構

一、首屏接口

返回的數據主要有幾個特徵

• 根據前端的頁面模塊定義返回結構
• 字段的顆粒度很細，頁面上的每一個元素都對應一個字段值
• 有兩個字段來控制模塊的顯示和刷新

二、更新接口

更新接口的返回數據結構和首屏接口相似，可是入參有所不一樣，主要包括2個字段

• data：當前頁面的數據，爲了不數據的重複獲取
• action: 定義的頁面操做

前端處理

從後端返回的數據能夠看到，數據是及其詳細的，無需咱們作任何的業務邏輯處理，直接映射到頁面便可。這樣，前端已經變成了很薄的一層數據，沒有任務的業務邏輯處理，變的很簡單，當須要遷移到其餘端時，只須要遷移視圖層便可。當有任何的業務變更時，只須要修改後端的接口，就能生效。

結論

經過具體的實踐，咱們發現，對於前端開發同窗來講，變的簡單了，開發效率有很大的提高，前端同窗甚至都不須要去理解具體的業務邏輯，就能完成頁面的開發。並且，提取的viewmodel能夠複用到不一樣的端測，設置還包括native端。咱們還能夠將viewmodel拆分紅更小粒度的viewmodel，方便在不一樣的頁面接口中進行復用。咱們有同窗還在FaaS側基於redux的思想封裝了一個通用的狀態管理框架，規範了先後端的交互。

後面， 還有一些問題待咱們去解決，好比開發成本、viewmodel的邏輯拆分、具體接口問題定位等。

阿里雲雙11億元補貼提早領，進入抽取iPhone 11 Pro：https://www.aliyun.com/1111/2...

---

本文做者：閒魚技術-還休

閱讀原文

本文爲雲棲社區原創內容，未經容許不得轉載。