Today I am going to show you to build a simple SpaceX Launches iOS app with SpaceX open source APIs using MVVM and RxSwift.
If you have used MVC structure (Model, View, Controller) in iOS development before, you will know as the project grows bigger, the ViewController is likely to have Massive View Controller problem. It means that majority of the code are written in ViewController, causing it to have hundred if not thousand lines of code for business logic and presentation logic. If any bugs occur, it becomes very hard for you to debug or pinpoint the issue with this massive amount of code all in 1 file.
Here is where MVVM can come to your rescue. The MVVM pattern consists of three layers:
- Model: The data that the app uses.
- View: The user interface’s visual elements. In iOS, the view controller is inseparable from the concept of the view.
- ViewModel: Updates the model from view inputs and updates views from model outputs.
MVVM offers some advantages over the conventional Model-View-Controller (MVC) approach:
- Reduced complexity: MVVM makes the view controller simpler by decoupling and moving a lot of business logic out of it.
- Expressive: The view model better expresses the business logic for the view.
- Testability: A view model is much easier to test than a view controller. You don’t have to worry about presentation view while testing the business logic.
Assuming today you are asked to build a simple SpaceX Launches iOS app, you need to show the list of SpaceX launches in the past 3 years in the first screen with details like launch number, details, date and indicator for upcoming launches, then once user taps on any of the launches, you will continue to present details about the rocket, such as rocket name, image, description, and a link to the Wikipedia article.
First of all, let’s create the project by choosing App.
After that, you can name your project, I will just name mine as SpaceXLaunch. Then, remove ViewController.swift file and its Scene in Main storyboard, add the Navigation Controller into the storyboard and check “is Initial View Controller” under Attributes Inspector.
Then, create the LaunchListViewController.swift file with basic ViewController set up and type it as the class name and storyboard ID in the RootViewController Scene’s identity Inspector to bind them together.
Then, create LaunchListViewModel class to store the business logic of the screen.
I added LaunchListViewModelType as a protocol to create the variables and functions declaration to make the code cleaner. Then, create LaunchListViewModel to inherit from it to create the definition.
In MVVM, you are required to use data binding to allow ViewModel to communicate with ViewController. In this project, we are going to use RxSwift to achieve that. BehaviorRelay is one of the commonly used components in RxCocoa. You can refer to the table or RxMarbles to understand different components in RxCocoa.
I have also created 2 helper functions, processFetchedLaunches() and convertLaunchesToLaunchListTableViewCellViewModels(launches: [Launch]) to help to convert the model, LaunchResponse into LaunchListViewModel.
LaunchResponse and Launch model are declared as below:
For more information on the SpaceX public API, you can check their github repository, https://github.com/r-spacex/SpaceX-API
In your LaunchListViewController, create the disposeBag and viewModel to DisposeBag and LaunchListViewModel instance respectively. Then, initiate DisposeBag and add listeners for variables you created in LaunchListViewModel. DisposeBag helps to manage the life cycle of disposable object, so we are binding it to the lifecycle of the ViewController to help us to initialise and dispose the disposable objects.
The outcome of the app looks like the screenshot below.
You can view the full project in the github link: https://github.com/ykpoh/SpaceXLaunch
Feel free to comment to give your suggestion to the project or ask any questions. Thank you.