How Ele.me Scaled Its Mobile App Architecture: From MVC to Hybrid EMC & Hot Patch

1 MVC

In the early stage of Ele.me's business, the mobile app adopted a classic MVC architecture to achieve fast market entry. MVC offers a clear separation: Controllers handle core logic, Models describe data structures and persistence, and Views render the UI. While simple and supported by Apple, the high coupling of Controllers leads to bloated code, eventually evolving toward a Massive‑View‑Controller.

2 Module Decoupled

To reduce coupling, Ele.me introduced componentization. Public components (e.g., AFNetworking, OKHttp) are version‑managed via CocoaPods or Gradle, while business components encapsulate specific features like login. Business modules register their schemes with the Excalibur system, enabling other modules to obtain instances via reflection, thus achieving decoupling. Inside a module, developers can still choose patterns such as MVVM or MVP.

3 Hybrid

The EMC architecture (E=Excalibur, M=Modules, C=Common) emphasizes high cohesion and low coupling, using interface‑driven programming. It also solves version compatibility issues, e.g., registering WebView for iOS 7 and WebKit for iOS 8+. The hybrid approach treats Web pages as sub‑modules for fast iteration while keeping performance‑critical parts native.

4 React‑Native & Hot Patch

As user volume grew to over a hundred million, a single bug could affect thousands. Dynamic deployment solutions like JSPatch, waxPatch, Dexpose, AndFix, and ClassLoader enable remote code updates. React‑Native provides a JavaScript‑driven UI layer; combined with a native primary‑backup scheme, it allows critical pages to fall back to RN when issues arise, while Hot‑Patch fixes are applied and later reverted to native code.

Conclusion

There is no silver bullet in software engineering; architecture must evolve with business needs. Ele.me's journey shows that the best architecture is the one that fits its specific challenges.