【腾讯TMQ】【UTP自动化测试平台系列之终章】前端探索之路

作者：廖亿富

团队：腾讯移动品质中心TMQ

导语

UTP自动化测试平台是TMQ的一个联合项目，目的是方便大家更好地开展自动化测试建设工作，减少重复平台建设的成本，提高产品的自动化测试效率。但是随着项目规模与用户需求的不断增多，需要每个开发人员都需要对前后端进行快速迭代，造成了开发人员无法兼顾后端、前端和UI的开发工作，重构之路由此而生。

本文将以现在面临的问题、前端框架选择、平台架构搭建和前端使用、建设等角度进行各方位、多角度分析。

1 现状

前期为了快速进行开发迭代，每人认领一个子系统，利用自己熟悉的语言快速搭建起了系统的前后端架构搭建，并快速投入到各个产品的使用验证中。但是随着项目规模与用户需求的不断增多，开发人员需要对前后端进行快速迭代，造成了开发人员无法兼顾后端、前端和UI的开发工作。

从上图可知平台的前端涉及到有php、jsp、angular1和jquery等，我加入以后，主要负责前端的开发功能，包括了前端的各个子系统开发，需要熟悉各种的开发语言，并要在各种语言中切换开发，对我来说是个非常大的挑战。

各种问题导致了开发效率低、问题多，心中不由得产生了重构的念头：是否可以前端语言统一、风格统一，是否可以前端不依赖后台功能独立打包、独立测试、独立部署？

2 Web前后端分离的架构设计

带着一堆疑问，我走上了前端的自学、自问、自答和请教之路。

疑问一：前端语言是否可以统一、风格是否可以统一？

UTP对于用户而言，只是一个平台，只是UTP内部分离出了很多个子系统，由于用户的开发语言和UI库不同，导致了UI风格上不统一。所以完全可以共用一个前端框架和UI框架进行开发，与后台之间的交互交给AJAX方式进行数据传输和交互，这样子就可以进行简单的前后端耦合分离。

疑问二：前端能否独立打包、独立部署？

独立的前端文件一般是有Html、JavaScript、Css和Img等一批静态文件组成，可以部署在中间件（Tomcat、apache和Nginx等）环境下就可以运行，无需依赖java、php等环境就可以直接运行。简单方便、可以进行独立的开发调试和维护。