How Ele.me Scales Its Mobile App Architecture: From MVC to Hot‑Patch

MVC

Ele.me's early mobile app adopted the classic Model‑View‑Controller (MVC) pattern to enable fast market entry, with a clear layer separation: Controllers handle core logic, Models define data structures and persistence, and Views render the UI. While easy to develop, MVC eventually led to a bloated Controller layer and high coupling.

Module Decoupled

As code volume grew, Ele.me introduced a module‑decoupled approach, extracting reusable components as independent plugins. Public components (e.g., AFNetworking, OkHttp) are version‑controlled via CocoaPods or Gradle, while business components encapsulate specific features like login or registration. Modules register their schemes with the Excalibur system, enabling dynamic discovery and low‑coupling interactions.

Hybrid

Ele.me distinguishes between Native apps, which offer fast rendering and rich UX but require full updates for bugs, and Web apps, which allow instant server‑side updates but suffer from latency and limited hardware access. A hybrid strategy combines both: static, performance‑critical modules stay native, while rapidly changing, display‑focused modules use Web (H5) pages.

React‑Native & Hot Patch

To address the need for rapid bug fixes in a user base of over a hundred million, Ele.me employs hot‑patch solutions (e.g., JSPatch, Dexpose, AndFix) that download and execute code patches at runtime. Frequently accessed pages are backed up with React‑Native implementations; when a native bug occurs, the app can switch to the React‑Native version and apply a small hot‑patch before reverting to native code.

Conclusion

Ele.me's architecture continuously evolves to balance stability, performance, and rapid iteration. There is no universal “silver bullet”; the best architecture is the one that fits the specific business needs and scales with ongoing feature growth.