Building Apps with Aurelia: #4 MVVM in Aurelia
Hey Guys :D In this post we will talk about implementing MVVM in an Aurelia application and different approaches that we can use to do it.
MVVM is about having a good ‘Separation of Concerns’ in the application. It’s about separating your page structure from your interaction logic. When we do things loosely using the easy way, in our apps we have our page structure and interaction logic in the same file. Even if we separate these things sometimes DOM/UI element access creeps in to our interaction logic. This ultimately becomes a mess that is harder to understand and difficult to maintain. Instead by taking some time upfront and implementing proper MVVM in the application, you get proper separation between your structure and interaction logic which is loosely coupled with each other.
Ultimately the apps you build is more maintainable. That means you have a better idea about how and where to go and change your code be assured that you are less susceptible to break something because you are loosely coupled with your structure and interaction code. Also the code becomes more testable. We can easily write our unit tests against the interaction logic only and be sure that it will be correct as we change and build new features.
MVVM is based on the MVC (Model-View-Controller) pattern, you can use MVVM architecture to structure your client-side code. MVVM has rich databinding with loosely coupled relationship with the view elements and the corresponding properties on the ViewModel. In MVVM there is a continuous interaction between the View and the ViewModel and both View and the ViewModel has the same lifetime. This is different from MVC since there View and the Controller has different lifetimes. In MVVM the communication/data flow happens via Data Binding where in MVC the communication between View and the Controller happens via calling methods rather than data binding.
View is the defined structure that users see on the screen. View contains Bindings to setup the communication between the view and the ViewModel and binds to Properties and Methods on the ViewModel
ViewModel provides data to the view for presenting the data and for manipulation of data so it contains data management logic. It also encapsulates the interaction logic such as calls to backend services, navigation logic etc. ViewModel can expose a model object directly to the view so the bindings can reach down to the properties of the model object and change them directly.
Models contain the client-side data. These data structures have properties that represent different types of data an entity may have. These properties can be discreet properties or computed properties where it can be a combination of other properties or computed at runtime with other values. These model can have validation logic in them to make sure the values entered when editing conforms to the rules of the model.
In most applications alongside Model, View and ViewModels a Client Services layer also exists. This is used to expose shared functionality and data to other components of the architecture. These client services are consumed by one or more ViewModels and this decuples the ViewModel layer from external dependencies such as data services or back end services.
There are several ways we can achieve MVVM in Aurelia apps and we will talk about 2 main ways of doing it. There are 2 main ways to implement MVVM in Aurelia apps. They are,
- Using compose element
- Using Aurelia Routing & Navigation System
Using compose element
Compose element can be used to point to a View and a ViewModel and bring them in as a piece of UI in to a containing view.
Using Aurelia Routing & Navigation System
Aurelia has a Routing and Navigation System that can be used to pull views in to a container and swap out the Views and hookup ViewModels to them accordingly as the user navigates around the application.
Sooo. That was a lot of text and explaining: D But that is needed to really understand what is going on inside your Aurelia application and structure your application properly. In the coming posts, we’ll look in to how to set this up in your Aurelia app. Till then.. C ya.. :D
