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 条评论
登录 后参与评论

相关文章

来自专栏FreeBuf

如何在网络中追踪入侵者(三):主机追踪

在之前的文章中,我们专注于追踪和分析从网络中得到的数据。但事实上,在网络中追踪不是唯一的选项。在企业的主机和服务器上有大量的数据集来发掘未知的恶意行为,包括运行...

1869
来自专栏Python绿色通道

Python抓取公众号文章并生成pdf文件保存到本地

前面一篇文章用Python抓取某大V的公众号文章由于做的时间比较仓促还留下了几个问题:

5513
来自专栏Petrichor的专栏

csdn: 添加站内搜索框

CSDN博客 对我来说是一个很重要的 Online Notebook,我日常会把每天新学到的东西都记录下来以方便将来查阅。

1912
来自专栏杨建荣的学习笔记

今天碰到的几个问题20151023(r6笔记第97天)

每天工作中会碰到一些问题,圈内朋友也会有各种问题,解决问题总是能够带来很大的成就感,有时候感觉在做两份工作。:) 帮助别人的意义就在于别人碰到的坑,你可能也会碰...

3064
来自专栏程序员互动联盟

vim 带你装逼带你飞(一)

前言:逃离windows有很长时间了,特别是当今android盛行的时代,我们没有理由不选择ubuntu作为编译开发android之首选。其实操作系统只是我们使...

3437
来自专栏樊华恒的专栏

海量之道系列文章之弱联网优化 (五)

在客户端接入服务器调度策略的演化过程中,我们最早采用了“就近接入”的策略,在距离客户端更近的地方部署服务器或使用CDN,期望通过减少RTT来提高网络交互响应性能...

5410
来自专栏编程

高级运维工程师学习路线

信息安全公益宣传,信息安全知识启蒙。 ? 运维工程师在前期是一个很苦逼的工作,在这期间可能干着修电脑、掐网线、搬机器的活,显得没地位!时间也很碎片化,各种零碎...

3917
来自专栏IT技术精选文摘

NoSQL和数据可扩展性

介绍 本文提供了一个易于理解和有用的一组有关当前可用NoSQL数据库的信息。 可扩展数据架构 可扩展数据架构已发展用于提高整体系统效率并降低运营成本。 具体的...

3746
来自专栏SDNLAB

SDN中的Segment Routing

作者简介:晏志文,原就职于中兴通讯,目前供职于安徽皖通邮电股份有限公司。数通测试专家,本领域从业深耕多年,熟悉传统网络技术及行业解决方案,密切关注新兴网络,IC...

1924
来自专栏魏艾斯博客www.vpsss.net

搬瓦工 Bandwagonhost VPS 的操作系统如何选择

9364

扫码关注云+社区