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))
  }
})