MVVM Login Screen with RxSwift

How to use MVVM for classic login screen binded with RxSwift ?

This is how we do .. (song♩♪ ♫ ♬)

Lets play! .. but first, what’s MVVM ? you should take a look here ..

MVVM in Swift - Artsy Engineering

And for RxSwift ? you should fin all tips and tricks here https://github.com/ReactiveX/RxSwift

All what we need .. in 6 steps .. !!

Now .. let’s start with :

1- Model

We create a model to login with username and password

Then we need to create our viewModel who will handle this model ..

2- FieldViewModel

• We define this protocol VSFieldViewModel to represent entry data field (in our example we have emailField and passwordField)
• We use some property to describe the field such as title and errorMessage
• Then we define observables (var value: Variable<String>) to handle and update the user interface when needed, in our case the field value and the errorMessage are the variables to bind later.

• We define a validate() function to valid data using a defined pattern
• We add extension to get some utility method to valid size of string or valid pattern (used later to valid password and email input value)

3- Password field viewModel

• In addition of basic FieldViewModel we add another protocol to customize the type of password input (secure text)
• The viewModel define the validate() method (string input stize)

We do same for the next viewModel ..

4- Email field viewModel

• The viewModel here define variables and custom pattern to validate the input value (email pattern format : xx@xx.xx)
• As you can see some Variable can be empty (even nil) like the errorMessage who should be updated after an invalid entry

Now .. we should create our controller viewModel who will handle those fields below ..

5- Login viewModel

• In this viewModel we put our model
• emailFieldViewModel the field to handle email data
• passwordFieldViewModel the field to handle password data
• validForm() to validate all input data
• disposeBag coming with RxSwift to manage memory
• isLoading isSuccessanderrorMessage are Variables RxSwift managed and used by controller to bind the UI
• signin() method used to call authentication service

• We we made request with model email and password from viewModel field
• We update observables on response to handle UI, first we update isLoading state, then when succeed update isSuccess state
• Same when error we put the error message onerrorMessage

6- Last! The Controller

• The ViewController will configure the binding between UI and viewModel
• Bind outlets with field viewModel
• Add tap action with Rx to proceed the login when form is valid
• Update and show message when we have an errorMessage or Success.

• We define observables for our two variables errorMessage andisSuccess
• We bind as driver the actionButton (driver used for UI to be garanted as main thread task)
• We add some filter to avoid call when object is nil with filterNil and to avoid call when bool object is false with filter{$0}

… That’s it !

What’s next ?

Have fun to play with Rx and build helpful viewModel !

I hope you implement this in your real swift project to do some great binding and avoid massive code on your swift files !

I hope that you enjoy this tutorial .. let me know in comments! Cheers