Understanding App Architecture for Cross platform mobile app development. (iOS and Android)

Here, we’re going to learn the foundation for creating an organized and efficient app. Imagine building a tower with LEGO bricks: if you just stack them on top of each other without a plan, it’ll easily topple over. Architects and engineers plan carefully to make sure their buildings are stable and long-lasting, and the same goes for software.

When you first started programming, you might have put all your code in one big file. It seemed fine at first, but as your program grew, it became hard to add new features or fix problems. That’s where software architecture comes in.

Software architecture is like the blueprint for your app, and it’s been around since the 1980s. One important part of it is design patterns, which are like tried-and-true templates for building software. You might have heard of some of these patterns, like Clean Architecture, MVVM, MVC, or MVP.

With KMP (Kotlin Multiplatform), you can choose the design pattern that fits your app best. If you’re used to MVC from iOS development, KMP supports that. If you’re more comfortable with MVVM as recommended by Google for Android, you can use that too.

In simple terms, think of software architecture and design patterns as the smart planning and blueprints that help you build a sturdy and scalable app, just like architects and engineers do when creating buildings.

Model-View-Controller

The MVC (Model-View-Controller) pattern has been around since the 1970s and is commonly used in desktop and web applications. Apple popularized it in the mobile world when they introduced the iPhone SDK in 2008.

In MVC, your code is divided into three parts:

Model: This is like the brain of your app. It doesn’t care about how things look; it handles all the logic and rules. It’s where the data and operations on that data live.

View: This is what you see on the screen — like lists, buttons, and images. How it looks and behaves depends on the platform (iOS, Android) and the tools you use (like UIKit or SwiftUI for iOS, or Views or Jetpack Compose for Android).

Controller: Think of this as the middle person. It takes input from you (like tapping a button), tells the Model what to do with that input, and then updates the View to show any changes. It’s like the messenger between Model and View.

So, in simple terms, MVC divides your app into three parts: Model (logic and data), View (what you see), and Controller (the go-between). It’s a way to keep your code organized and easy to work with, especially for building user interfaces.

Model-View-ViewModel (MVVM)

Model-View-ViewModel, is a modern design pattern for building applications with user interfaces, like those on your phone or computer. It’s especially popular in Android and iOS development.

Here’s a simple explanation:

Model: This is like the brain of the app, just like in MVC. It holds the data and rules, like what’s in your app and how it should behave.

View: This is what you see on your screen, like buttons and text. It’s similar to the View in MVC. But in MVVM, the View also talks to the ViewModel.

ViewModel: This is the new part in MVVM. It’s like a bridge between the Model and the View. It holds the data that the View needs and provides a way for the View to update itself when the data changes. This is done using something called “Data Binding.”

For example, when you press a button on the screen, the View tells the ViewModel about it. The ViewModel then talks to the Model to make changes, and when the data in the Model changes, it automatically updates the View. It’s like magic!

In Android, they use things like LiveData, Kotlin Flow, or StateFlow to make this communication between the ViewModel and the View really smooth. And in iOS, they have the Combine framework and SwiftUI to do similar things.

So, MVVM is all about making it easy for the View to show the right information and respond to your actions without making the code messy. It’s a more modern and organized way to build apps with user interfaces.

Clean Architecture

Clean Architecture is a design pattern introduced by Robert C. Martin (Uncle Bob) in 2012. It’s popular among professionals for building large and maintainable software applications. The main idea is to organize your code into circles or layers, each with a specific purpose, following two important principles:

Abstraction Principle: This says that the inner circles should contain the core business logic, while the outer circles handle implementation details. So, the closer you are to the center, the more abstract and independent of specific platforms your code becomes.

Dependency Rule: This rule states that each circle can only depend on the circle inward to it. This creates a clean and decoupled structure, making the code easier to test and maintain.

Now, let’s break down the key components of Clean Architecture from outer circles inward:

Presentation and Framework: The outermost layer is where you put platform-specific code. For example, if you’re using SwiftUI for making interfaces in iOS or Room for database in Android, this is where you handle those technologies. This layer is platform-specific, so you can’t typically share code between different platforms here.

Controllers or Presenters: This layer is somewhat like what you’d find in MVC (Model-View-Controller) or MVVM (Model-View-ViewModel). It receives input from the outer layer (like user interactions) and passes them on to the next layer. You can use a combination of MVVM and MVC in this layer to help manage user interface interactions.

Use Cases or Interactors: This layer defines the actions or use cases that the user can trigger. The objects in the previous layer (Controllers or Presenters) have access to these use cases and can only call into the defined interactions. This is where a lot of your business logic resides, but you can delegate some of it to inner layers if needed.

Entities: These are abstract definitions of your data sources. They may also contain some business logic. Entities represent the core data and rules of your application.

In simple terms, Clean Architecture helps you organize your code into well-defined layers, making it easier to manage and maintain. It separates platform-specific code from the core business logic, promoting code reusability and testability. This pattern is particularly valuable when building large and complex software applications.

You can choose on any of the pattern that better suits for your Application.

Best of Luck.