Functionnal view modelling

1. Functional ViewModelling Using RxSwift

2. Why?

3. Why? • Expressive • Testable • No boilerPlate

4. What is RxSwift • Implementation of ReactiveX • Observable<Element> • Operators (map, ﬁlter) • Composable (Merge, zip)

5. MVVM There was MVC *This is not actually how MVC works, just making a point on what sometimes happens in projects

6. MVVM Decouple business logic and view implementation

7. Many faces of MVVM • Functions as input

8. Many faces of MVVM • Functions as input

9. Many faces of MVVM • Subjects / Relays as inputs class MessagesViewModel { !// Input let textInput: Observable<String> let sendButton: Observable<Void> let selectItem: Observable<MessageRepresentation> !// Output let dataSource: Observable<[MessageRepresentation]> let isLoading: Observable<Bool> […] }

12. Functions as ViewModels • Input and Output per viewModel struct MessagesInput { let textInput: Observable<String> let sendButton: Observable<Void> let selectItem: Observable<MessageRepresentation> } struct MessagesOutput { let dataSource: Observable<[MessageRepresentation]> let isLoading: Observable<Bool> }

13. • From input to output Functions as ViewModels struct MessagesInput { let textInput: Observable<String> let sendButton: Observable<Void> let selectItem: Observable<MessageRepresentation> } struct MessagesOutput { let dataSource: Observable<[MessageRepresentation]> let isLoading: Observable<Bool> }

14. • ViewModelFactory var viewModelFactory: (MessagesInput) !-> MessagesOutput = { _ in fatalError("Missing viewModel factory") } override func viewDidLoad() { super.viewDidLoad() let input = MessagesInput(textInput: textInput.rx.text.unwrap(), sendButton: sendButton.rx.tap.asVoid(), selectItem: .empty()) let output = viewModelFactory(input) bag.insert( output.dataSource.bind(to: dataSource), output.isLoading.bind(to: refreshControl.rx.isRefreshing) ) } Functions as ViewModels struct MessagesInput { let textInput: Observable<String> let sendButton: Observable<Void> let selectItem: Observable<MessageRepresentation> } struct MessagesOutput { let dataSource: Observable<[MessageRepresentation]> let isLoading: Observable<Bool> }

19. • The ViewModel itself Functions as ViewModels struct MessagesInput { let textInput: Observable<String> let sendButton: Observable<Void> let selectItem: Observable<MessageRepresentation> } struct MessagesOutput { let dataSource: Observable<[MessageRepresentation]> let isLoading: Observable<Bool> }

20. func messagesViewModel(messageStream: MessageStream) !-> (_ input: MessagesInput) !-> (MessagesOutput) { { (input: MessagesInput) in let messages = messageStream.messages let isLoading = messageStream.isLoading return MessagesOutput(dataSource: messages, isLoading: isLoading) } } Functions as ViewModels • The ViewModel itself struct MessagesInput { let textInput: Observable<String> let sendButton: Observable<Void> let selectItem: Observable<MessageRepresentation> } struct MessagesOutput { let dataSource: Observable<[MessageRepresentation]> let isLoading: Observable<Bool> }

23. Functions as ViewModels • Actions / Side eﬀects

24. func messagesViewModel(messageStream: MessageStream) !-> (_ input: MessagesInput) !-> (output: MessagesOutput, actions: Observable<MessagesAction>) { { (input: MessagesInput) in let messages = messageStream.messages.mapMany(MessageRepresentation.init) let isLoading = messageStream.isLoading let output = MessagesOutput(dataSource: messages, isLoading: isLoading) let newMessage = input.sendButton .withLatestFrom(input.textInput) .filter { $0.isEmpty } .map(MessagesAction.newMessage) let displayMessage = input.selectItem.map(MessagesAction.message) let effects = Observable.merge(newMessage, displayMessage) return ( output, effects) } } Functions as ViewModels • Actions / Side eﬀects

27. Everything you need before looking at the implementation

28. Easy Testing • Unit tests

29. Sources • Daniel Tartaglia • https://github.com/danielt1263/RxMyCoordinator • http://reactivex.io • https://medium.com/ﬂawless-app-stories/simplifying- rxswift-code-78071d5b780 • https://github.com/ReactiveX/RxSwift • http://slack.rxswift.org/

30. Questions?

31. Injection protocol HasViewModel: class { associatedtype Inputs associatedtype Outputs var viewModelFactory: (Inputs) !-> Outputs { get set } } extension HasViewModel { func installOutputViewModel<Action>(factory: @escaping (Inputs) !-> (Outputs, Observable<Action>)) !-> Observable<Action> { return Observable.create { [weak self] observer in let disposable = CompositeDisposable() self!?.viewModelFactory = { inputs in let vm = factory(inputs) _ = disposable.insert(vm.1.bind(to: observer)) return vm.0 } return disposable }.bindToInterstitials() } }

32. Injection - 2 Coordinator Example: func homeCoordinator(navigationController: UINavigationController?) { let homeViewController = navigationController!?.topViewController as! HomeViewController let actions = homeViewController.installOutputViewModel( factory: homeViewModel(api: Api.network) ) _ = actions.bind(onNext: actionHandler) }

Functionnal view modelling

More Related Content

What's hot (19)

Similar to Functionnal view modelling (20)

Recently uploaded (20)

Functionnal view modelling