Slide 1
Slide 1 text
Flux & MVVM
Brooklyn Swift Developers
September 7th, 2017
Taiki Suzuki / @marty_suzuki
Slide 2
Slide 2 text
Overview
- Self-introduction
- A Sample App for Today's Subject
- How to develop a sample with Flux?
- Flux & MVVM
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
Photo with Doc!
Slide 5
Slide 5 text
AbemaTV
- A Internet TV station
- 24 Live Streaming Channels
- Video On Demand Contents
- 20 million1 downloads in Japan2
2 Only available in Japan and contains regions checking
1 Incidentally, the Japanese population is 127 million.
Slide 6
Slide 6 text
No content
Slide 7
Slide 7 text
AbemaTV
Based on the Flux design pattern
Slide 8
Slide 8 text
What design patterns have you used
in your project?
Slide 9
Slide 9 text
A Sample App
for Today's Subject
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
In MVC...
Slide 12
Slide 12 text
No content
Slide 13
Slide 13 text
I have a FluxFigure1
Figure1 PIKOTARO (2016) https:/
/www.youtube.com/watch?v=0E00Zuayv9Q
Slide 14
Slide 14 text
How to develop this
sample with Flux?
Slide 15
Slide 15 text
Flux Figure2
Figure2 Facebook (2014) Flux, http:/
/facebook.github.io/flux/docs/in-depth-overview.html#content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
FluxCapacitor is used in this example
https:/
/github.com/marty-suzuki/FluxCapacitor
Slide 18
Slide 18 text
FluxCapacitor provides protocols to
make implementing the Flux design
pattern easily.
- Actionable
- Storable
- DispatchValue
Slide 19
Slide 19 text
Dispatcher in FluxCapacitor
•
FluxCapacitor has single Dispatcher.
•
Actionable and Storable have a
DispatchValueType.
•
The Dispatcher relates Actions to
Stores based on DispatchValueTypes.
Slide 20
Slide 20 text
No content
Slide 21
Slide 21 text
RepositoryAction - Actionable
final class RepositoryAction: Actionable {
typealias DispatchValueType = Dispatcher.Repository
// ...
func selectedRepository(_ repository: GithubKit.Repository) {
invoke(.selectedRepository(repository))
}
func removeFavorite(_ repository: GithubKit.Repository) {
invoke(.removeFavorite(repository))
}
func addFavorite(_ respository: GithubKit.Repository) {
invoke(.addFavorite(respository))
}
}
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
Dispatcher.Repository - DispatchValue
extension Dispatcher {
enum Repository: DispatchValue {
case addFavorite(GithubKit.Repository)
case removeFavorite(GithubKit.Repository)
case selectedRepository(GithubKit.Repository?)
}
}
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
RepositoryStore - Storable
final class RepositoryStore: Storable {
typealias DispatchValueType = Dispatcher.Repository
// ...
private(set) var favorites: [GithubKit.Repository] = []
private(set) var selectedRepository: GithubKit.Repository? = nil
// ...
}
Slide 26
Slide 26 text
RepositoryStore - Storable
init(dispatcher: Dispatcher) {
register { [weak self] dispatchValue in
switch dispatchValue {
case .addFavorite(let value):
if self?.favorites.index(where: { $0.url == value.url }) == nil {
self?.favorites.append(value)
}
case .removeFavorite(let value):
if let index = self?.favorites.index(where: { $0.url == value.url }) {
self?.favorites.remove(at: index)
}
case .removeAllFavorites:
self?.favorites.removeAll()
}
}
}
Slide 27
Slide 27 text
No content
Slide 28
Slide 28 text
final class FavoriteViewController: UIViewController {
private let action = RepositoryAction()
private let store = RepositoryStore.instantiate()
private let dustBuster = DustBuster()
override func viewDidLoad() {
super.viewDidLoad()
store.subscribe { [weak self] value in
DispatchQueue.main.async {
switch value {
case .addFavorite, .removeFavorite: self?.tableView.reloadData()
default: break
}
}
}.cleaned(by: dustBuster)
}
}
Slide 29
Slide 29 text
subscribe returns a dust, so... Video1
Video1 Robert Zemeckis (1989) Back to the future Part II, Universal Pictures
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
final class RepositoryViewController: SFSafariViewController {
private let action = RepositoryAction()
private let store: RepositoryStore
private let repository: Repository
// ...
init?(store: RepositoryStore = .instantiate()) {
guard let repository = store.selectedRepository else {
return nil
}
self.store = store
self.repository = repository
super.init(url: repository.url,
entersReaderIfAvailable: true)
}
}
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
extension RepositoryViewController {
@objc fileprivate func favoriteButtonTap(_ sender: UIBarButtonItem) {
if store.favorites.contains(where: { $0.url == repository.url }) {
action.removeFavorite(repository)
favoriteButtonItem.title = "Add"
} else {
action.addFavorite(repository)
favoriteButtonItem.title = "Remove"
}
}
}
Slide 34
Slide 34 text
No content
Slide 35
Slide 35 text
FavoriteViewController
store.subscribe { [weak self] value in
DispatchQueue.main.async {
switch value {
case .addFavorite, .removeFavorite:
self?.tableView.reloadData()
default: break
}
}
}
.cleaned(by: dustBuster)
Slide 36
Slide 36 text
Thinking about testing
extension RepositoryViewController {
@objc fileprivate func favoriteButtonTap(_ sender: UIBarButtonItem) {
if store.favorites.contains(where: { $0.url == repository.url }) {
action.removeFavorite(repository)
favoriteButtonItem.title = "Add" // <- how to test?
} else {
action.addFavorite(repository)
favoriteButtonItem.title = "Remove" // <- how to test?
}
}
}
Slide 37
Slide 37 text
Figure1
Figure1 PIKOTARO (2016) https:/
/www.youtube.com/watch?v=0E00Zuayv9Q
Slide 38
Slide 38 text
Model-View-ViewModel Figure3
Figure3 https:/
/en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93viewmodel
Slide 39
Slide 39 text
No content
Slide 40
Slide 40 text
No content
Slide 41
Slide 41 text
No content
Slide 42
Slide 42 text
No content
Slide 43
Slide 43 text
RxSwift
https:/
/github.com/ReactiveX/RxSwift
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
RepositoryViewModel
final class RepositoryViewModel {
private let action: RepositoryAction
private let store: RepositoryStore
private let disposeBag = DisposeBag()
let buttonTitle: Observable
private let _buttonTitle = BehaviorSubject(value: "")
init(action: RepositoryAction = .init(),
store: RepositoryStore = .instantiate(),
favoriteButtonItemTap: ControlEvent) {
// ...
}
}
Slide 46
Slide 46 text
No content
Slide 47
Slide 47 text
RepositoryViewModel - init
let selectedRepository = store.selectedRepository // Observable
.filter { $0 != nil }.map { $0! }
favoriteButtonItemTap
.withLatestFrom(selectedRepository)
.subscribe(onNext: { [weak self] repository in
guard let me = self else { return }
if me.store.favoritesValue.contains(where: { $0.url == repository.url }) {
me.action.removeFavorite(repository)
} else {
me.action.addFavorite(repository)
}
}).disposed(by: disposeBag)
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
RepositoryViewModel - init
let selectedRepository = store.selectedRepository
.filter { $0 != nil }.map { $0! }
store.favorites // Observable<[Repository]>
.withLatestFrom(selectedRepository) { $0 }
.map { favorites, repository in
let contains = favorites.contains {
$0.url == repository.url
}
return contains ? "Remove" : "Add"
}
.bind(to: _buttonTitle).disposed(by: disposeBag)
Slide 50
Slide 50 text
No content
Slide 51
Slide 51 text
RepositoryViewController
final class RepositoryViewController: SFSafariViewController {
private let favoriteButtonItem = UIBarButtonItem()
private let disposeBag = DisposeBag()
private(set) lazy var viewModel: RepositoryViewModel = {
return .init(favoriteButtonItemTap: self.favoriteButtonItem.rx.tap)
}()
override func viewDidLoad() {
super.viewDidLoad()
viewModel.buttonTitle
.bind(to: favoriteButtonItem.rx.title)
.disposed(by: disposeBag)
}
}
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
RepositoryViewModelTestCase
class RepositoryViewModelTestCase: XCTestCase {
var action: RepositoryAction!
var store: RepositoryStore!
var viewModel: RepositoryViewModel!
var favoriteButtonItemTap = PublishSubject()
override func setUp() {
super.setUp()
self.action = RepositoryAction()
self.store = RepositoryStore.instantiate()
let controlEvent = ControlEvent(events: favoriteButtonItemTap)
self.viewModel = RepositoryViewModel(action: action, store: store,
favoriteButtonItemTap: controlEvent)
}
}
Slide 54
Slide 54 text
extension RepositoryViewModelTestCase {
func testButtonTitle() {
// set favorite repository as selectedRepository
let repository = Repository.mock()
action.selectedRepository(repository)
action.addFavorite(repository)
let expectation = self.expectation(description: "testButtonTitle expectation")
let disposable = viewModel.buttonTitle
.skip(1)
.subscribe(onNext: { title in
XCTAssertEqual(title, "Add")
expectation2.fulfill()
})
favoriteButtonItemTap.onNext() // turn "Remove" to "Add"
waitForExpectations(timeout: 1, handler: nil)
disposable.dispose()
}
}
Slide 55
Slide 55 text
Flux and MVVM combination can
clearly separate a presentation logic
and testable more than Flux only.
Slide 56
Slide 56 text
Flux Sample with FluxCapacitor
https:/
/github.com/marty-suzuki/FluxCapacitor/
tree/master/Examples/Flux
Slide 57
Slide 57 text
Flux + MVVM Sample with
FluxCapacitor
https:/
/github.com/marty-suzuki/FluxCapacitor/
tree/master/Examples/Flux%2BMVVM
Slide 58
Slide 58 text
It is said "Circulate the Flux" by our
team members when to use the Flux
update cycle. Figure1
Figure1 PIKOTARO (2016) https:/
/www.youtube.com/watch?v=0E00Zuayv9Q
Slide 59
Slide 59 text
In the FluxCapacitor case... Video2
Video2 Robert Zemeckis (1985) Back to the future, Universal Pictures
Slide 60
Slide 60 text
Thank you for listening
and enjoy Fluxing !
https:/
/github.com/marty-suzuki/
FluxCapacitor