解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏) (3)

 

解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

 

为了能在团队内实现 JavaScript 代码规范的统一,在分析和思考团队规模化应用存在的问题后,我们设计了一套完整的技术解决方案。该方案包括多场景统一的 ESLint 规则配置、代码集成交付检查、自动化接入工具、执行状况监测分析等四个模块。通过各个模块协调配合,共同解决上文提出的问题,在降低维护成本、提升执行效率的同时,也保障了代码规范的统一。

多场景统一的 JavaScript 规范:该模块是整个方案的核心,借助 ESLint 的特性,通过分层分类的结构设计,在保证基础规则一致性的同时,实现了对不同场景、技术选型的支撑。

代码集成交付检查:该模块是方案落地执行的保障,将代码静态检查集成到持续交付工作流中。具体设计实现上,在保证交付质量的同时,也通过定制集成检查工具降低了开发者的应用执行成本。

自动化接入和升级方案:通过命令行工具提供“一键”接入/升级能力,同时集成到团队脚手架中,大大降低了工程接入和维护的成本。

执行状况监测分析:通过对工具运行和代码集成交付检查过程进行埋点、检查结果收集和分析,了解方案的应用状态和效果。

详细可以查看参考资料[5]

Hades - 移动端静态分析

按照 Hades 的架构目标进行基础方案选型以后,我们来看下 Hades 的整体技术框架,可以用下图所示的四层架构表示:

 

解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

 

下面简述下这几层的不同职责。

编译器架构层。Clang 的诸多优势前文已经提到,这也是 Hades 的基础依赖。

Hades 核心层。在编译器架构层,我们借助 Clang 得到了代码的抽象语法结构表示 AST。而 Hades 核心层的职责便是将 AST 解析成人们更容易理解的,更高层级的语义模型。

Hades 接口封装层。抽象出的模型,能够像 Clang 提供丰富 AST 访问接口那样,为开发者提供丰富的模型访问接口。

静态分析应用。通过 Hades 接口封装,我们无需清楚底层模型是如何生成的,在这一层我们可以制作 Lint 或者其它监控、分析工具。

 

解密国内BAT等大厂前端技术体系-美团点评之上篇(长文建议收藏)

 

不同于传统的Clang API或者OCLint,HadesModel 是基于 AST 的更高层级语义表达,它能够序列化为 JSON 格式并描述完整的编译单元,这种结构化信息使得静态分析能更接近于开发者阅读理解源码的思维习惯。

Hades 作为大众点评移动研发的基础设施之一,在实践中得到了广泛的应用,为大型 App 项目的日常维护、代码分析提供支持。基于 HadesModel 的静态分析易上手,开发接入成本低,能够理解代码语义,具备全局分析能力等诸多优点。

详细可以查看参考资料[6]

参考资料

[1]MCI-大众点评千人移动研发团队怎样做持续集成?:mp.weixin.qq.com/s/XY3u-bMgs…

[2]开源实时监控系统CAT 3.0发布:mp.weixin.qq.com/s/9uePYJpVE…

[3]深度剖析开源分布式监控CAT:tech.meituan.com/2018/11/01/…

[4]Logan-美团点评的开源移动端基础日志库:mp.weixin.qq.com/s/XM4bhncHz…

[5]ESLint 在中大型团队的应用实践:mp.weixin.qq.com/s/jb8yozm-p…

[6]Hades-移动端静态分析框架:mp.weixin.qq.com/s/CwKtLnxMW…

写在最后

这是美团点评大前端技术体系解密的上篇,主要介绍了工程化和代码质量相关的沉淀,当然这些仅仅基于公开资料整理而成,仅仅是整个技术体系的冰山一角。

最后,美团点评上海、北京都在大量招前端资深/专家工程师,如果有兴趣近距离接触美团点评大前端技术框架,欢迎私信给我进行内推。

推荐阅读

解密国内BAT等大厂前端技术体系-阿里篇(长文建议收藏)

解密国内BAT等大厂前端技术体系-百度篇(长文建议收藏)

解密国内BAT等大厂前端技术体系-腾讯篇(长文建议收藏)

解密国内BAT等大厂前端技术体系-携程篇(长文建议收藏)

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zwzzjf.html