Dabbling with MVVM in Swift 3

Erica Millado
Jun 17, 2017 · 7 min read

MVVM (model-view-viewModel) is an architecture pattern that is an alternative to MVC (model-view-controller). MVVM, sometimes referred to as presentation model, offers a way to organize code that doesn’t result in massive view controllers.

In MVVM, you abstract your code to include a viewModel, which is a file that holds the values to be presented in your view. The logic we write to format the values (i.e. formatting a string to be inserted into a UILabel) to be presented to the view takes place in the viewModel.

Image for post
Image for post
The viewModel doesn’t know about the view in MVVM.

The View Controller owns the viewModel which owns the Model and in turn, the Model updates the View Model, which is in turn, used to update the View Controller, which updates the view.

In this blog, I will show you a simple example of how to abstract code using the MVVM architecture pattern. To illustrate, I will make an app that will display the current top 100 free apps in the iTunes store. The app will use a tableView and require networking to the iTunes API endpoint. I’ll include my networking steps in my process.

Step 1: Set up the APIClient

The API I used was from iTunes’ RSS Feed Generator and does not require a key or authorization token. The endpoint is: https://rss.itunes.apple.com/api/v1/us/ios-apps/top-free/100/explicit/json

Image for post
Image for post
Note how this APIClient class inherits from NSObject.

#1: I create an APIClient class that inherits from NSObject. Inheriting from NSObject is important when I instantiate this APIClient in my viewModel later.

#2: I write a fetchAppList function that has a completion handler. The completion handler will include an optional array of NSDictionaries. The JSON data will come back as an array of dictionaries for the key “results” below.

Image for post
Image for post
I am going to convert the “results” key in the dictionary above into an array of NSDictionaries.

#3: I create and unwrap a URL from my iTunes endpoint.

#4: Create an URLSession.

Image for post
Image for post

#5: From our dataTask, unwrap our returned data.

#6: Since JSON serialization throws an error, use do/try/catch to create our JSON object and handle our error. I unwrap my responseJSON object and cast it as an NSDictionary and choose the .allowFragments option.

#7: From my responseJSON object, I have an array of dictionaries for my “results” key so I access this and create an object and cast it as an array of NSDictionaries. Note how I access this from a keyPath “feed.results”. You can access JSON dictionary values by keyPath! 🌮

#8: I set my completion handler with my apps array of NSDictionaries.

#9: If I received an error, I set my completion handler with nil.

#10: I resume my dataTask. Always remember to do this.

Step 2: Setup the ViewModel.

Image for post
Image for post

#1: I create a ViewModel file that inherits from NSObject. This viewModel will be a property in my View Controller and injected by the storyboard.

#2: I create an apiClient property marked as an @IBOutlet that will be instantiated by the storyboard. Since I know the storyboard will be injecting it, I can use the (!) bang operator because I know it will not be nil.

#3: I define an apps dictionary that will hold the apps retrieved by my apiClient call to the iTunes API.

Image for post
Image for post

#4: Write a function that will trigger the apiClient call to the iTunes API, return data and set up a completion handler that will be ready to reload our data to be displayed.

#5: Call on our apiClient property to fetch our apps.

#6: Put this block of code on the main thread because we anticipate how it will affect the UI in our table view in our View Controller.

#7: Assign our local apps array to our returned JSON of NSDictionaries.

#8: Call our completion handler so that we will know when we can start reloading the data in our View Controller.

Image for post
Image for post

Next, we write functions that we can call in the table view controller. These functions will provide the values to be displayed in the table view controller’s cells.

#9: Write a function that takes in a tableView section index (for the sake of this example though, we are only going to have one section) and returns the number of cell rows for that section. Here, I return the count of the size of the apps array.

#10: Write a function that returns the name of an app. Note here that since our apps array contains the NSDictionaries with info for each app, I find the value in each app NSDictionary for the keyPath “name”.

Image for post
Image for post
name and contentAdvisoryRating are keys in our app NSdictionaries.

#11: Write a function that returns the rating of an app. Note here that since our apps array contains the NSDictionaries with info for each app, I find the value in each app NSDictionary for the keyPath “contentAdvisoryRating”.

Note how I return either empty strings or “0” if I am unable to cast the values a string or integer.

Step 3: Setup the Table View Controller

Image for post
Image for post

#1: Declare an optional viewModel property with an @IBOutlet. The storyboard will instantiate this viewModel object.

#2: In viewDidLoad( ), access our viewModel property to get our app object.

#3: Reload the tableView to display our retrieved app objects.

Image for post
Image for post

Assign the our app values from our viewModel in our tableView methods.

#4: Call on the viewModel’s numberOfItemsToDisplay(_:) function to return the number of rows.

#5: Populate the cells with values from the viewModel.

#6. Create a cell object with the cell identifier “cell”.

#7 and #8: Call on the viewModel’s appTitleToDisplay(_:) function and appRatingToDisplay(_:) function to return the app name (as a string) and app rating (as a string) to display in the tableView.

Step 4: Setup Storyboard

Image for post
Image for post

#1: Replace the View Controller with a TableViewController.

#2: Set the class to the TopAppsTableViewController.swift file.

Image for post
Image for post

#3: Select the cell and change its style to Right Detail.

#4: Set the identifier to “cell” (which will match the identifier we wrote in the TopAppsTableViewController.swift file).

Image for post
Image for post

#5: From the object library, drag an object onto your table view controller and insert it at the top.

Image for post
Image for post

#6: Select the object at the top of the table view controller.

#7: Set this object’s class to the ViewModel.swift file you created.

Image for post
Image for post

#8 and #9: Use assistant editor to control-drag from the ViewModel object to the viewModel @IBOutlet you created in the TopAppsTableViewController.swift file.

#10: This connection should now show up in your Connections Inspector.

Image for post
Image for post

#11: Drag another object from the Object Library onto the table view controller.

Image for post
Image for post

#12: Select this new object and assign it to your APIClient.swift file.

Image for post
Image for post

#13: Control-drag from the viewModel object to the Api Client object you just created. Make sure that this outlet shows up in the Connections Inspector.

Image for post
Image for post

#14: Make sure this table view controller is set as the initial view controller in the Attributes Inspector.

Build and run. You’ve just used MVVM to separate your model value logic from your view logic by using a viewModel class to house the values to populate your tableview.

See the final product:

The repo for this blog project can be found here.

Yay It’s Erica

I describe cool stuff.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store