How Zhenkun's Mobile Team Built a Scalable Componentized Architecture with Flutter

Mobile Technology System Evolution Background

With Zhenkun's rapid business growth, the mobile team needed an efficient technology system to support fast evolution. By researching industry trends and aligning with team capabilities, they planned and implemented a new mobile technology architecture in 2020.

2020 Technology System Planning

The plan covered development, compilation/deployment, and online operation.

2020 Technology System Implementation Overview

Componentization

As mobile projects grew, codebases became large and tightly coupled, leading to high maintenance costs, slow compilation, and collaboration challenges. Componentization reduces complexity, enables module reuse, and improves team efficiency.

Heavy code coupling makes changes affect multiple modules, increasing cost.

Team expansion requires better multi‑developer collaboration; components isolate business modules for independent development, compilation, and testing.

Monolithic projects suffer from slow compilation as code size increases.

Componentization assembles independent sub‑modules into a whole, lowering coupling and allowing independent execution.

The final architecture consists of three layers:

Host Layer : a shell app containing global configuration and the main Activity, without business code.

Business Layer : contains business components with isolated dependencies, communicating via a routing bus.

Platform Layer : provides foundational SDKs and generic code for business components.

Upper modules depend only on lower ones, avoiding cross‑layer dependencies. Communication uses a routing framework for one‑to‑one page navigation and an event bus for many‑to‑many interactions.

Componentization achieved several goals:

Improved component reuse, reducing development and maintenance costs.

Reduced coupling, simplifying business migration.

Enabled independent development and ownership of business modules.

Accelerated compilation by allowing separate packaging.

Facilitated flexible assembly of components to quickly generate new applications.

Flutter Hybrid Development

Flutter has become a key technology for many partners. To improve development, testing, and delivery efficiency, the team fully embraced Flutter while maintaining a gradual migration from native code.

Flutter rewrites the rendering engine and development language, delivering high‑fidelity UI consistency across Android and iOS and performance comparable to native apps.

Because a full migration is risky, the team adopted a progressive approach using FlutterBoost for hybrid integration. FlutterBoost shares a single engine, allowing a native container to drive a Flutter page container via message passing, handling page mapping and navigation.

Routing is unified by combining FlutterBoost with ARouter, while state management uses Provider, which relies on three concepts:

ChangeNotifier : encapsulates app state and notifies listeners via notifyListeners().

ChangeNotifierProvider : exposes a ChangeNotifier instance to descendant widgets.

Consumer : consumes the provided model to rebuild UI when state changes.

Using Provider yields benefits:

Business code focuses on data; UI updates automatically when the model changes.

No need to manually publish/subscribe to state changes, saving effort.

Simplifies logic and reduces errors as the project scales.

After adopting Flutter, development efficiency increased dramatically:

Dart‑based UI development speeds up once familiar.

Hot reload allows rapid UI testing and bug fixing without full rebuilds.

Cross‑functional teams can work on a single feature with one developer handling both UI and logic.

Continuous Integration Optimization

Previously, testers manually triggered Jenkins builds, leading to mismatches between bug fixes and test packages. The team automated the entire Jenkins workflow: after a bug fix is committed, a package is built, and an email with change details is sent to testers, eliminating manual steps.

2021 Technology System Planning

Flutter Base Library

As Flutter features expand, the team packages common UI controls (buttons, input fields, etc.) into a reusable library to ensure UI consistency and improve development speed.

Native functionality (crash reporting, push, location, logging, social sharing) will be wrapped into plugins for Flutter, reducing duplication and keeping native and Flutter implementations aligned.

Real‑Time Monitoring Service

Performance issues (crashes, slow network, UI lag) affect user experience. The team plans to integrate Alibaba Cloud ARMS for mobile, mirroring the web front‑end's real‑time monitoring, to capture crashes, performance metrics, and remote logs.

Monitoring includes startup speed, page load time, smoothness, network errors, and remote log retrieval for rapid issue diagnosis.

Summary

Since 2019, the mobile team has pursued a systematic technical evolution—from Kotlin refactoring and CI platform construction to componentization and Flutter hybrid development—aiming to improve development efficiency and delivery quality. Although early platform investments were costly, the long‑term benefits include halved development labor, reduced cross‑team communication, and significantly higher product quality.