Building a Decoupled Architecture to Optimize our Mobile Apps

How did we optimize the mobile apps for the Walmart Mexico market?

In this article, we explain the engineering we applied to standardize and decouple the architecture of these four Walmart Mexico apps:

• Walmart Groceries
• Walmart Plus
• Superama
• Bodega Aurrera

To execute this re-architecture project, the Walmart Mexico E-commerce department put together the multidisciplinary Core Mobile team, responsible for designing and testing the new implementations. Then, the rest of the mobile teams were able to replicate the solutions.

In the beginning, the main goal was the re-architecture, but it evolved to cover other transformations such as CI/CD, test automation, repository strategy, among others.

What Was the Cost of Having a Legacy Architecture?

Given that the different mobile apps share similar user flows, features, and use cases, the project aimed to build a common base for the architecture, the code pieces, and the pipeline of all the apps. This was to avoid different teams redoing the same work as with the legacy architecture.

Before, the developers were redoing 95%-similar pieces of the frontend for the iOS and Android apps. It was practically eight teams working on eight different apps but solving the same problem.
Some pain points we experienced with the legacy architecture are:

• Hardness to reuse code
• Difficulties in scaling apps
• Complex control of code dependencies
• Low quality and inconsistency of the codebase
• Incomprehension of the codebase
• Static teams

How Did the Legacy Architecture Work?

The legacy architecture supported many different versions for iOS and Android mobile apps. For iOS, for example, we had three architectures supporting the four apps. Whereas for Android, we had one architecture.

One of the legacy architecture’s pain points was that some of its layers were built together, which made it hard to reuse the pieces of code as stand-alone modules across the apps.

The following diagram is an example of one of the architecture versions we had. It shows how the layers interacted in the Walmart Plus app.

Figure 2. Diagram of the Legacy Architecture

The previous diagram shows how the four layers existed together and were dependent on each other. The rest of the versions of the legacy architecture had similar implementations and shared the same difficulties.

Continue reading: Alejandra Pedroza Marchena @ Walmart Global Tech Blog