Login Screen Implementation Using Swift & MVVM Design Pattern
I’m glad to present in this article well-known for software engineers MVVM design pattern which was invented by Microsoft architects Ken Cooper and Ted Peters specifically to simplify event-driven programming of user interfaces. Let’s move on and consider the class diagram below for more details and further clarification during this example.
Model-View-ViewModel (MVVM) is a structural design pattern that separates objects into three distinct groups:
• Model holds application data - it’s usually structs or simple classes.
• View/ViewController display visual elements and controls on the screen such as buttons, labels, images, text fields etc.
• ViewModel responsible for presentation logic, in other words transform model information into values that can be displayed on a view and serves as a bridge between the model and view.
For more information you can check out this book.
Cool, now it makes sense, doesn’t it?😎
Go ahead and create our model:
Yeah pretty easy, so let’s create our view. I used storyboard for it but you also can implement it programmatically, it’s up to you.
As you can see, in this sample I decided to implement GitHub authorization screen although next things that we need to do it’s to connect (control - drag) our visual elements to our LoginViewController
and prepare dismissing keyboard stuff also do not forget to set text fields delegate.
If you noticed, loginErrorDesriptionLabel
UILabel doesn’t appear on the screen because it’s hidden by default as we don’t need to notify user while it’s in not user initiated state.
Finally, let’s create our view model class:
Nice, but in a nutshell, I’ll try to explain what’s going on here. At first we declare service property loginManager
responsible for login functionality, then if we look back to class diagram we can see that view model owns model so let’s declare property observer credentials
which also take responsibility for model update notification, hence whenever credentials
will be set with new values we’ll be notified.
Before moving to the next step we have to create helper class Observable
for data binding between view and view model using Boxing technique.
Cool, next things that we need to do it’s declare Observable
properties credentialsInputErrorMessage
, isUsernameTextFieldHighLighted
, isPasswordTextFieldHighLighted
, errorMessage
which will help us with presentation logic.
As we know view model have to update model hence we create method updateCredentials
which will take responsibility for it.
Further follows login
method with error
(if it will appear) which responsible for authentication logic then credentialsInput
method which will check user’s credentials input in addition there also could be implemented email validation functionality, for instance but it depends from tasks.
The final phase it’s to inject view model into view controller and let it do its work, you also can pay attention on the class diagram and reassure that view controller owns view model so let’s do this.
It seems more complemented but let’s figure it out a bit. At first we declare loginViewModel
property of LoginViewModel
type, next things what we have to do, I believe you’ll find it obvious, it’s let loginViewModel
to do his work in loginButtonPressed
method while user tap on login button. There are we update model with existing values from usernameTextField
and passwordTextField
and check user’s credentials input whatsmore we gotta bind data and listen for its changes and to make sure we display updated value on the screen so we provide an opportunity to do it for bindData
method.
We’re almost at the finish line however a few lines of code in SceneDelegate
to make all it work:
That’s it, let’s check it out!😊