[转] 美团点评酒旅前端的技术体系

何谓技术体系

技术体系指社会中各类技术之间相互做用、相互联系、按必定目的、必定结构方式组成的技术总体。技术体系是科技生产力的一种具体形式。

前端技术体系的范围和做用

随着科技的发展，终端种类愈来愈丰富，前端行业也在迅猛发展，目前前端早已成为链接用户终端、视觉体验、服务端的重要一环，相比十年前前端的边界和范围也更普遍甚至模糊，一名优秀的前端工程师不只须要精通本身的专业领域，还须要了解设备终端的特色、OS、运行环境，同时还须要具有良好的审美和对用户体验的感受，此外还须要了解服务部署、服务运维的知识。

前端的知识领域也从最初的单点扩展到了如今的网状结构，开发方式也从最初的页面级开发到了如今的工程级的开发协做方式。技术体系归根结底是要围绕业务发展、团队规模和团队特色量身打造的，主要目的是为了提高团队总体的研发效率，确保线上的质量和稳定性。

结合前端研发的特色，一个完备的技术体系应当包括流程规范（涵盖开发、构建、部署、运行的各个阶段）、技术工具栈（技术选型和基础工具设施）、构建工具栈、自动化测试、部署流程和部署平台、监控体系（错误监控、性能监控、业务监控、服务监控）。

酒旅前端团队的技术体系

以上是酒旅前端团队的技术体系结构图，咱们有两种共存的项目类型（静态化项目和服务端项目），不一样类型的项目技术工具栈和部署平台略有不一样，静态化项目是经过CDN进行承载，前端使用轻量级的MVVM框架Vue进行功能开发，同时借助移动端样式组件库提高开发效率，经过离线包机制和KNB (Native Bridge)加强页面在容器内的表达能力，最后经过AWP（自建的静态化发布系统）能够高效的进行上线部署。服务端项目不一样的是使用NodeServer进行承载，前端经过AngularJS/VueJS进行功能开发，同时配合NGUI（AngularJS样式组件库）快速进行页面搭建，Node端框架选用的是Express，服务的部署经过OPS（内部的运维发布系统）完成。静态化项目和服务端项目有各自不一样的适用场景，静态化开发模式适合轻量型的项目，好比移动端H5就是一个典型的例子，服务端开发模式适合稍大型的独立项目，这种模式开发能够必定程度上下降纯前端开发的复杂度，并且能够进行服务端渲染，也很是适合对SEO很是敏感的项目。

人机识别服务是咱们在前端角度设计和开发的一套安全机制，它包含前端SDK和基于Node实现的验证服务，能够用于接口的防抓取、防止接口被第三方非法调用等场景。目前线上接入的业务平均拦截率在30%左右，接口TOP90的响应时间在9ms之内，因而可知，Node的应用很大程度上扩展了前端研发的能力范围，使得前端的业务解决方案有了更多的可能性。

构建工具栈中咱们经过Yeoman开发了团队的脚手架，开发者能够经过脚手架快速的进行项目搭建和组件开发，经过Gulp和Webpack进行项目的构建和打包，NPM做为团队统一的包管理工具，Sass做为CSS的预编译工具提高CSS代码的可维护性，Babel做为ES6的编译工具，这样咱们代码里能够用到ES6的一些新特性和语法糖，ESLint做为团队的代码检查工具保证代码的规范一致，而且接入了Sonar。同时借助一些开源的自动化测试工具提高开发阶段的代码质量。

监控体系中Sentry用于线上错误信息的收集和监控，Perf平台用于Web端性能数据的收集，灵犀用于业务的统计和埋点，Falcon一方面用于Server的监控报警，一方面用于业务监控和报警（好比火车票的抢票失败率和接口调用状况），PM25是咱们自建的一套针对NodeServer进程粒度的开源的监控报警系统，用于确保线上Node服务的稳定性，它能够针对进程级别进行监控和远程操做，当现场出现异常时能够第一时间进行现场信息的收集和保留，同时经过日志平台实时上报服务端的日志用于后续进行数据分析和追查问题。

当前技术体系下的效果

技术体系的基本架构原则

• 围绕业务发展
• 结合团队规模和特色
• 自动化、组件化、标准化
• 聚焦效率、体验和质量
• 如无必要，勿增实体

团队技术选型的一些思考

为何选用Node做为先后端中间层，以及它所发挥的做用

• 做为很薄的中间层，前端可以独立部署独立发布，同时下降大型项目的纯前端开发复杂度
• 全栈开发拓展前端的能力范围，可以更好地支撑业务，同时也能让工程师获得能力提高

为何移动端采用强混合的开发方式

• 新业务层出不穷，须要快速迭代上线并验证业务模式，H5开发有自然的优点
• 采用强混合的开发方式能够兼顾开发效率和体验，使得H5页面在客户端接近原生的体验

移动端为何选用Vue而非React

• 很是轻量的一款MVVM框架，生态健全、高性能、高可控性和优秀的组件化机制
• 便于技术栈统一，Vue2.0已经支持SSR，PC端和移动端能够采用相同的技术选型
• 阿里开源的Weex基于Vue（Vue-Native），是一种全新的Hybrid开发途径，会持续关注
• 自然适合移动端场景，虽然不支持IE8，但兼容性要求较高的PC端项目较少
• 移动端基于Vue和AWP的纯静态化开发方案能够应用离线包等离线化方案提高加载速度
• 尤雨溪目前全职开发，更新及时（前不久刚发布了2.0版本，已经支持服务端渲染）
• React虽有专业团队维护，但Licence有潜在的商业风险，而且较Vue而言体积庞大

自动化、组件化、标准化

咱们团队目前近80人的规模，经过自动化、组件化和标准化的方式可以解放生产力，让工程师和开发者聚焦在业务逻辑、技术创新上。目前团队内各项核心指标的监控和推送都会集成内部的IM系统，能够经过自动化工具进行故障通报、我的和项目方面可以对时间投入进行追踪和分析，重复工做能够经过脚手架进行一键傻瓜式操做，组件化方面沉淀了移动和PC的样式组件库、组件平台，标准化主要体如今整个团队的技术栈高度统一，从而更可以在技术上有深耕和积累、而且抹平了项目间人员流动的成本。

过去未去，将来已来。前端没有终点，当你觉得是终点的时候，实际上是还未看到新的起跑线。前端行业的发展太过迅速，所以做为一名优秀的前端工程师，咱们必须使用动态的思惟去搭建、优化咱们的技术体系，更好的服务于业务、支撑业务的快速发展。

做者简介

郭凯，美团点评酒旅事业群前端团队负责人，高级技术专家，资深互联网人，全栈工程师，工做狂，崇尚工匠精神，曾就任于音悦台、淘宝旅行。翻译做品有《编写可维护的JavaScript》、《第三方JavaScript编程》，有In、Juicer、jSQL、F2E.im、PM25等开源项目，业余时间负责开源前端技术社区F2E的开发和维护。