Get more of such content, Weekly

* indicates required
Social

MVC to MVVM Design Pattern Conversion in iOS

MVVM Design Pattern Conversion in iOS

There are many design pattern in which most usable design pattern is MVC for most of the application because it was too flexible, useful and extensible but when MVVM came in the picture as a new design pattern then the developer wants to move MVC to MVVM design pattern.

MVC pattern Layer:-

  • Model: Data in which app will act or operate .In which data model will be created where crud operation is taking place.
  • View: Which is user interface aligns with many UI element and interaction will be assigned to it
  • Controller: Communication between view and model where the controller get the data from the model and updates the view at the same time.

MVVM pattern Layer:-

  • Model: Data is operated with saved data in the core data.
  • View: View User interface is defining the visual and interactive element with the view where the controller is separable with a view.
  • ViewModel: Model can be updated with user inputs and updation of view from outputs of the model data

MVVM has many advantage over MVC 

  • MVC design pattern does not have separate business logic to test it but MVVM is made view controller simpler and separate out the business logic.
  • MVC does not have clarity for business logic but MVVM has separate out the business logic in view model for better understanding.
  • In MVC business logic cannot be tested separate but in MVVM view and view model can be tested without any problem
  • In MVC memory allocation is higher than the MVVM because using a view controller taking more space then view model.
  • CPU usage in MVC design pattern is less than the MVVM design pattern. MVVM consume more Usage because there many more view model defined and passing data from view to view model to controller is a little bit expensive task for CPU.
  • MVVM is easier to implement and deliver on time because MVC is more complex and problem-solving in MVC takes more time as compared to MVVM So developer need to careful to choose the design pattern at the initial stage

MVC to MVVM  

MVVM model folder structure is different from MVC where business logic completely separates out in the models. And MVVM model follow some strategic over the MVC model

MVVM code changes Pattern 

1. Pattern 1

MVC code where data directly passed to the controller and populate in the table view controller. MVC design is based on more data models and crud operations.

extension MovieListViewController {

fileprivatefuncdetailViewControllerFor(indexPath:IndexPath) ->MovieDetailViewController{

        let storyboard = UIStoryboard(name: “Main”, bundle: Bundle.main)

        let detailVC:MovieDetailViewController = storyboard.instantiateViewController(withIdentifier: “MovieDetailViewController”) as! MovieDetailViewController

        let show = shows[indexPath.row]

detailVC.imdbID = show.imdbID

        if let cell:MovieInfoTableViewCell = tableView.cellForRow(at: indexPath) as? MovieInfoTableViewCell {

detailVC.posterImage = cell.posterImageView.image

        }

        return detailVC

    }

}

extension MovieListViewController {

    override var previewActionItems: [UIPreviewActionItem]  {

        let viewDetails = UIPreviewAction(title: “View Details”, style: .default) { (action, viewController) in

        }

        return [viewDetails]

    }

}

2. Pattern 2

MVVM code where data directly passed to view model and then from the view model to controller populate in the table view controller. MVC design is based on more data models and crud operations. Here the model list is created where main business logic is implemented. Both UI and business logic are separated from each other in the MVVM model.

extension MovieListViewController {

fileprivatefuncmovieDetailViewControllerFor(indexPath:IndexPath)->MovieDetailViewController {

        let storyboard = UIStoryboard(name: “Main”, bundle: Bundle.main)

        let detailVC:MovieDetailViewController = storyboard.instantiateViewController(withIdentifier: “MovieDetailViewController”) as! MovieDetailViewController

        if let shows = self.movieListDataModel.movies.value {

            let show = shows[indexPath.row]

detailVC.imdbID = show.imdbID

            if let cell:MovieInfoTableViewCell = tableView.cellForRow(at: indexPath) as? MovieInfoTableViewCell {

detailVC.posterImage = cell.posterImageView.image

            }

        }

        else {

detailVC.imdbID = nil

        }

        return detailVC

    }

 }

3. Pattern 3

MVVM Design pattern where view model is defined and present but in the other side of the MVC model there is no such model is present. In MVC design pattern protocol and the delegate is defined in the file which is separately called in the MVVM design pattern.

  1. Variable defined in the MVC model can be moved into view model in the MVVM design pattern then the variable can be accessed from the view model to view controller which is very helpful and breakdown the code in smaller pieces also
  2. In the MVVM Pattern iOS app development services need to expose closer in various places after defining the view model so that communication from view model to view controller will be easy
  1. Binding the view model to the view controller and great approach to convert MVC to MVVM design pattern also.
  2. Protocol and Delegate can be changed in the MVC to MVVM Design pattern because the model view implementation required more protocol and delegate need to be declared and used in the code.

Leave a Reply