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!😊
