Shield: A Modular UI Framework for Android and iOS

Efficient development and maintenance of complex pages is a major concern for Android and iOS developers. As business scenarios become more diverse, a single page often needs to display different content for different users or contexts. To improve maintainability, the Meituan‑Dianping "Shield" solution splits a page into multiple modules.

In Shield, a page consists of a series of modules (Agents). Each module is a coarse‑grained component that encapsulates UI and related business logic, has its own lifecycle, and can independently fetch data and render views. Modules are arranged linearly, can be reordered freely, and are completely decoupled from one another, enabling reuse across pages.

The core interfaces are defined as follows:

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();
}

Each Agent provides a SectionCellInterface that abstracts the view logic of the module:

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);
}

A Shield‑based page acts as a pure container for modules. The page’s appearance is driven by a configuration (Config) that specifies which modules to load, their order, and their parameters. Because the configuration can be fetched from a backend, the UI can be dynamically adjusted without releasing a new app version.

Two key runtime components manage the modular architecture:

AgentManager : creates, destroys, and dispatches lifecycle events to modules.

CellManager : collects the view fragments supplied by modules (via SectionCellInterface) and inserts them into the page in the correct order, updating them when needed.

When modules need to communicate—e.g., a user action in one module should affect another—Shield uses a shared WhiteBoard built on RxJava. The WhiteBoard implements an observer pattern, allowing any module or the page itself to publish and subscribe to events without direct coupling.

Key focus areas of the Shield framework :

Flexible configuration : Module layouts are defined in a remote config service, enabling dynamic UI changes without additional plugins or hot‑patches.

Cross‑platform consistency : The same modular architecture works on both Android and iOS, reducing platform‑specific UI discrepancies.

Dynamic behavior : Both UI rendering and business logic can be altered at runtime via configuration or JavaScript bridges (e.g., for ReactNative).

Page mixing and stability : By isolating changes to individual modules, the impact of experiments is limited, improving overall app stability.

Shield is accompanied by a growing toolchain and ecosystem, including automated module testing, declarative analytics, and dynamic feature delivery.

In summary, the modular architecture (Activity + Fragment + Agent) adopted by Meituan‑Dianping supports large‑scale, differentiated business requirements while enhancing development efficiency, decoupling, and cross‑team collaboration.

The project is open‑source on GitHub: https://github.com/Meituan-Dianping/Shield . The team also posted recruitment information for front‑end, Node, and mobile client engineers.