vivo商城前端架構升級-總覽篇

時間 2021-02-15

標籤 javascript css 前端 vue java git web vuex 數據庫小程序欄目系統架構简体版

原文原文鏈接

本文首發於 vivo互聯網技術微信公衆號
連接： https://mp.weixin.qq.com/s/vD9yvYNaxTQBLABik6aqNg
做者：官網商城前端團隊

【背景】

一年前 vivo 商城仍是以 Java 爲技術核心，先後臺一塊兒，Java 既要負責服務、數據庫，也要負責頁面的渲染。在早期這種開發模式也可以很好的運行。然而隨着業務迭代的加快，前端技術的發展，這種開發模式的弊端愈來愈明顯。主要突出的有如下兩個方面：javascript

前端技術棧架構繁雜且陳舊，致使迭代速度很難提高

到2018年12月，整個商城前端系統隨着不一樣需求疊加積累的緣由，形成了不一樣頁面使用不一樣的技術，比較典型的有jQuery，Vue，FreeMarker，artTemplate，這些不一樣的技術棧從開發來看，相同的內容，在不一樣的頁面可能使用不一樣的技術棧，致使須要開發不少遍，對開發、測試來講工做量都是成倍的增加。css

沒法適用多端開發的需求

自2017年微信上線小程序功能後，各類小程序如雨後春筍般出現，vivo 商城一開始也推出了本身的微信小程序，然而因爲業務發展，須要適配的端愈來愈多，原先使用原生開發的小程序方式，沒法作到一套代碼編到多個平臺。前端

爲了提高開發效率，知足高速發展的業務需求，在過去的一年裏，咱們經過對商城內外部系統的全面分析，按照分層的邏輯整理出前端架構的升級指導說明。vue

【分層架構】

在《前端架構-從入門到微前端》一書中提到，前端架構自上而下能夠設計爲四個層次，分別爲系統級、應用級、模塊級、代碼級，咱們經過這四個層次來分析vivo商城前端架構升級過程當中的種種思考和實踐，最終造成了一套以Vue + Node.js爲核心的全端架構方案。java

技術演進過程：git

分層架構實施圖：web

1、系統級

即應用在整個系統內的關係，好比如何和後臺通信，如何與其餘應用集成。針對這一級別，咱們進行了先後端分離、多端統1、BFF、SSR等方面的探索和實踐。vuex

一、先後端分離

架構升級，第一步面臨的問題即是先後端分離，vivo 商城仍然處於業務高速發展時期，不能由於技術重構而停下業務版本的迭代, 所以業務版本迭代必需要和先後端分離同時進行，那怎麼才能作到雙線並行，平滑升級？數據庫

這裏舉個小例子：當咱們分離完成訂單模塊後，就會經過 Nginx 將關於訂單模塊的全部請求轉發到新的靜態資源服務上，以下圖：小程序

經過先後端分離，咱們完全解放前端，讓前端開發效率提高了至少2個檔次。

更多技術細節好比：新老頁面如何同步信息，如何容災容錯等等，請關注咱們的系列第二篇《vivo商城前端架構升級(二)：先後端分離篇》

二、多端統一

從 PC 瀏覽器，到移動端瀏覽器、到 App 內嵌，再到各個小程序，再到服務端、客戶端。繁榮的生態，猶如百家爭鳴，百花齊放。然而，繁榮的背後，對前端工程師的挑戰，則與日俱增。

咱們承接的端愈來愈多，新的端不斷的出現，如小程序、快應用等。前端工程師陷入了以下套娃陷阱：

現有代碼、新代碼要適配新的端開發場景

已經適配新的端開發場景的代碼成爲了現有代碼

現有代碼、新代碼要適配新的端開發場景

循環...

咱們但願解決這種問題，但願作到一套技術架構方案【代碼】，能夠覆蓋如今的端和將來的端。

通俗點說，咱們但願作到以下圖所示的能力：

在這種前端開發背景下，多端統一出現了。它是前端的一個將來趨勢，它也是解決上面套娃陷阱的一劑良藥。

更多細節內容，請關注咱們的系列第三篇《vivo商城前端架構升級(三)：多端實踐篇》

三、BFF

業務現狀

隨着端的增多，新的接口數量呈現爆發式增加，老的接口爲了適配各端，也會增長了各類不一樣的字段，致使先後端適配多端的工做量愈來愈大。可是抽象來看，大部分端的變更都是UI層級的變更，不多有底層服務的改變，因此帶來了一個問題接口到底是面向UI，仍是面向通用服務？

爲了解決這個問題，Sam Newman 發表了一篇文章，講述了這種體驗者專用 API 的方式，並將其稱爲BFF（Backends for Frontends）模式。

在BFF理念中，最重要的一點是：服務自治，誰使用誰開發。服務自治減小了溝通成本，帶來了靈活和高效。

關鍵技術

商城前端積極適應前端技術的發展，爲了提供一流的用戶體驗，積極推進BFF層在商城業務中的實現。

直連Dubbo：

Apache Dubbo 是一款高性能、輕量級的開源Java RPC框架，它提供了三大核心能力：面向接口的遠程方法調用，智能容錯和負載均衡，以及服務自動註冊和發現。

咱們使用了社區提供的 Dubbo2.js 進行 Dubbo 服務的調用，而且作了一些封裝來優化發開體驗。

集成GraphQL網關：

GraphQL 是一個開源的 API 數據查詢和操做語言及實現爲了實現上述操做的相應運行環境。相較於REST以及其餘 web service架構提供了一種高效、強大和靈活的開發 web APIs的方式。

（1）請求你所要的數據很少很多

（2）獲取多個資源只用一個請求

（3）強大的API調試工具

四、SSR

自從先後端分離後，前端採用了SPA技術，走的都是CSR（客戶端渲染）的模式。使用CSR的優點在於節省後端資源、局部刷新等，但隨着應用的日益複雜,首屏渲染時間不斷變長, 而且存在嚴重的 SEO 問題。因此爲了解決SPA應用遇到的這些問題, 咱們必須考慮 SSR。

SSR 即服務端渲染，是指由服務器端完成頁面的HTML 結構拼接，而且直接將拼接好的HTML發送到瀏覽器，而後爲其綁定狀態與事件，成爲徹底可交互頁面的處理技術。

主要優點在於：

更好的 SEO，因爲搜索引擎爬蟲抓取工具能夠直接查看徹底渲染的頁面。
更快的內容到達時間 (time-to-content)，特別是對於緩慢的網絡狀況或運行緩慢的設備。

爲了不重複造輪子，咱們使用了社區很是優秀的SSR框架nuxt，經過一系列的優化，好比：頁面緩存、組件緩存、API緩存、最小化渲染等方式，最終讓咱們頁面在500ms內就能所有展現，這是用戶體驗上的極大提高。

2、應用級

即應用外部的總體架構，如多個應用之間如何共享組件、如何通訊、如何開發通用腳手架等。在應用級別的架構上面，咱們主要沉澱了適用於商城的UI庫，爲其餘商城衍生項目提供基礎組件支持。

一、組件庫

移動端的設計變幻無窮，市場上很是流行的移動端的組件庫好比antd-mobile ， vant，他們對於開發通用型的 App，很是高效且美觀，然而大部分自主研發的 App都有本身的一套設計風格和理論。若是使用流行的組件庫，就會出現頻繁須要修改源碼，以適應UI風格的變化。這樣的工做量日積月累，就會變得愈來愈大。因此咱們仍是建議若是是作本身特點的App，仍是要自建UI庫。若是感受自建UI庫難度較大，能夠先fork一份流行的組件庫，學習其中的各類實現，慢慢造成本身的UI庫。

商城也實現了本身的UI庫，目前已經在商城、秒殺、vivo 內購、v客聯盟等應用中普遍使用，極大的提升了開發效率。以下圖：

3、模塊級

應用內部的模塊架構，如代碼的模塊化、數據和狀態的管理等，在項目中比較典型的是咱們設計了針對 Vue 的極致模塊化方案，頂層 page 設計，數據自治等方面的工做。

一、極致模塊化

咱們的方案擯棄了官方推薦的按文件類型組織模塊，而採用按照功能組織模塊，這種"可插拔式"組件設計，讓代碼按照功能聚合。

一個文件包裏面包含該功能的全部實現，包括圖片、樣式、腳本、數據流、組件等等，這樣另外一個項目想要使用，直接遷移便可，極大地減小了遷移的成本，而且還有一個優點是，若是這個功能之後下架，直接刪除便可，沒必要各個文件夾下找文件，極大地提高了代碼的簡潔性和可維護性。

➜  confirm git:(dev_abtest_gray) tree 
.
├── api.js     // 接口資源
├── components // 內部組件
│   ├── component1
│   │   ├── images
│   │   ├── index.scss
│   │   └── index.vue
│   ├── component2
├── images   // 圖片資源
├── index.scss // 樣式資源
├── index.vue  // 邏輯實現
├── module.js  // 數據流
└── trackData.js // 埋點

二、頂層 page 設計

全部的頁面都會有不少通用的功能，好比加載前的骨架圖、出錯後的處理邏輯、數據採集邏輯、上拉刷新、下滑分頁加載，全局 iOS 適配等等，這些功能在邏輯上是須要抽象的，避免各個頁面屢次實現，致使浪費開發資源和下降程序的可維護性。

針對此咱們實現了一個頂級 page 組件，全部的頁面都繼承於這個 page 。作到通用性的功能全局管理。

頂級 page 的部分 API 使用以下：

<template>
  <v-page
    // 頁面是否完成
    :pageInit="true"
    // 頁面是否出錯
    :pageError="false"
    // 頁面監控開啓，包括pv,uv,渲染時間
    :pageMonitor="true"
    // 上拉刷新
    @pullDownRefresh="pullDownRefresh"
    // 下拉監聽
    @reachBottom="reachBottom"
    // 滾動監聽
    @pageScroll="pageScroll"
  >
    <template slot="header">
      <!-- 自定義頭部，若是沒有則使用默認頂部導航菜單 -->
      <Header />
    </template>
    <template slot="skeleton">
      <!-- 本身實現的骨架圖，若是沒有則使用默認骨架圖-->
      <Skeleton />
    </template>
    <template slot="footer">
      <!-- 本身實現的底部，吸底顯示，若是沒有則不顯示-->
      <Footer />
    </template>
  </v-page>
</template>

三、數據自治

本着誰使用，誰負責的原則，對於頁面中的數據流也是同樣的，咱們開發了針對page的全局mixin，負責自動註冊和卸載頁面數據，並將各個頁面之間的數據進行隔離。

import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'

export default (name, module) => ({
  computed: {
    ...mapState(name, Object.keys(module.state)),
    ...mapGetters(name, Object.keys(module.getters))
  },
  created () {
    // todo 要加判斷是否已經註冊，動態註冊模塊
    if (!(name in this.$store._modules.root._children)) {
      this.$store.registerModule(name, module)
    }
  },
  methods: {
    ...mapActions(name, Object.keys(module.actions)),
    ...mapMutations(name, Object.keys(module.mutations))
  }
})