Downloaded 118 times
Uploaded byBetclic Everest Group Tech Team
Training: MVVM Pattern
The document provides a comprehensive overview of the MVVM (Model-View-ViewModel) architectural pattern, detailing its historical background, components, and advantages such as loose coupling, maintainability, and testability. It also compares MVVM to other patterns, discusses common scenarios, and highlights popular frameworks in the .NET environment. Additionally, it includes practical examples and use cases for implementing MVVM in applications, particularly within various programming environments like AngularJS.
More Related Content
Similar to Training: MVVM Pattern
More from Betclic Everest Group Tech Team
Training: MVVM Pattern
- 1. MVVM PATTERN UNDERTHE SCOPE MAXIME LEMAITRE
- 2. Agenda • BriefHistory • Overview • A First example • Where magic happens … • Common scenarios • Conclusion • Questions Many examples in WPF, but many concepts also apply to the others stacks
- 3. Brief History •Originated from Microsoft – inspired from Presentation Model design pattern introduced by Martin Fowler – First article in 2005 by John Gossman – Standardization by Josh Smith in 2009 • Originally invented in WPF – But later adopted in Silverlight, Windows Phone, Windows 8 • Now – Favorite pattern for all Xaml-based application (WPF, Win8, WP, …) and Xamarin apps – … Also in Java (ZK) … – … and for the Web (AngularJS, KnockoutJS, …)
- 4. Architectural View •The Model includes all the code that implements the core app logic and defines the types required to model the app domain. This layer is completely independent of the view and view model layers. • The View layer defines the UI using declarative markup. Data binding markup defines the connection between specific UI components and various ViewModels (and sometimes model) members. • The ViewModel layer provides data binding targets for the view. In many cases, the view model exposes the model directly, or provides members that wrap specific model members. The view model can also define members for keeping track of data that is relevant to the UI but not to the model, such as the display order of a list of items.
- 5. MVVM Compared toothers Patterns ViewModel in MVC (aka Presentation.Model) is very different in MVVM !
- 6. Why MVVM ? • Loosely coupled architecture. The MVVM pattern promotes a design pattern that emphasizes the separation of concerns between view, user interaction logic, behaviors and model. Applications built with such loosely coupled architecture often result in rock-solid stability with less issues. • Maintainable and extensible code. With MVVM pattern, your code is more maintainable and easy to extend. This is made possible because your project is generally separated into layers thus enables you to enhance specific parts without affecting the others. • Testable code. The MVVM pattern allows your code to be consistently tested through unit testing. It is possible to unit test only certain functions in the layers, thanks to the great separation concept introduced by MVVM. • Manageable development process. With the UI (View) separated from the user interaction logic, designers can focus on the user interface and experience aspects of the application, while developers can focus on the model, entities and business logic in a parallel work stream.
- 7. Dream World Designer-Programmerworkflow Clear Responsibilities between Designers and Developers.
- 8. What about AngularJS? https://plus.google.com/+AngularJS/posts/aZNVhj355G2 “For several years AngularJS was closer to MVC … but over time and thanks to many refactorings and api improvements, it's now closer to MVVM ” “Having said, I'd rather see developers build kick-ass apps that are well-designed and follow separation of concerns, than see them waste time arguing about MV* nonsense. And for this reason, I hereby declare AngularJS to be MVW framework - Model-View-Whatever. Where Whatever stands for whatever works for you".
- 9. A quick example without MVVM, WinForms-like Each control should have a name to be used in CodeBehind You have to assign a method to an event handler to process UI action.
- 10. A quick example without Model, just VVM No codebehind !
- 11. A quick example with AngularJS Model/properties don’t need to observable.. “Knockout dependency tracking is a clever feature for a problem which angular does not have” – StackOverflow the $scope object could be considered the ViewModel that is being decorated by a function that we call a Controller
- 12. Mvvm Concepts •DataContext • Data Binding • INotifyPropertyChanged • Commands • Data Templates
- 13. DataContext • Fundamentalconcepts in Data Binding (see next) – refers to a source of data that can be bound to a target • All User interface elements in WPF have a DataContext dependency property • That property has "value inheritance", so if you set the DataContext on an element, the DataContext property on all of its logical descendant elements will reference the same object too. • The DataContext is set to a bindable entity – ViewModel in Mvvm • Can be set via Code or via Markup
- 14. Data Binding •Data binding connects two properties (called binding target property and binding source property), so that if one changes, the other changes too – The target property of a binding should always be a WPF dependency property – The source property of a binding should be either a dependency property or fire PropertyChanged event on the property change. • Automated • Many options – Direction of the data flow (One way, two way, One Time, One way to source, …) – What triggers source updates (LostFocus, PropertyChanged, Explicit, …) – Bind to objects, collections, UI Elements, – Path, Value Converters, Async, Fallback, StringFormat … – Continue Reading here • MVVM – Databing push the changes to from ViewModel to View and From View To ViewModel – Think Data binding : everything should be data bound !
- 15. INotifyPropertyChanged used tonotify clients, typically binding clients, that a property value has changed. Also for INotifyCollectionChanged, IDataErrorInfo, INotifyDataErrorInfo No INotifyPropertyChanged = No Databinding ! "Is it generally desirable to implement INotifyPropertyChanged on Model classes, ViewModel classes, or both?” Answer here
- 16. Commands • Invokedin the View by user interaction. – encourages a clean Xaml/UI • Bound to ICommand properties in the ViewModel • All MVVM-Frameworks provide implementations for ICommand – RelayCommand – EventToCommand
- 17. Data Templates •Converts non-visual data into its visual representation • Defines how a view model will be rendered or can modify its default visual representation without changing the underlying object itself or the behavior of the control that is used to display it. Simple DataTemplate for a ListBoxItem More advanced DataTemplate for a DataType
- 18. Popular .NET MVVMFrameworks MVVM is an architectural pattern : it’s not standardized by MS or mandatory (such as in asp.net MVC). Many developers has already created very good implementations. • MVVM Light Toolkit • Caliburn.Micro • MvvmCross • Catel • Simple MVVM Toolkit • Cinch • … • … • Your own here Not all Frameworks are portable (PCL) !
- 19. Use case #1 List with Selection How to get the selected item of a list without adding an handler to the selected event ? (Because we don’t want something in code behind files) Bind the SelectecItem to the CurrentXXX property of the ViewModel : each time an item is selected, the CurrentXXX will be updated automatically
- 20. Use case #2 VM-VM communications How to communicate between ViewModels ? (because a ViewModel should ideally have no knowledge of views or even the others VMs) Use a messenger (Mediator pattern) to send/receive notifications + parameters. Useful for master/child, splash screens, progress bar, dialogs, …
- 21. Use case #3 Formatting & Data conversion Should I have to add a property to a View Model to display YYY when my model property is in format XXX ? Use a Value Converter !
- 22. Use case #4 Load Data How/when do I load data in a Mvvm app ? Async all the way ! Never block UI thread in Client App Dev. App taking more than 5 seconds are often killed by Os. When loading data, working on rendering thread may freeze animation & UX
- 23. Common scenarios #5 show/navigate between views How do I navigate between view in a Mvvm app ? Using MvvmCross Custom implementation It depends on the navigation logic : master-detail, tabs, modal, … Use the native platform NaviguationService or a custom implementation of your favorite MVVM Framework.
- 24. Common scenarios #6 show Modal Dialog How do I show dialog messages/custom views ? Send dialog messages with Messenger (VM->View communication) Even better create a dialog service to fit your context (Custom View, Async, callback, …)
- 25.
- 26. References • http://technology4excellence.wordpress.com/2014/04/07/mvc-mvp-mvvm/ • http://msdn.microsoft.com/en-us/library/gg405484.aspx • http://www.intersoftpt.com/Support/ClientUI/Documentation/MVVMPatternOverview.html • http://stackoverflow.com/questions/13156040/nice-and-simple-definition-of-wpfs-mvvm • http://www.codeproject.com/Articles/278901/MVVM-Pattern-Made-Simple • http://www.slideshare.net/Jaffel/introduction-to-design-pattern-mvvm • http://www.codeproject.com/Articles/100175/Model-View-ViewModel-MVVM-Explained • http://www.codeproject.com/Articles/278901/MVVM-Pattern-Made-Simple • http://msdn.microsoft.com/en-us/magazine/jj651572.aspx
- 27. Find out more • On https://techblog.betclicgroup.com/
- 28. We’re hiring ! We want our Sports betting, Poker, Horse racing and Casino & Games brands to be easy to use for every gamer around the world. Code with us to make that happen. Look at all the challenges we offer HERE Check our Employer Page Follow us on LinkedIn
- 29. About Us •Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio comprising various complementary international brands: Betclic, Everest, Bet-at-home. com, Expekt, Monte-Carlo Casino… • Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players. We want our brands to be easy to use for every gamer around the world. We’re building our company to make that happen. • Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association).