GithubHelp home page GithubHelp logo

isabella232 / combineviewmodel Goto Github PK

View Code? Open in Web Editor NEW

This project forked from thoughtbot/combineviewmodel

0.0 0.0 0.0 3.34 MB

An implementation of the Model-View-ViewModel (MVVM) pattern using Combine.

License: MIT License

Swift 98.22% Objective-C 1.78%

combineviewmodel's Introduction

CombineViewModel

An implementation of the Model-View-ViewModel (MVVM) pattern using Combine.

Introduction

CombineViewModel’s primary goal is to make view updates as easy in UIKit and AppKit as they are in SwiftUI.

In SwiftUI, you write model and view-model classes that conform to Combine’s ObservableObject protocol. SwiftUI:

  1. Observes each model’s objectWillChange publisher via the @ObservedObject property wrapper, and;
  2. Automatically rerenders the appropriate portion of the view hierarchy.

The problem with objectWillChange outside of SwiftUI is that there's no built-in way of achieving (2) — being notified that an object will change is not the same as knowing that it did change and it’s time to update the view.

ObjectDidChangePublisher

Consider the following sketch of a view model for displaying a user’s social networking profile:

// ProfileViewModel.swift

import CombineViewModel
import UIKit

class ProfileViewModel: ObservableObject {
  @Published var profileImage: UIImage?
  @Published var topPosts: [Post]

  func refresh() {
    // Request updated profile info from the server.
  }
}

With CombineViewModel, you can subscribe to did change notifications using the observe(on:) operator:

let profile = ProfileViewModel()

profileSubscription = profile.observe(on: DispatchQueue.main).sink { profile in
  // Called on the main queue when either (or both) of `profileImage`
  // or `topPosts` have changed.
}

profile.refresh()

Automatic view updates

Building on ObjectDidChangePublisher is the ViewModelObserver protocol and @ViewModel property wrapper. Instead of manually managing the ObjectDidChangePublisher subscription like above, we can have it managed automatically:

// ProfileViewController.swift

import CombineViewModel
import UIKit

// 1️⃣ Conform your view controller to the ViewModelObserver protocol.
class ProfileViewController: UITableViewController, ViewModelObserver {
  enum Section: Int {
    case topPosts
  }

  @IBOutlet private var profileImageView: UIImageView!
  private var dataSource: UITableViewDiffableDataSource<Section, Post>!

  // 2️⃣ Declare your view model using the `@ViewModel` property wrapper.
  @ViewModel private var profile: ProfileViewModel

  // 3️⃣ Initialize your view model in init().
  required init?(profile: ProfileViewModel, coder: NSCoder) {
    super.init(coder: coder)
    self.profile = profile
  }

  // 4️⃣ The `updateView()` method is automatically called on the main queue
  //     when the view model changes. It is always called after `viewDidLoad()`.
  func updateView() {
    profileImageView.image = profile.profileImage

    var snapshot = NSDiffableDataSourceSnapshot<Section, Post>()
    snapshot.appendSections([.topPosts])
    snapshot.appendItems(profile.topPosts)
    dataSource.apply(snapshot)
  }

  override func viewWillAppear(_ animated: Bool) {
    super.viewWillAppear(animated)

    profile.refresh()
  }
}

Further reading

In the Example directory you’ll find a complete iOS sample application that demonstrates how to integrate CombineViewModel into your application.

Installation

CombineViewModel is distributed via Swift Package Manager. To add it to your Xcode project, navigate to File > Add Package Dependency…, paste in the repository URL, and follow the prompts.

Screen capture of Xcode on macOS Big Sur, with the Add Package Dependency menu item highlighted

Bindings

CombineViewModel also provides the complementary Bindings module. It provides two operators — <~, the input binding operator, and ~>, the output binding operator — along with various types and protocols that support it. Note that the concept of a "binding" provided by the Bindings module is different to SwiftUI's Binding type.

Platform-specific binding helpers are also provided:

Contributing

Have a useful reactive extension in your project? Please consider contributing it back to the community!

For more details, see the CONTRIBUTING document. Thank you, contributors!

License

CombineViewModel is Copyright © 2019–20 thoughtbot, inc. It is free software, and may be redistributed under the terms specified in the LICENSE file.

About

thoughtbot

CombineViewModel is maintained and funded by thoughtbot, inc. The names and logos for thoughtbot are trademarks of thoughtbot, inc.

We love open source software! See our other projects or hire us to help build your product.

combineviewmodel's People

Contributors

sharplet avatar mike-burns avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.