Shield：支撑美团点评品类最丰富业务的移动端模块化框架开源了

àì夳堔傛蜴生んèń 2023-10-18 23:22 8阅读 0赞

点击上方蓝字订阅，不错过下一篇好文章

###     ###

###  ###

引言

一直以来，如何能更高效地开发与维护页面是Android与iOS开发同学最主要的工作和最关心的问题。随着业务的不断发展，根据特定业务场景产生的定制化需求变得越来越多。单一页面往往需要根据不同业务、不同场景甚至不同用户展示不同的内容。在这样的背景下，我们开始考虑对页面进行切分，把一个页面切分成多个模块，以提高复杂页面的可维护性。

各种不同的定制化页面如下：

![0?wx\_fmt=png][0_wx_fmt_png]

Shield是美团点评到店综合团队模块化UI界面解决方案，它不仅仅是一个Native（Android&iOS）的UI开发框架，还是到店综合团队基于自身复杂的业务场景沉淀出来的UI开发最佳实践。它具备高可复用、容易协同开发等特性，还包括后端动态配置、动态模块等一系列解决方案，目前已经在GitHub上开源：[https://github.com/Meituan-Dianping/Shield][https_github.com_Meituan-Dianping_Shield]。

###  ###

什么是模块

###     ###

在Shield框架里，页面是由一个个模块（Agent）组成的。模块是页面中粗粒度的抽象组件，包含部分页面UI展示和与之相关的业务逻辑。这些模块按线性的方式排布在页面中，可以很灵活地调换位置且互不影响。每个模块都有自己独立的生命周期，可以单独通过网络获取数据、渲染视图等等。

![0?wx\_fmt=png][0_wx_fmt_png 1]

每一个模块都有自己独立的逻辑和UI，模块之间完全解耦，这样就可以很方便地通过排列模块来完成不同的页面定制化需求，使一个页面可以展示不同的内容。同时，由于模块并不依赖某一具体页面，模块也可以在不同的页面之间进行复用。

不同于MVP或是MVVM的设计模式，Shield的模块化拆分方式根据视图和业务逻辑对页面进行横向切分。模块化的拆分与MVP等架构方式的拆分并不冲突。开发者完全可以在Shield的某个模块里运用MVP或MVVM的架构方式，来对页面的逻辑进行进一步的拆分以提升代码复用性，使模块逻辑变得更加清晰。

![0?wx\_fmt=png][0_wx_fmt_png 2]

为了更好地抽象UI界面开发的各种场景，Shield框架赋予了模块完整的页面能力，包括完整的页面生命周期和上下文环境（Context）等。这样模块的开发方式与原有的页面开发方式完全一致，页面不再关心具体的UI展现，而是把这些都交给模块。同时模块可以单独开发维护，运行在任意接入了Shield框架的页面中。

以下是模块Agent的接口定义：

public interface AgentInterface {
    
            void onCreate(Bundle savedInstanceState);
    
            void onStart();
    
            void onResume();
    
            void onPause();
    
            void onStop();
    
            void onDestroy();
    
            Bundle saveInstanceState();
    
            void onActivityResult(int requestCode, int resultCode, Intent data);
    
            String getIndex();
    
            void setIndex(String index);
    
            String getHostName();
    
            void setHostName(String hostName);
    
            SectionCellInterface getSectionCellInterface();
    
            String getAgentCellName();
    }

一个Agent模块的结构主要包含两部分：

1.  生命周期回调。
2.  提供一个SectionCellInterface。

其中，SectionCellInterface是模块的视图逻辑抽象。一个模块可以为页面提供一个连续的包含多块（Section）的UI片段，每一块视图可以是视觉上的单行（Row）视图，也可以是多行视图。具体的接口定义如下：

public interface SectionCellInterface {
    
        int getSectionCount();
    
        int getRowCount(int sectionPosition);
    
        int getViewType(int sectionPosition, int rowPosition);
    
        int getViewTypeCount();
    
        View onCreateView(ViewGroup parent, int viewType);
    
        void updateView(View view, int sectionPosition, int rowPosition, ViewGroup parent);
    
    }

###     ###

###  ###

一个模块化页面的组成结构

有了模块承担绝大部分的页面逻辑，Shield框架中的页面就变成了一个单纯的模块容器。页面通过不同的模块配置（Config）来灵活改变自己的视图展现，同时在模块配置（Config）中，定义了模块的位置信息，这样除了本地配置之外，Shield框架也可以很容易就能支持后端动态下发模块配置，以达到客户端的一定动态性。

![0?wx\_fmt=png][0_wx_fmt_png 3]

在接入了Shield框架的页面中，还有两个比较重要的角色，分别是模块管理器（AgentManager）和视图管理器（CellManager）。

其中，模块管理器（AgentManager）负责模块的创建、销毁、生命周期分发等工作。而视图管理器（CellManager）则负责将模块所提供的视图片段（SectionCellInterface）有序地添加到页面中，并在适当的时候对这些视图进行更新。

![0?wx\_fmt=png][0_wx_fmt_png 4]

###     ###

###  ###

模块通信

在某些场景下，页面中的一些视图片段会根据用户操作发生一些联动。而当这些视图片段处于不同的模块中时，这些模块就需要进行通信。

在这种情况下，如果让模块与模块直接进行交互，就无法避免模块之间的耦合，这样既无法保证模块的独立性，也影响可复用性。于是我们基于RxJava设计实现了观察者模式的白板组件，在Shield框架中称之为WhiteBoard。WhiteBoard在一个页面中唯一，所有模块共享，模块之间或是模块与页面的通信都通过WhiteBoard来进行。

![0?wx\_fmt=png][0_wx_fmt_png 5]

###     ###

###  ###

Shield框架关注的重点

###     ###

#### **灵活配置** ####

只要把模块配置放到远端，通过统一的配置后台进行配置，就可以很轻松地实现App中各个页面一定的动态化特性，无需借助其它插件化、热补丁等方案。

下图便是美团点评开发的页面模块配置后台：

![0?wx\_fmt=png][0_wx_fmt_png 6]

###     ###

#### **多端统一** ####

我们通过提供多端统一的模块化框架，减少开发者在不同平台的视觉实现差异上耗费的精力，从而将精力集中于如何实现具体的视图片段。Shield框架针对Native开发中常见的画分隔线、loading动画等一系列场景做了抽象，为模块提供了丰富的定制化功能，简化了App开发过程中占比较高的视图开发工作。

###     ###

#### **动态化** ####

模块化框架对模块的业务和视图逻辑行为都做了一定的抽象，这样，ReactNative一类的动态化方案不仅可以运用到视图绘制层面上，同时也可以通过不同的JSBridge实现模块业务逻辑的动态化。而配置后台不仅可以动态调整模块，同时可以动态调整模块的内部展示，这样整个模块化框架可以通过配置后台实现不同粒度的页面动态化方案。有关动态模块的相关方案，后续将另文详述。

###     ###

#### **页面混排与稳定性** ####

借助于模块化框架，可以有效地降低诸如ReactNative等开源框架的接入成本，无需对整个页面进行改造，而是在模块级的粒度上进行快速试错，有效控制影响范围，提升页面整体的稳定性。

###     ###

###  ###

围绕模块化框架的工具链及生态圈

我们还在逐步建设围绕模块化框架的工具链及生态圈，包括基于模块的自动化测试、声明式打点、动态化等项目。

###     ###

###  ###

结语

在美团点评的多业务线运营背景下，大部分页面通过Activity+Fragment+Agent的模块化架构支撑了大量的业务差异化定制需求。同时我们结合业务特点，沉淀了列表型模块、Tab锚点型模块等多种组件型模块。除了提升开发效率外，模块化框架在我们针对各业务解耦、跨Team协同开发等方面也扮演了重要的角色。

希望大家多多支持我们的开源项目[Shield][https_github.com_Meituan-Dianping_Shield]，也欢迎大家多提意见，互相交流移动端架构方面的经验与心得。

###  ###

招聘

美团点评到店综合前端研发中心招聘，大量职位open。

1.  前端研发工程师。
2.  Node开发工程师。
3.  iOS/Android客户端开发工程师。

欢迎实习生（2019年及以后毕业）、2018年毕业生及社招同学踊跃投递简历。

工作描述：

1.  负责各业务前端研发工作，涵盖Mobile Web、小程序、App、自研硬件等多终端平台。
2.  负责前端开发、测试、上线、监控系统研发。
3.  负责开放平台、第三方开发者平台系统构建及研发。

有意者请邮件至：nihao\#meituan.com。

热门博客

前端

###  ###

### [美团金融扫码付静态资源加载优化实践][Link 1] ###

### [美团App插件化实践][App] ###

### [关于刘海打理这种事儿，美团点评的iOS工程师早就有经验了，不信你看！][iOS] ###

###  ###

美团点评

技术团队

http://tech.meituan.com

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

长按二维码关注我们

更多技术博客：[美团点评技术博客][Link 2]。

PS：正文中标绿的名词均为参考链接，可点击查询。

查看文中代码，可点击“阅读原文”。

[0_wx_fmt_png]: https://img-blog.csdnimg.cn/img_convert/94916e1472915b60b962f5cdfea638db.png
[https_github.com_Meituan-Dianping_Shield]: https://github.com/Meituan-Dianping/Shield
[0_wx_fmt_png 1]: https://img-blog.csdnimg.cn/img_convert/00e89547ccf08f5476db5d3f723bff40.png
[0_wx_fmt_png 2]: https://img-blog.csdnimg.cn/img_convert/e0371d09ec909ff12adc02737db47ff7.png
[0_wx_fmt_png 3]: https://img-blog.csdnimg.cn/img_convert/e82d4c067577275b95f711083513fb71.png
[0_wx_fmt_png 4]: https://img-blog.csdnimg.cn/img_convert/c1c9066ca9e2085864c6d24c747663ac.png
[0_wx_fmt_png 5]: https://img-blog.csdnimg.cn/img_convert/0bbca75261d9bf25d30989f4b5f6078b.png
[0_wx_fmt_png 6]: https://img-blog.csdnimg.cn/img_convert/f112af1e97e56863a71633742337a0bd.png
[Link 1]: https://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651747208&idx=1&sn=b9fc5430049e201c8973126bde8bc202&scene=21#wechat_redirect
[App]: https://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651746860&idx=1&sn=123b520674fa02b356297a083d38d7d6&scene=21#wechat_redirect
[iOS]: https://mp.weixin.qq.com/s?__biz=MjM5NjQ5MTI5OA==&mid=2651746838&idx=1&sn=44565f985c8da698b4fde31bf33d6dc2&scene=21#wechat_redirect
[640_wx_fmt_jpeg]: https://img-blog.csdnimg.cn/img_convert/766858158abb94ae42a99bcb5bb5efb5.png
[Link 2]: http://tech.meituan.com/