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

酒旅前端团队的技术体系

随着科技的发展,终端种类越来越丰富,前端作为连接用户终端与后端服务、提供视觉体验的关键环节,发展迅速。相比十年前,前端的边界和范围变得更加广泛,甚至有点模糊,一名优秀的前端工程师不仅需要精通自己的专业领域,了解设备终端的特点、OS、运行环境,同时还需要具备良好的审美和对用户体验的感觉,以及了解服务部署、服务运维的知识。

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

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

酒旅前端团队的技术体系

以上是美团点评酒旅前端团队的技术体系结构图,我们有两种共存的项目类型(静态化项目和服务端项目),不同类型的项目技术工具栈和部署平台略有不同,静态化项目是通过CDN进行承载,前端使用轻量级的MVVM框架Vue进行功能开发,同时借助移动端样式组件库提升开发效率,通过离线包机制和KNB(Native Bridge)增强页面在容器内的表达能力,最后通过AWP(自建的静态化发布系统)可以高效的进行上线部署。服务端项目不同的是使用NodeServer进行承载,前端通过AngularJS/Vue.js进行功能开发,同时配合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(详情可以参考之前的博客文章《美团酒店Node全栈开发实践》)是我们自建的一套针对NodeServer进程粒度的开源的监控报警系统,用于确保线上Node服务的稳定性,它可以针对进程级别进行监控和远程操作,当现场出现异常时可以第一时间进行现场信息的收集和保留,同时通过日志平台实时上报服务端的日志用于后续进行数据分析和追查问题。

当前技术体系下的效果

技术体系的基本架构原则

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

团队技术选型的一些思考

为什么选用Node作为前后端中间层,以及它所发挥的作用

  • 作为很薄的中间层,前端能够独立部署独立发布,同时降低大型项目的纯前端开发复杂度。
  • 全栈开发拓展前端的能力范围,能够更好地支撑业务,同时也能让工程师得到能力提升。

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

  • 新业务层出不穷,需要快速迭代上线并验证业务模式,H5开发有天然的优势。
  • 采用强混合的开发方式可以兼顾开发效率和体验,使得H5页面在客户端接近原生的体验。

移动端为什么选用Vue而非React

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

标准化、组件化、自动化

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

过去未去,未来已来。前端没有终点,当你以为是终点的时候,其实是还未看到新的起跑线。前端行业的发展太过迅速,因此作为一名优秀的前端工程师,我们必须使用动态的思维去搭建、优化我们的技术体系,更好的服务于业务、支撑业务的快速发展。

原文发布于微信公众号 - 美团点评技术团队(meituantech)

原文发表时间:2017-05-12

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏架构师之路

一分钟了解微服务的好处和陷阱

微服务架构设计代表了一种架构设计思想,配合现在的容器技术(如 Docker),可在软件开发流程、部署、服务维护等各方面产生效率提升。 但不一定所有的业务场景都适...

3674
来自专栏EAWorld

企业全面移动化实践指南

随着智能手机普及和移动网络的提速,企业移动办公正在逐步成为主流工作模式,企业移动移动信息化是必然趋势。企业全面移动化不是一件简单的事情,在实践过程中肯定会遇到诸...

781
来自专栏钱塘大数据

【推荐阅读】顶尖数据工程师的五种思维模式

《THe Effective Engineer》的作者Edmond Lau采访了很多硅谷顶级科技公司的顶尖软件工程师。他发现这些给世界带来巨大影响的的工程师们至...

3307
来自专栏CSDN技术头条

58同城沈剑:好的架构源于不停地衍变,而非设计

对很多创业公司而言,随着业务增长,网站的流量也会经历不同的阶段。从十万流量到一百万流量,再从一百万流量跨越到一千万甚至上亿的流量,网站的架构需要经历哪些变化?在...

2137
来自专栏韩伟的专栏

缓存系统在游戏业务中的特异性

本文主要从以下几个方面:电子商务/一般互联网类业务的数据处理流程、游戏类业务的数据处理流程、一般的缓存系统的特点在游戏中的问题、本地分布式缓存服务的特点和优势介...

1.5K0
来自专栏智能算法

顶尖程序员的五种思维模式,你具备吗?

《THe Effective Engineer》的作者Edmond Lau采访了很多硅谷顶级科技公司的顶尖软件工程师。他发现这些给世界带来巨大影响的的工程师们至...

34815
来自专栏熊二哥

《大型网站技术架构》学习笔记-01概述

李智慧老师的大型网站架构已经买了两年了,之前大体看过一次,不过还未内化为自己的本领,最近项目空闲,决定尽力掌握这部分的知识,以跟上大师的节奏。今天是儿童节,祝自...

2045
来自专栏LuckQI

吐血分享5个黑科技网站,每个都是十分良心

最近写了一些技术帖子,每天原创写技术贴对于写基本知识来说时间上来说是还算能控制,但是对于写一个思路的技术文章难度就大大的增加了。为了更好的写思路文章。以后对于思...

651
来自专栏DevOps时代的专栏

顾宇:成功的微服务的技术特征及其反思

在上一篇文章里,我们介绍了如何定义一个微服务改造的成功,并介绍了落地成功的微服务组织结构有哪些特征。这篇文章我们来介绍一下成功的微服务的技术特征以及我们在微服务...

462
来自专栏前端架构与工程

前端工程师的基本素养

阅读原文 闲来无事,今天随便聊聊前端工程师应该具备哪些素质,权当博大家一笑。 前端工程师到底是工作很简单的“切图仔”,还是包揽客户端和中间层的“大前端”?招聘市...

1777

扫码关注云+社区