专栏首页美团技术团队Shield:支撑美团点评品类最丰富业务的移动端模块化框架开源了

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

引言

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

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

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

什么是模块

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

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

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

为了更好地抽象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框架也可以很容易就能支持后端动态下发模块配置,以达到客户端的一定动态性。

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

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

模块通信

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

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

Shield框架关注的重点

灵活配置

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

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

多端统一

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

动态化

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

页面混排与稳定性

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

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

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

结语

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

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

本文分享自微信公众号 - 美团点评技术团队(meituantech),作者:何治

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2017-12-21

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • LsLoader——通用移动端Web App离线化方案

    背景 由于JavaScript(以下简称JS)语言的特性,前端作用域拆分一直是前端开发中的首要关卡。从简单的全局变量分配,到RequireJS实现的AMD模块方...

    美团技术团队
  • 分布式队列编程:模型与实战

    介绍 作为一种基础的抽象数据结构,队列被广泛应用在各类编程中。大数据时代对跨进程、跨机器的通讯提出了更高的要求,和以往相比,分布式队列编程的运用几乎已无处不在。...

    美团技术团队
  • iOS 覆盖率检测原理与增量代码测试覆盖率工具实现

    对苹果开发者而言,由于平台审核周期较长,客户端代码导致的线上问题影响时间往往比较久。如果在开发、测试阶段能够提前暴露问题,就有助于避免线上事故的发生。代码覆盖率...

    美团技术团队
  • Github上如何添加 LICENSE 文件?

    什么是开源软件?   开源软件是所有人都可以修改和补充的软件,因为开源软件的 license 协议允许这样做。   Git版本控制系统就是开源的软件。  ...

    黑泽君
  • 如何理解Java中的自动拆箱和自动装箱?

    回到家后小伟赶紧查资料,我透,这不就是问基本类型跟封装类型吗,面试官整啥名词呢...

    niceyoo
  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • 微信小程序开发系列七:微信小程序的页面跳转

    这个系列教程的前六篇文章我们都在单个的视图上操作。现在让我们创建第二个视图,然后实现从第一个视图到第二个视图的跳转。

    Jerry Wang
  • 技术分析!要我怎么说!

    或者设想下,病人在诊所拍了张心电图,医师用手比划并标出黄金分割比;在复核病人脉搏血压数据时,指出“三角形态”。这种情况病人肯定不敢再请这位医师看病。

    量化投资与机器学习微信公众号
  • 【python】IDLE与python(

    idle是GUI形式,command line是命令提示符形式,都是和Python解释器交互的手段。

    py3study
  • 数据可视化产生生产力|洞见

    数据可视化就是借助于图形化手段,清晰有效地进行信息传达与沟通。许多人会着眼于“可视化”,认为数据可视化就是将一系列看上去很炫、很复杂的图表展示在页面上。其实不然...

    ThoughtWorks

扫码关注云+社区

领取腾讯云代金券