Home

A library for developing React applications using Model-View-ViewModel inspired by .NET.

Motivation

Model-View-ViewModel is an alternative to Flux, an architectural pattern for designing and developing user interfaces. Similar with Flux, MVVM is a pattern which can have multiple implementations. For instance, implementations of Flux are Redux and MobX, as well as VueX. The patterns are not constrained to languages, but rather to the concepts that they use.

Most Single-Page Applications use a Flux implementations because it solves a number of issues while introducing others (stale data being one of them). MVVM is not fault free, it is an alternative to Flux. Choosing one over the other inherently means choosing the issues that the chosen pattern comes with, this is why it is important to know about them and know which one to pick based on the application that is being developed and eventually have libraries or frameworks that implement these patterns so we do not have to start from scratch every time.

The library comes to provide a concrete implementation of MVVM for React applications.

One of the things that .NET has which is not present in other programming languages is an implementation of events which are actually an implementation of the Observer design pattern. The main difference from the usual implementation being that an object can expose multiple events rather than just a subscribe/unsubscribe method pair where the observer is notified about anything that goes on with the object.

Subscribers can pick for which events they want to listen and be notified when they occur, providing a primary filter for when observers should be notified about something at the object level, rather than notifying the observers for anything and then let them decide whether they want to react or not.

Events are critical for any front-end application, anything that goes on the UI is mostly, if not always, event driven. The user clicks a button, the user types in an input, then the code reacts to these events which in turn may generate other events to which other objects react and eventually update the user interface.

Having this in mind and that .NET handles this very nicely by having built-in events, this library mimics that implementation. Not just of the event system, core interfaces as well, interfaces that are used for data binding in both WPF and WinForms, INotifyPropertyChanged and INotifyCollectionChanged.

If you are familiar with .NET you will see the similarities in this library.

Overview

The below diagram shows all modules and the dependencies between them. This should provide a general overview of the library, for more information refer to the API documentation.

The arrows indicate dependencies (implementation, inheritance or usage) and to what each module has access to

The dependencies follow through meaning that a module that depends on another has access to everything the dependent module has access to.

For instance, the Field module depends on the ViewModel module which has access to the Events module. Because of this, the Field module has access to the Events module as well. Having arrows to illustrate this dependency would only clutter the diagram.

As it can be observed, the Events module is the module all other modules depend on directly or indirectly. It is the base of this library.

Tutorials

• ToDo List App

  • ToDo List App Tutorial Part 1: Requirements
  • ToDo List App Tutorial Part 2: Setup
  • ToDo List App Tutorial Part 3: Adding a List of Items
  • ToDo List App Tutorial Part 4: Adding ToDo Items
  • ToDo List App Tutorial Part 5: Editing a ToDo Item
  • ToDo List App Tutorial Part 6: Deleting ToDo Items
  • ToDo List App Tutorial Part 7: Adding Form Validation
  • ToDo List App Tutorial Part 8: Adding a Search Bar for ToDo Items

API

• Events
  • IEvent<TEventArgs>
  • IEventHandler<TEventArgs>
  • INotifyPropertiesChanged
  • INotifyCollectionChanged<TItem>
  • IItemAddedEventArgs<TItem>
  • IItemRemovedEventArgs<TItem>
  • ICollectionChange<TItem>
  • ItemRemovedCallback<TItem>
  • DispatchEvent<TEventArgs>
• Observable Collection
  • IReadOnlyObservableCollection<TItem>
  • IObservableCollection<TItem>
  • ReadOnlyObservableCollection<TItem>
  • ObservableCollection<TItem>
• ViewModels
  • ViewModel
• Forms
  • IFormFieldViewModel<TValue>
  • FormFieldViewModel<TValue>
  • FormFieldCollectionViewModel
• Validation
  • IReadOnlyValidatable
  • IValidatable
  • IValidationConfig<TValidatableViewModel>
  • ValidatorCallback<TValidatable>
  • CollectionItemValidatorCallback<TValidatable, TItem>
  • ValidatableSelectorCallback<TItem, TValidatableViewModel>
  • ValidationConfigSelectorCallback<TItem, TValidatableViewModel>
  • UnsubscribeCallback
  • registerValidators<TValidatableViewModel>
  • registerCollectionValidators<TItem, TValidatableViewModel>
  • registerCollectionItemValidators<TItem, TValidatableViewModel>
• React Hooks
  • EventHandler<TEventArgs>
  • watchEvent<TEventArgs>
  • watchCollection<TItem>
  • watchViewModel<TViewModel>
  • ViewModelType<TViewModel>
  • useViewModelType<TViewModel>
  • ViewModelFactory<TViewModel>
  • useViewModelFactory<TViewModel>
  • useValidators<TValidatableViewModel>
  • useCollectionValidators<TItem, TValidatableViewModel>
  • useCollectionItemValidators<TItem, TValidatableViewModel>
• React Components
  • Input