TiD 大会感想之浅谈前端工具化与工程化

Author Avatar
Pang Jian 7月 31, 2017
总字数:1.9k 预计阅读:6 min
  • 在其它设备中阅读本文章

今年有幸参加了一天的质量竞争力大会,众多的课程当中,无法分身的我听了其中两节。分别是“终端重构之旅”以及“微服务下的持续交付”。由于“终端重构之旅”涉及硬件终端,与我们平时工作相距较远,所以本文着重谈谈对“微服务下的持续交付”的感想。

微服务下的持续交付

微服务(Micro Service)是一种将复杂的业务逻辑拆分成多个高度自制的独立系统的架构设计。微服务为构建可扩展、可维护的大规模服务集群带来了很大的便利。
持续交付:交付是指将最终产品发布到线上环境,给用户使用。持续交付就是指在软件开发过程中,从需求识别到交付的过程中,总是能够以较短的周期完成需求的小粒度频繁交付。频繁的交付带来了对软件更迅速的反馈,相比于传统的模式,有着更少的浪费。
来自 ThoughtWorks 的两位讲师,利用一个简单的电商需求,演示了如何使用微服务来完成需求,并且将微服务做到持续交付。介绍了从构建、测试、部署到环境监控分析等一整套工具链。我认为要做到持续交付很重要的一点一定是要做到工程的工具化以及工程化。
虽然网银还未做到微服务化,但是网银目前的前后端分离架构也有着许多微服务的特点。也急需进行工具化和工程化。前期一直在进行新一代前端框架的预研,很多思路与讲师产生了共鸣。针对我自己的理解和实践介绍一下前端的工具化与、工程化。

工具化

所谓“工欲善其事,必先利其器”,在 DevOps 深入人心以及各种 CI 工具大行其道的现在,使用工具来帮我们进行一系列可自动化的任务,已经变成了新项目的一个默认选项。一系列的工具帮助我们完成全流程的自动化,我们把这一整套工具称为工具链。Vue.js的作者尤雨溪在访谈中提到,工具的存在是为了帮助我们应对复杂度。很多人抱怨某某工具的学习成本很高,工具的复杂度是我们为了应对问题复杂度的一种投资,投资太少就起不到规模效应不会有合理的回报,如果要解决的问题本身很复杂,你使用一个很简陋的工具去应付它,就会因为工具太弱而影响生产力;反之,如果要解决的问题不复杂,却使用很复杂的工具,就会带来因工具过于复杂而导致的副作用,比如上手成本、培训成本等。
所以我们在平时使用工具的时候,不可以一刀切的评判,要根据解决问题的复杂度来判断应该使用何种工具。比如前端构建工具 Webpack,当我们要做的前端项目是一个类似网银这样复杂的单页面应用,使用Webpack 几乎成了必然的选择,因为不使用 Webpack 来为我们解决代码依赖管理、打包、压缩合并等工作,使用手工来维护将是一个巨大的工作量,并且会使代码越来越难以维护。反之,如果只要实现有几个功能的小项目,引入 Webpack,那么开发Webpack 配置文件的成本都会高于实现功能的成本。再如状态管理框架 VueX,开发人员想要使用VueX,首先要理解 FLUX 思想,付出很大的学习成本。并且开发VueX 需要开发例如 actionmutationstore 等代码,如果不是有很复杂的前端状态进行管理,使用 VueX 不仅会带来学习成本的增加,也会导致书写很多不必要的代码。这时候我们使用简单的 EventBus 就可以解决问题。
在开发新一代前端页面框架的时候,我们实现了一个脚手架工具,用户可以根据自身的业务复杂程度需要,使用脚手架初始化出不同程度的模板代码。既提供小儿美的轻量级代码;也提供功能完善的重量级模板。

工程化

所谓工程化,即是面向某个产品需求的技术架构与项目组织,工程化的根本目标是以尽可能快的速度实现可信赖的产品。尽可能短的时间包括开发速度、部署速度与重构速度,而可信赖的产品包括产品的可测试性、可变性以及 Bug 的重现与定位。
用通俗的话来理解工程化,我想应该是这样的:在日常进行开发的时候,不仅仅需要关注代码是否可以完成功能,更多的需要关注代码的可扩展性、可测试性。磨刀不误砍柴工,首先进行设计预留好扩展接口,为以后的重构及需求变更打好基础。
前后端分离,代表着前端代码将独立于后端开发,独立部署。要面临的问题应该属于前后端接口的衔接。前后端通常由不同的团队开发,沟通成了项目开发中的主要矛盾之一。在开发新一代前端框架的时候,我们引入了 Mock 框架来解决前端调用后台的模拟返回数据问题, Mock 不同于单纯的假数据, Mock 可以随机产生虚拟的数据,比如动态的邮箱、电话,甚至是返回符合制定正则规则的随机数据,也可以根据不同的上送响应不同的结果。
针对微服务之间的接口,也可以说是前后端之间的接口测试,课程的讲师提到了一种叫做“契约测试”的方法,前端根据用例生成针对 json 接口的描述信息,叫做“契约”,后端根据“契约”文件进行接口同步开发。前后端分别使用这个契约文件构建 Mock 服务,各自进行自动化测试。这是一种很新颖的思路,后续可以考虑添加到新的前端框架中。
多业务系统的组件复用,也属于前端工程化的范畴。当我们面临的开发需求时,我们希望能够尽量复用已有代码,不仅仅为了提高开发效率,还能够保证公司应用的风格一致。在新的前端框架预研阶段,预研小组开发出了一套基于 Vue 2.x 的组件库,将于业务无关的通用组件抽象出来,打包成为一个 UI 库,可以跨项目使用。
以上便是我结合前期前端预研工作和本次大会课程总结出来的一点点想法。如有不对之处,欢迎批评指正。

Documentation licensed under CC BY-SA 4.0.
本文链接:https://www.pangjian.me/2017/07/31/tid-tools-and-project/