您可以捐助,支持我们的公益事业。

金额: 1元 10元 50元

姓名:

邮件:

电话:

公司:

说明:

认证码: 验证码,看不清楚?请点击刷新验证码 必填



  要资料 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 讲座吧   专家招募  
会员   
 
   
 
  
每天15篇文章
不仅获得谋生技能
更可以追随信仰
 
     
   
 订阅
  捐助
美团点评酒旅移动端 Vue.js 最佳实践
 
作者:胡成全 发布于:2017-7-12
来自于要资料   172 次浏览     评价:      
 

前言

移动端HTML5因其开发效率高、多端适配能力强而为广大开发者所熟知。而企业级的团队开发对技术成熟度、学习成本、开发便捷性以及大规模应用的架构能力有严格的要求。合理的技术选型,一致的开发规范对前端技术团队尤为重要。

美团点评酒旅前端专注于手机和桌面浏览器,因此不必考虑和客户端共享代码。在对比流行的MVVM框架AngularJS、React和Vue.js后,我们认为,实现上轻量、学习曲线平缓、专注在HTML视图层的Vuejs,能够最大限度地契合酒旅的团队需要。

1 需要解决的问题

经过前期的快速发展,在完成业务目标的同时,各系统之间的技术选型差异逐渐放大。技术栈不统一带来的开发效率问题日渐突出,系统维护成本显著增加,基础技术建设收效甚微,难以开展。我们面临的问题主要有:

业务线技术栈不统一,AngularJS、Vue.js、jQuery和传统老项目并存,项目切换和维护成本较高;

基础技术建设无法开展,业务和技术组件无法复用,一个技术方案需要多个版本的实现;

团队规模扩大,新人培训和快速切入业务难度大,团队效率下降。

因此,我们需要解决的核心问题是:

统一技术选型,降低团队学习成本;

完善技术生态,技术方案提取和复用,提高开发效率。

2 企业级的团队协作

多人协作的前端项目,技术选型需要满足并行开发,能做到较好的模块分解、组件复用、数据和状态管理清晰易于维护。同时兼具良好的开发体验,如开发调试、开发工具和项目脚手架。在这些方面,Vue.js的单文件组件开发方案,Vuex的数据和状态管理方案,能很好地契合预期。

经过反复尝试和探索,我们总结出了一整套行之有效的实践经验,包括对Vue.js的使用、业务生态建设、性能优化和工程化的一些建议。下面将分别进行介绍和说明。

3 Vue.js开发规范

Vue.js有多种开发和使用方式,为方便代码维护和作为技术栈统一的延伸,我们约定了一致的编码规范,对常见的使用方式做了一致性约束。

4 SFC模块化开发

Vue.js使用自定义标签的方式为HTML扩充标签集合,自定义标签需要定义并注册到Vue运行环境。通常的开发方式下,我们简单通过Vue.component注册全局组件就能达到目的,一次注册,到处使用。但对于复杂的场景,其缺点直接导致了代码可维护性的降低,譬如:

全局组件命名问题,组件提供方需要避免组件名称重复;

组件中无法添加CSS,这使得组件的样式必须和组件本身分开管理维护。

为此,我们选择了使用Vue.js官方推荐的组件开发方式Single File Components构建复杂应用。在此开发方式下,组件的所有代码汇总到一个扩展名为.vue的文件中,实现组件间的低耦合。通过官方推荐的自动构架工具vue-loader完成代码的构建。更进一步,对于复用率高的组件,我们后期直接提取到团队自建的npm仓库,对其他业务线直接提供技术支持。

5 使用Vuex管理状态

对简单应用,组件间的组织方式比较简单,通过消息通信机制实现彼此状态的更新和同步,应用数据和状态分散存储在各个组件中并没有太大问题。随着业务场景的复杂和功能迭代,状态间的消息变成一个不可维护的网状结构,可维护性急剧下降,直到不可维护。为此,我们对业务级别的应用,根据其复杂程度,确定是否选用Vuex统一维护数据和状态。Vuex的核心规则是通过Vuex.Store创建实例store,并将其挂载到父子组件中。Store由以下几部分组成:

State对象存储原始数据;

Getters函数定义State的获取方式,组件引入Getters获取数据并完成视图渲染;

Mutations定义State中数据的更新方式,并唯一持有对State的更新入口;

Actions作为Mutations的外层包装,对内持有对Mutations的访问权限,对外提供数据更新的入口。

实际开发中,我们在对Vuex的使用方法做了调整,以便于模块化开发,如:

将每个子组件的数据分开定义,每个模块的数据独自保有一个命名空间;

负责更新数据的Mutations指令,约定一致的命名规则,譬如以组件名称作为前缀,做到望文生义;

State、Mutations、Actions在同一个文件中定义,不做单独引入,确保一致的入口和引用方式;

子组件的数据定义Mixin到统一入口文件,并创建Store实例。

这样一来,我们彻底剥离了数据状态管理和核心业务逻辑部分的代码。在组件级别上以最小的侵入实现了数据挂载,组件模块化管理解耦成功。

技术生态建设

我们已经实现了开发技术栈的统一,为了提高开发效率,避免重复造轮子,并且对轮子的质量提供统一的质量保证。我们建设了一个Vue.js组件库Vue Gallary,沉淀出业务中的一些交互解决方案和通用业务组件,确定准入规则后发布到自建的npm仓库。

在组件准入规则上,我们构建了组件开发脚手架,约定了组件的开发规范,一键生成项目代码主体结构,帮助开发者更好地开发基础组件。此外,对于所有组件,我们建设了一个组件库平台系统,可以查阅现有组件情况、Demo实例和组件信息、使用方式等。我们会在代码仓库层面统计组件被使用的频率,评估组件的使用情况和带来的开发效率提高。

我们HTML5应用面向多端,如美团App、点评App、大象,在不同的App上视觉规范不一致,如何做到同一套代码的多端视觉适配呢?为此,我们实现了一个多端的样式适配方案Hue。我们对业务的多端视觉规范做了统一收集和汇总,整理出了一套通用样式解决方案,开发者根据自己所处的环境,引用不同的样式文件实现换肤。听起来很简单,但在对子组件的样式适配上会显得比较复杂。通常,组件的样式都是定义在组件内部的,如何让组件也实现换肤,这才是重点。

我们的方式是:样式库是可编码的预处理文件,组件通过npm引入样式库并依赖其中的公共样式部分。在构建目标代码时选择要支持的终端平台,将样式文件提取到一个文件中,根据选择的终端构建出不同版本。这部分样式以页面为维度,一个页面构建出一个样式文件。

此外,我们还开发了Vue.js组件的性能统计工具,可以统计组件在各个生命周期的性能情况,确定性能瓶颈,帮助开发者提高组件性能。

1 Super Bridge

如上所述,我们的代码要运行在不同终端上,终端提供了一些HTML5所不具备的Native API,但不同终端提供的API功能不尽相同,这给业务方带来了抹平终端差异的成本。为此,我们为了提高开发效率,实现了一个Super Bridge的解决方案,对开发者屏蔽了实现差异,其核心内容主要包含:

顶层业务接口封装,用户直接操作这部分接口;

检查当前终端环境,动态载入当前终端的特定JS Bridge实现;

对尚未开放的API,实现HTML5版本提供服务。

2 性能优化

前端离线化:移动端对网络要求较高,页面加载问题比传统PC端更加突出。为增强用户体验,减少前端加载时间是一个必要的技术手段。目前我们已经实现了一套纯前端、增量式的代码离线化方案。该方案通过浏览器本地存储特性、增量式的代码构建策略,以及可配置的本地存储空间管理实现。目前已经在机票业务上得到实践和验证,加载效率提升了50%。

客户端离线化:对于Hybrid开发方式,我们借助客户端的能力,实现了一套客户端静态资源离线方案。该方案通过消息推送、URL拦截、资源预加载的方式,打破纯前端离线化的技术限制,实现更多的离线策略和配置。此方案已经在多个业务实践和验证,目前正在做方案的升级和改进,以期满足更多业务场景。

构建策略:我们采用了非关键代码的异步载入策略,将其分片构建到多个目标文件,以此提升用户可交互时间。

业务场景:性能优化是一个永恒的议题,常见的方法有迹可循。部分优化方案需要分析业务场景,或者走查代码逻辑才能得出结论。譬如我们主流程有四个页面,每个页面都会尝试写入Cookie,但分析业务之后发现绝大多数情况只需要在第一个页面写入即可。其他页面的策略可以调整为——如果获取不到再尝试写入。整个链路节约的时间就相当可观。

3 前端工程化

我们采用E6语法进行业务开发,一方面实现源代码级别的精炼,一方面与主流的技术趋势保持对齐。通过制定团队内的代码编码规范,梳理出ESLint代码检查规则,并在代码提交阶段做代码检查。

数据Mock:为完成前端代码;

包管理策略:npm策略升级为Yarn,之前我们有发生过依赖的包版本不一致导致的线上问题;

开发脚手架:我们自建了一套前端开发脚手架AWP,通过其初始化前端项目,完成代码构建,调试和发布。

4 使用建议

Vue.js可供使用的框架特性和语法特点非常丰富,但在团队协作中,选择一致的功能集合,保持一致的使用规则非常重要。结合美团酒旅前端团队的使用情况,我们将团队的使用规则总结如下:

业务组件均以单文件的方式编写,禁止注册全局组件而通过Component方式引入子组件;页面尽可能分解为组件,并做好解耦;

数据管理优先使用Vuex,通用组件选择性使用props方式;store的定义可以以组件的维度做好分解,在入口处做好聚合;

尽量不使用消息分发和广播做通信依赖,避免“消息网”带来的维护灾难;

数据绑定优先使用mastache语法,尽量避免生僻指令;

避免使用内部钩子和方法,除非必要;禁止直接操作DOM;

考虑组件按需加载的特性做好分块和打包,加速页面载入。

5 问题

当前,Vue.js已然成为前端最流行的框架之一,任何级别的改进,对广大的使用群体来说,收益都将是巨大的。本着造福广大用户的初衷,希望Vue.js本身能继续保持高质量的稳步迭代。

我们在使用个过程中曾遇到的最大问题,是从Vue.js 1升级到Vue.js 2引起的大量代码修改和调整。尽管我们对大版本升级带来的改动是有一定预期的,但作为一线用户,总希望有更好的兼容性,或进一步在升级指南上加强引导。

关于文档,中文官方文档更新落后于英文文档,团队中有同学因为中文文档引发过问题。希望Vue.js团队能在这方面做一些引导和提醒,譬如标注好更明确的版本信息,文档更新日期。

关于测试,官方文档的测试部分比较简陋,社区的很多示例项目甚至没有测试,希望官方能够做一些引导和测试准入机制。譬如推荐测试框架,完成一份标准的测试准入示例。

结语

目前,美团点评酒旅前端团队已经实现技术栈的统一,并在此基础上完成了组件库、样式库、开发工具脚手架、静态资源离线化等生态建设,开发效率得到了极大的提高。未来,我们将继续在统一技术栈的背景下完善基础建设,服务好业务团队,包括正在进行的基于Vue.js的企业级框架的开发、基于Vue.js开发规范的微信小程序项目脚手架等。

   
 订阅
  捐助
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号