How Clean Architecture enables McDonald’s to optimize market-specific needs and user experience

Mobile app development is becoming increasingly complex, but McDonald’s use of Model-View-ViewModel Clean Architecture is enabling improved quality, scalablity, and user experience.

by Pietro Doldo, Senior Engineer — iOS; Alice Liddell, Senior Engineer — Android; and Namit Nayak, Senior Manager, Tech Lead — Ordering

With Digital sales in our top six markets, representing almost 40% of Systemwide sales, and the expansion of MyMcDonald’s Rewards to more than 50 markets, McDonald’s Global Technology team continues to optimize market-specific needs and user experience by building a Model-View-ViewModel (MVVM) Clean Architecture.

What is MVVM Clean Architecture?
Mobile application development is becoming increasingly complex. And with the growing demand for high-quality user experiences, it’s crucial to have a well-designed architecture that enables scalability, maintainability, and testability. This is where MVVM Clean Architecture comes into play.

Clean Architecture is an architecture pattern that emphasizes the separation of concerns and business logic from presentation logic and provides a set of guidelines for organizing code into layers. Its main goal is to create a maintainable and testable codebase that is easy to understand and modify.

What does MVVM entail?
MVVM architecture is organized into several layers, starting from the core of the application and moving outwards. The innermost layer is the business logic layer, containing the Model layer. The next layer is the interface adapters layer, containing the ViewModel.

The Model layer contains the data source and business logic, so changes to the data source or business logic do not affect the user interface. The ViewModel layer acts as an intermediary between the Model and View layers, so changes to the data source or business logic do not affect the View. The View layer presents the data to the user, so changes to the data source or business logic do not affect the presentation logic.

Clean Architecture diagram workflow

• Each layer is represented along with dependency direction and the data flow (request/response) Dependency Inversion point where we use Repository interfaces (protocols)
• Data flow
• View (UI) calls methods from ViewModel (presenter)
• ViewModel executes use case
• Use case combines data from user and repositories
• Each repository returns data from a remote data (network), persistent database (storage source,) or in-memory data (remote or cached)
• Information flows back to the View (UI) where we display the information on the UI
• Dependency direction
• Presentation layer → Domain layer ← Data Repositories layer
• Presentation layer (MVVM) = ViewModels (Presenters) + Views (UI)
• Domain layer = entities + use cases + repositories interfaces
• Data Repositories layer = repositories implementations + API (Network) + persistence database

Benefits all around
The implementation of MVVM Clean Architecture in a Quick Service Restaurant (QSR) industry mobile app can have a significant impact on its overall quality, scalability, and user experience. Some of the benefits include:

1. Improved user experience: By separating the data, presentation logic and user interface into different layers, MVVM Clean Architecture helps enable developers to focus on creating a great user experience. The View layer can be optimized for usability, making it easier for users to access the information they need and interact with the app.

2. Scalability: MVVM Clean Architecture makes it easier to add new features or modify existing ones without affecting the rest of the application. This makes the codebase more scalable and helps to ensure that the application can accommodate future growth in the QSR industry.

3. Maintainability: The separation of concerns in MVVM Clean Architecture makes it easier to maintain the codebase. Changes to one part of the application do not affect other parts, making it easier to fix bugs and implement new features.

4. Improved performance: MVVM Clean Architecture promotes the separation of business logic from presentation logic, which can improve the performance of the mobile app. The Model layer can be optimized for performance, while the ViewModel layer can focus on transforming data into a format that is easy to display in the View layer.

5. Better Testing: MVVM Clean Architecture makes it easier to write automated tests for the application, which helps to catch bugs and ensure that the application is working as expected. This is especially important for a QSR industry mobile app where errors may have significant impacts on customer experience and business operations.

For engineers, benefits may include:

1. Improved code organization: Helps organize code into distinct layers, making it easier to maintain, update, and scale the application.

2. Better separation of concerns: The separation of the Model, ViewModel, and View layers enables engineers to focus on specific parts of the application, improving efficiency and reducing the risk of bugs.

3. Increased reusability: By separating the business logic from the presentation logic, it’s easier to reuse code across multiple parts of the application, reducing the amount of duplicated code and improving maintainability.

4. Enhanced testability: Makes it easier to write automated tests for the application, improving code quality and reducing the risk of bugs.

5. Improved performance: By separating the data from the user interface, engineers can optimize application performance and help ensure that it runs smoothly on different devices and platforms.

6. Increased flexibility: Makes it easier to modify the application or add new features without affecting the existing code, helping ensure that the application can accommodate future growth and changing requirements.

In summary, MVVM Clean Architecture helps to enable engineers to develop high-quality, scalable, and maintainable applications to provide a great user experience.