Overview

mobx-view-model is a library for integration MVVM pattern with MobX and React.

Motivation

The main goal of this library is to integrate the usage of MVVM architectural pattern with React and MobX reactivity.

A key aspect of this integration is enabling strict isolation between business logic and presentation layers. By enforcing a clear separation through ViewModels, developers can:

1. Encapsulate state management and business rules within observable ViewModels
2. Keep React components focused only on rendering and user interactions
3. Eliminate direct dependencies between UI components and domain models

Pros and cons

Pros:

• More convenient separation of business logic from the presentation layer (React/etc).
• More flexible and seamless integration of the React ecosystem with MobX.

Cons:

• An additional wrapper in the form of the withViewModel() HOC, which wraps the component in an extra layer. This wrapper component further encloses the outer component within observer().
• Additional kilobytes for your bundle.

About MVVM

MVVM is an architectural pattern in computer software that facilitates the separation of the development of a graphical user interface (GUI; the view)—be it via a markup language or GUI code—from the development of the business logic or back-end logic (the model) such thatd the view is not dependent upon any specific model platform.