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)

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

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏晓晨的专栏

Docker实用技巧之更改软件包源提升构建速度

地球,中国,成都市,某小区的阳台上,一青年负手而立,闭目沉思,阵阵的凉风吹得他衣衫呼呼的飘。忽然,他抬起头,刹那间,睁开了双眼,好似一到精光射向星空,只见这夜空...

902
来自专栏python爬虫实战之路

利用scrapy进行八千万用户数据爬取与优化(一)

最近准备把数据分析这块补一下,加上一直在听喜马拉雅的直播,有一个比较喜欢的主播,突然萌生了爬取喜马拉雅所有主播信息以及打赏信息,来找一找喜马拉雅上比较火的主播和...

682
来自专栏iOSDevLog

Xcode 10

Xcode 10包含为所有Apple平台创建出色应用所需的一切。现在Xcode和Instruments在macOS Mojave上的新Dark Mode中看起来...

622
来自专栏逸鹏说道

互联网+ 何人能挡?带着你的Code飞奔吧!

SQLServer性能优化专题 01.SQLServer性能优化之----强大的文件组----分盘存储(水平分库) http://www.cnblogs.com...

1877
来自专栏静默虚空的博客

细说Java主流日志工具库

概述 在项目开发中,为了跟踪代码的运行情况,常常要使用日志来记录信息。 在Java世界,有很多的日志工具库来实现日志功能,避免了我们重复造轮子。 我们先来逐一了...

2548
来自专栏程序人生

如何使用一门新的语言

在去年的文章里,我谈了 如何学习一门新的技术。那篇文章通篇形而上,讲大道理,读者颔首称赞,但回过头来在应用层面还是懵懵懂懂,不明就里。今天,我就我过去三周的经验...

2666
来自专栏竹清助手

深入理解什么是RESTful API ?

越来越多的人开始意识到,网站即软件,而且是一种新型的软件。   这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(hig...

472
来自专栏Flutter入门到实战

深入理解什么是RESTful API ?

越来越多的人开始意识到,网站即软件,而且是一种新型的软件。   这种"互联网软件"采用客户端/服务器模式,建立在分布式体系上,通过互联网通信,具有高延时(hi...

662
来自专栏SDNLAB

SDNLAB技术分享(二):从Toaster示例初探ODL MD-SAL架构

Toaster是wiki上的一个例子。通过学习它,我们可以了大致了解MD-SAL架构的实现原理和设计思想。下面我们就直奔主题,看看Toaster例子吧。例子原文...

35110
来自专栏phodal

哪个才是最适合你的 Web UI 自动化测试框架

最近,项目上出于系统性稳定性、减少测试工作量考虑,打算在 Web 前端引入 BDD。由于上一个项目写了一定的 Cucumber 代码(BDD 测试框架之一),这...

4477

扫描关注云+社区