Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Practical MVVM

Practical MVVM

A short and disoriented talk I gave at CocoaHeads Copenhagen on Dec 11, 2014. In the talk i wen't over my discoveries and thoughts on using MVVM over MVC with Swift in iOS development

Kristian Andersen

December 11, 2014
Tweet

More Decks by Kristian Andersen

Other Decks in Programming

Transcript

  1. The Model View ViewModel (MVVM) is an architectural pattern used

    in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler
  2. The Model View ViewModel (MVVM) is an architectural pattern used

    in software engineering that originated from Microsoft as a specialization of the Presentation Model design pattern introduced by Martin Fowler
  3. Largely based on the model–view–controller pattern (MVC), MVVM is a

    specific implementation targeted at UI development platforms which support event-driven programming, specifically Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View- Binder).
  4. Largely based on the model–view–controller pattern (MVC), MVVM is a

    specific implementation targeted at UI development platforms which support event-driven programming, specifically Windows Presentation Foundation (WPF) and Silverlight on the .NET platforms using XAML and .NET languages. Technically different, but similar, Presentation Model design patterns are available in HTML5 through AngularJS, KnockoutJS, Ext JS, Vue.js, and for Java the ZK framework (Model-View- Binder).
  5. MVC

  6. class Show: RLMObject { dynamic var identifier: Int dynamic var

    name: String dynamic var posterPath: String dyanmic var firstAired: NSDate }
  7. class ShowListViewController: UIViewController, UICollectionViewDataSource { func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int

    { return Int(fetchedResultsController.sections.count) } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { if let info = fetchedResultsController.sections[section] { return info.numberOfObjects } return 0 } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as ShowCell if let show = fetchedResultsController.objectAtIndexPath(indexPath) { cell.titleLabel.text = cell.name if let posterURL = NSURL(string: show.posterPath) { cell.posterImageView.hnk_setImageFromURL(posterURL) } if let firstAired = someFormatter.dateFromString(show.firstAired) { cell.firstAiredLabel.text = firstAired } } return cell } }
  8. class ShowListViewController: UIViewController, UICollectionViewDataSource { func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int

    { return Int(fetchedResultsController.sections.count) } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { if let info = fetchedResultsController.sections[section] { return info.numberOfObjects } return 0 } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as ShowCell if let show = fetchedResultsController.objectAtIndexPath(indexPath) { cell.configureWithShow(show) } return cell } }
  9. class ShowListCell: UITableViewCell { func configureWithShow(show: Show) { titleLabel.text =

    cell.name if let posterURL = NSURL(string: show.posterPath) { posterImageView.hnk_setImageFromURL(posterURL) } if let firstAired = someFormatter.dateFromString(show.firstAired) { firstAiredLabel.text = firstAired } } }
  10. class ShowViewModel { var identifier: String { get } var

    name: String { get } var posterURL: NSURL? { get } var firstAiredFormatted: String { get } init(show: Show) }
  11. class ShowListCell: UITableViewCell { func configureWithViewModel(viewModel: ShowViewModel) { titleLabel.text =

    viewModel.name if let posterURL = viewModel.posterURL { posterImageView.hnk_setImageFromURL(posterURL) } firstAiredLabel.text = viewModel.firstAiredFormatted } }
  12. class ShowListViewController: UIViewController, UICollectionViewDataSource { func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int

    { return Int(fetchedResultsController.sections.count) } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { if let info = fetchedResultsController.sections[section] { return info.numberOfObjects } return 0 } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as ShowCell if let show = fetchedResultsController.objectAtIndexPath(indexPath) { let viewModel = ShowViewModel(show) cell.configureWithViewModel(viewModel) } return cell } }
  13. class ShowListViewModel { var numberOfSections: Int { get } func

    numberOfShowsInSection(section: Int) -> Int func viewModelAtIndexPath(indexPath: NSIndexPath) -> ShowViewModel }
  14. class ShowListViewController: UIViewController, UICollectionViewDataSource { func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int

    { return viewModel.numberOfSections } func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int { return viewModel.numberOfRowsInSection(section) } func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell { let cell = collectionView.dequeueReusableCellWithReuseIdentifier(reuseIdentifier, forIndexPath: indexPath) as ShowCell if let show = viewModel.viewModelAtIndexPath(indexPath) cell.configureWithViewModel(show) } return cell } }
  15. class ShowViewModel { var identifier: String { get } var

    name: Observable<String> { get } var posterURL: Observable<NSURL?> { get } var firstAiredFormatted: Observable<String> { get } init(show: Show) }
  16. class ShowListCell: UITableViewCell { func configureWithViewModel(viewModel: ShowViewModel) { viewModel.overview.afterChange +=

    { [unowned self] in titleLabel.text = $1 } viewModel.posterImageURL.afterChange += { [unowned self] in self.posterImageView.hnk_setImageFromURL($1) } viewModel.firstAiredFormatted.afterChange += { [unowned self] in self.firstAiredLabel.text = $1 } } }