Getting Started

[Andrei15193]

React MVVM (react-model-view-viewmodel) provides an Object Oriented approach for Single Page Applications suitable for developers coming from the backend or desktop application development.

One of the advantages of the Model-View-ViewModel pattern is that it brings all the benefits of Object Oriented programming with a series of patterns that have been time-tested in different scenarios, We can leverage our entire knowledge and experience from this paradigm when using this pattern.

The library is built with simplicity in mind, adopting it should be easy and can be done gradually. Although consistency is important for long-term maintainability, React MVVM can be used in some parts of an application, but not necessarily everywhere. It may address particular concerns or solve specific issues.

For getting started with the library or simply experimenting, a CodeSandbox template is available with the latest version here: https://codesandbox.io/s/react-mvvm-vwsqlv. This provides an easy way to check out the features and play around with the base types and features.

Key ViewModel Concepts

• Decoupled
  ViewModels are decoupled from Views, the ability to pass around an object that is a ViewModel provides many benefits, from splitting the User Interface components into smaller, easier to maintain, ones to unit testing and type safety.

  The same ViewModel, or parts of a ViewModel, can be presented in any number of UI components providing the ability to keep the entire behavior and data in one place (a single source of truth) while handing its presentation separately.

• Observable
  All ViewModels are observable, this allows the UI to update accordingly without components having to know about one another.

  This can extend to ViewModels subscribing to one another to maintain a collective composite site. This is particularly helpful for forms and collections in general where the composing object exposes flags or other information based on its components.

• Type-Safe
  ViewModels must be type-safe. The properties and methods they expose must be clearly defined, the types of each property, method parameters and their return type.

  Extensions are made through well-known approaches, composition and inheritance, with an emphasis on the former.

Learning Guide

• API Calls & Displaying Data
• Forms and Validation
• ViewModel Design Considerations