Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Training: MVVM Pattern


Published on

The Model View ViewModel (MVVM) is an architectural pattern originated by Microsoft as a specialization of the Presentation Model (Martin Fowler). Similar to MVC, MVVM is suitable for client applications (Xaml-based, Xamarin, SPA, ...) because it facilitates a clear separation between the UI and the Business Logic. Examples with WPF, MvvmCross, AngularJs. It also contains solutions for common use cases.

Published in: Technology
  • ★★ How Long Does She Want You to Last? ★★ A recent study proved that the average man lasts just 2-5 minutes in bed (during intercourse). The study also showed that many women need at least 7-10 minutes of intercourse to reach "The Big O" - and, worse still... 30% of women never get there during intercourse. Clearly, most men are NOT fulfilling there women's needs in bed. Now, as I've said many times - how long you can last is no guarantee of being a GREAT LOVER. But, not being able to last 20, 30 minutes or more, is definitely a sign that you're not going to "set your woman's world on fire" between the sheets. Question is: "What can you do to last longer?" Well, one of the best recommendations I can give you today is to read THIS report. In it, you'll discover a detailed guide to an Ancient Taoist Thrusting Technique that can help any man to last much longer in bed. I can vouch 100% for the technique because my husband has been using it for years :) Here's the link to the report ★★★
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ◆◆◆
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ How Long Does She Want You to Last? Here's the link to the FREE report ■■■
    Are you sure you want to  Yes  No
    Your message goes here
  • ➤➤ 3 Reasons Why You Shouldn't take Pills for ED (important) ♣♣♣
    Are you sure you want to  Yes  No
    Your message goes here

Training: MVVM Pattern

  2. 2. Agenda • Brief History • 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. 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. 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. 5. MVVM Compared to others Patterns ViewModel in MVC (aka Presentation.Model) is very different in MVVM !
  6. 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. 7. Dream World Designer-Programmer workflow Clear Responsibilities between Designers and Developers.
  8. 8. What about AngularJS ? “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. 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. 10. A quick example without Model, just VVM No codebehind !
  11. 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. 12. Mvvm Concepts • DataContext • Data Binding • INotifyPropertyChanged • Commands • Data Templates
  13. 13. DataContext • Fundamental concepts 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. 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. 15. INotifyPropertyChanged used to notify 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. 16. Commands • Invoked in 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. 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. 18. Popular .NET MVVM Frameworks MVVM is an architectural pattern : it’s not standardized by MS or mandatory (such as in 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. 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. 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. 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. 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. 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. 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. 25. Questions
  26. 26. References • • • • • • • • •
  27. 27. Find out more • On
  28. 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. 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).