Introducing Model View Intent and its Components

Learn how to use the different components of MVI.

Introduction to Model View Intent

The architectural approach we used to build the Wikipedia real-time search is not just another framework’s random approach to programming a UI. There’s a special design pattern that is used for structuring code in such cases: the Model View Intent (MVI).

Model-View-Intent is a term that was coined by the creator of Cycle.js, André Staltz, for an architecture inspired by the MVCModel View Controller architecture.

In MVC, we separate the functionality of an application into three components: the model, the view, and the controller. In MVI, the functionality of an application can be broken into three components, namely, the model, the view, and the intent.

MVI is designed to fit the Reactive model of programming like a glove. MVI being reactive means that each component observes its dependencies and reacts to the dependencies’ changes. This is different from MVC, in which a component knows its dependents and modifies them directly. A component “C” declares which other components influence it, instead of other components updating “C” explicitly.

Get hands-on with 1400+ tech skills courses.