What is MVVM?

[MUSIC] 0:00 Hi, my name is Ahmed, and I was teacher and developer. 0:04 In this workshop we're gonna talk about MVVM, or 0:08 the model view view model design pattern. 0:12 A design pattern is a tested solution to a known design problem. 0:14 When we talk about design, we mean the architectural design of your application. 0:18 The way your code is organized and the way the objects talk to each other. 0:23 One of the most common design patterns and 0:28 the one recommended by Apple for iOS apps is the MVC design pattern. 0:30 You might remember MVC from a previous course here at Treehouse. 0:36 And even if you don't, well, here's a brief overview to refresh your memory. 0:40 MVC stands for Model-View-Controller. 0:45 It is a design pattern that assigns objects in an application 0:48 one of three roles. 0:52 Model, view, or controller. 0:54 The pattern defines not only the roles the objects play in the application, 0:56 it defines the way objects communicate with each other. 1:01 The collection of objects is sometimes referred to as a layer. 1:04 For example, the model layer or the view layer. 1:09 Here's a diagram that depicts how these layers communicate with each other. 1:13 The view communicates user events to the controller, 1:17 which in turn updates the model. 1:21 Conversely if the model receives updates it notifies the controller which 1:23 in turn updates the view. 1:28 We're creating these artificial constraints between the three layers, 1:30 these constraints are created to make it easier for 1:34 programmers to determine where each block of code belongs. 1:37 Now, MVC is a good design pattern, but after using it for a while, 1:42 you will notice that it starts breaking down. 1:46 We start abusing the controller. 1:49 From the diagram, you will notice that the controller is supposed to be 1:51 an intermediary between the view and the model. 1:54 However, it starts doing a lot more. 1:58 Sometimes it is used to lay out views, making network calls, getting data 2:01 from the persistence layer, preparing data for display, and so many other things. 2:06 Soon our controller becomes bloated and the MVC acronym gets a new meaning. 2:12 A massive view controller. 2:18 Now we've all been guilty of this, and this is nothing new. 2:21 We're rushed to add features, and 2:24 we stuff everything inside the controller keeping the view and model intact. 2:26 So a controller unfortunately becomes a kitchen sink. 2:31 Don't know what to do with something? 2:35 Well, toss it in the sink. 2:36 This behavior not only hurts our code, but 2:39 over time makes our app unmaintainable and untestable. 2:42 Thankfully the iOS community has borrowed a new design pattern 2:46 from the Microsoft community. 2:50 Yes, the MVVM design pattern comes from Microsoft. 2:52 Hey, but there's no need to hate on it. 2:56 MVVM shifts the responsibility between the controller and the model and 2:58 creates a new layer called the ViewModel. 3:03 The role of the ViewModel is a highly debated one in the iOS community. 3:06 Now, instead of fanning the flames of this argument, we're gonna establish a few 3:10 constraints and focus on the problem MVVM is trying to solve. 3:14 Let's take a look at the constraints we're going to establish for MVVM. 3:20 Why constraints? 3:24 Because constraints make it easier for us to write code as a developer. 3:25 The View only talks to the controller. 3:30 The controller can no longer talk to the model directly. 3:32 It only interacts with the View and ViewModels. 3:36 A ViewModel talks to a Model. 3:40 Besides the ViewModel, nothing else talks to the Model. 3:43 So what can the ViewModel do? 3:47 It can handle presentation logic for the View, for example, formatting a date. 3:49 It can handle business logic. 3:54 For example, the user subscription is about to expire, and a custom message 3:57 needs to be displayed based on the number of days left in the subscription. 4:01 Take the constraints as a guideline, a prescription, 4:06 to implement the MVVM design pattern. 4:09 So far, we've covered the basics of MVC and 4:12 how we can progressively evolve to the MVVM design pattern. 4:16 Now let's take a look at a concrete example on how we can 4:20 implement this design pattern. 4:23