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

这是奶爸码农第47篇原创文章，点击上方蓝字关注

引言

在上篇（见文末推荐阅读）中，我已经介绍了美团点评的业务情况、大前端的技术体系，其中大前端的技术全景图如下：

上篇重点介绍了工程化和代码质量的部分，工程化涵盖了客户端持续集成平台-MCI、全端监控平台-CAT、移动端集成日志库-Logan和全栈前端框架-Era。代码质量部分重点介绍了ESLint在大规模项目中落地实践和移动端静态分析工具-Hades。

在这篇文章中，我们将继续介绍大前端技术体系中的跨平台、UI组件库和前端框架。

跨平台

跨平台动态化方案

跨平台、动态化始终是移动互联网时代永恒的话题，在性能体验和研发效率之间不断寻找平衡，诞生了一批批跨平台动态化方案。

将业界主流的跨平台方案整理一下，大致分为四个类别：

• 布局动态化：主要依赖是客户端的渲染能力，通过约定布局配置的数据结构（例如JSON），可以后端动态下发布局内容，客户端解析然后进行渲染，从而实现一定能力上的布局动态化。

• 虚拟运行环境：类RN、Flutter的解决方案，RN/Weex是通过JS来编写前端代码，然后通过Virtual Dom转换成Native界面元素进行渲染，达到了研发效率和性能渲染的平衡。Flutter在RN的理念上又迈出一步，将底层渲染引擎用C/C++自己实现，从而减少JS/Native之间通信成本，而且统一了iOS、Android双平台的组件渲染样式。

• 业务插件化：在Android系统中，通过特有的插件化能力，实现动态更新的能力，但是不能支持iOS，因此多用于Android系统中Hot fix。

• Web容器增强：本质都还是通过WebView来渲染、执行页面功能，通过JSBridge来补强实现原生能力。可以通过本地离线包减少资源文件的远程加载，从而提高用户体验。

在跨平台、动态化方案中并不存在银弹，每个方案都存在一定的取舍，下图就总结了各个方案在用户体验、稳定性、上线实时性、开发效率和迁移效率五个方面的对比总结：

每种方案都有优点和缺点，所以每种方案的适用场景是不一样的。

• 布局动态化：稳定性要求高，性能要求高，适合高流量的运营页面

• 虚拟运行环境：可用于新业务探索，或者对于性能要求不高，业务迭代迅速的业务型功能

• 业务插件化：Android热更新，或者老业务的迁移

• Web容器增强：短期的活动、营销类页面，对于性能交互要求不高，使用周期不长的业务

美团的动态化方案

美团点评针对多种业务形态和各个业务的阶段，沉淀了多种跨平台解决方案，总结如下图：

每种技术方案都需要周边的配套设施来支持，从底层依次是运行环境、辅助工具和业务接口，所以在每种技术选型上都需要慎重，尤其对于中小型公司，结合自身业务寻找合适的技术框架来满足业务开发最为重要，而不要仅仅为了追求最新、最炫而盲目采纳新技术。

MRN

MRN-Meituan Reative Native，顾名思义可以知道这是美团基于RN框架进行封装优化的一个跨端动态化框架，下图可以看到MRN的整个周边设施建设：

需要涵盖完整的研发周期，例如发布系统中需要能够有打包MRN的能力、对MRN代码进行发布和代码检查；需要配套的开发工具，提供将原生代码转换成MRN的工具；在业务开发中，首先要对MRN框架进行大量优化，对其性能进行优化，核心包进行拆包优化大小，抹平双平台的差异，同时也需要沉淀大量业务的MRN组件和原生能力的桥接；线上运维部分需要包括对异常错误、性能、稳定性等方面的监控。