Was ist der Unterschied zwischen MVI und MVC und MVVM?

8

Gibt es einen Unterschied zwischen der "neueren" Model-View-Intent-Architektur und den "älteren" wie MVC und MVVM?

Welches Problem wird von MVI behoben? Was sind die Ähnlichkeiten mit MVC / MVVM? Was sind die Unterschiede?

Es gibt bereits ähnliche Fragen zum Stackoverflow für MVC / MVV / MVP, aber bisher keine, die MVI erklären.

Was ist der Unterschied zwischen MVC und MVVM?

Was sind MVP und MVC und was ist der Unterschied?

vuko_zrno
quelle
2
Ebenfalls ähnlich: MVC vs MVP vs MVVM Anwendungsfälle
jkdev

Antworten:

21

Aus meiner Erfahrung wurde jedes Architekturmuster von diesen erfunden, um ein spezifisches Problem zu lösen, das das vorherige ignorierte oder noch nicht beobachtet wurde.

MVC - Model View Controller

Model View Controller

In UI-Anwendungen war die Verantwortung für das Rendern der Daten auf dem Bildschirm oder die Geschäftslogik und das Zusammenbinden der Daten zunächst nicht klar. Daher definierte MVC diese Verantwortung für drei Komponenten, von denen jede einen Zweck hat, und das Bild beschreibt die Beziehung zwischen diesen drei Komponenten.

Ansicht - ist die UI-Komponente, die alle Eigenschaften wie Farbe, Form, Werkzeuge zum Abhören der Klickereignisse usw. enthält.

Modell - ist die Komponente, die die Geschäftslogik definiert, die die Ansicht rendern und sich entsprechend verhalten soll.

Controller - ist derjenige, der das Modell ändert. Wenn die Ansicht beispielsweise einen Namen zum Speichern hat, übergeben Sie die Ansicht an den Controller, und der Controller bearbeitet das Modell mit den richtigen Aktionen.

MVP - Model View Presenter

Das Problem mit MVC, dass es eine gute Kopplung zwischen den drei Komponenten gibt. Wenn Sie die Ansichtsaufrufe ändern möchten, müssen Sie den Controller und das Modell aktualisieren. Aus dem MVC-Bild geht hervor, dass die Beziehung zwischen den drei Komponenten sehr eng ist. Sie könnten eine dieser Komponenten nicht ohne die andere ersetzen. Daher hat MVP eine sauberere Lösung für das vorherige Problem bereitgestellt, indem das Modell und die Ansicht getrennt wurden. Die Interaktionen zwischen ihnen werden über den Presenter beibehalten. Presenter ist der mittlere Mann, den die Ansicht und das Modell jeweils aufrufen. Wenn Sie also eine Liste der Lieblingsfilme speichern möchten, rufen Sie die Aktion Benutzer anhören (*) auf, rufen Sie dann die Präsentatorfunktion auf, die das Modell aktualisiert, und das Modell teilt dem Präsentator mit, ob dies erfolgreich ist oder nicht, und der Präsentator weist die Ansicht an, die anzuzeigen richtige Nachricht.

Geben Sie hier die Bildbeschreibung ein

MVVM - Modellansicht ViewModel

Mit dem Aufkommen des reaktiven Paradigmas war klar, dass wir Bedenken in UI-Anwendungen besser trennen können, indem wir nur die Änderungen beobachten und uns darauf verhalten. So gibt es zum Beispiel einen Klick in der Ansicht, der eine API aufrufen muss, um die neuesten Fernsehsendungen zu erhalten.

Dieser Ansichtsklick wird im ViewModel beobachtet. ViewModel interagiert mit dem Modell, um die Daten abzurufen, und schließlich veröffentlicht ViewModel diese Daten mit einem anderen Beobachter in der Ansicht.

Kurz gesagt: View beobachtet ViewModel, um UI-Updates zu erhalten, und ViewModel beobachtet View, um die richtige Aktion mit dem Modell aufzurufen. Das Beobachtermuster hat sich bei der Entkopplungslogik als würdig erwiesen. Hier geht es also zu einem neuen Muster.

Geben Sie hier die Bildbeschreibung ein


Nachdem wir über die beliebtesten Architekturmuster gesprochen haben, hat jeder versucht, den UI-Code vom Business-Code zu entkoppeln. Die vorherigen Muster sind jedoch nicht an die gleichzeitige Aktualisierung der Benutzeroberfläche mit unterschiedlichen Status gebunden.

Wenn bei Ihnen ein Problem im Zusammenhang mit dem Laden aufgetreten ist und gleichzeitig eine Fehlermeldung angezeigt wird, werden Sie verstehen, wovon ich spreche. Um den Status der Benutzeroberfläche beizubehalten, müssen Sie zusätzliche Anstrengungen unternehmen, um zu überprüfen, was Sie falsch geschrieben haben, um diese zu verursachen Art von Problemen.

MVI - Model View Intent

MVI basiert auf einer alten Idee, die als Finite-State-Maschine bezeichnet wird. Jedes System oder jede Komponente hat vorhersehbare Zustände. Eine Menge von Zuständen ist eine Finite-State-Maschine. In MVI wird jedes Update der Benutzeroberfläche durch einen neuen Status definiert. Sie können feststellen, dass dies überwältigend ist. Stellen Sie sich jedoch vor, dass Sie bei jeder Änderung der Benutzeroberfläche einen Screenshot haben. Dies ist der Status. Sie können die Statusprobleme jetzt debuggen, testen und reproduzieren.

Wie dies erreicht werden kann, ist das MVI in der Praxis. Jede Benutzerinteraktion mit der Benutzeroberfläche wird in MVI durch eine Absicht definiert . Absicht ist das, was der Benutzer für diese Aktion benötigt. Es kann sich um einen Film handeln, den Bildschirm aktualisieren oder sogar den Bildschirm öffnen. In diesem Fall handelt es sich um die Absicht eine anfängliche Absicht, den Bildschirm mit allen erforderlichen Daten anzuzeigen.

Welche Komponente diese Absichten dazu bringt, entsprechend zu handeln, was Sie definieren. Sie könnten einen Presenter oder ein ViewModel verwenden. Es spielt keine Rolle, MVI ist eher eine Vorgehensweise als die Verwendung einer neuen mittleren Komponente.

Ich werde mit ViewModel fortfahren. ViewModel wird diese Absichten erhalten und entscheiden, welcher Anwendungsfall aufgerufen werden soll (Modellverhalten).

Alle Anwendungsfälle werden im ViewModel an der Sommerfunktion übergeben, die entscheidet, welcher Status in der Ansicht wiedergegeben werden soll. Außerdem erhalten Sie den vorherigen Status, sodass Sie den vorherigen und den neuen Status zum Aktualisieren des Bildschirms haben, wodurch die Rendering-Aktualisierungen reduziert werden und View erhalten nur die neuen Hinweise, um sich selbst zu aktualisieren.

und schließlich ist MVI ein unidirektionaler Fluss, der mit der Ansicht beginnt und mit der Ansicht endet.

... Ansicht -> ViewModel / Presenter -> Modell -> Ansicht -> ...

MVI unterscheidet sich in der Verwaltung des Status. Es ist eine Kombination mehrerer Ideen, um eine stabilere und testbare App zu erstellen.

Mohamed Ibrahim
quelle
4

Eine wirklich gute Aufschlüsselung finden Sie hier: https://academy.realm.io/posts/mvc-vs-mvp-vs-mvvm-vs-mvi-mobilization-moskala/ . Im Kern greift MVI die Ideen von MVVM (zustandsloser UI-Status) auf, trennt Geschäftslogik und -modelle und setzt das reaktive Framework darauf. Machen Sie Dinge zu Ereignisströmen anstelle von diskreten Aktionen, machen Sie empfangende Elemente zu Konsumenten transformierter Ströme anstelle von Präsentationselementen und machen Sie den Status zu einer schreibgeschützten, verfügbaren Sache, auf die explizit auf sehr strukturierte Weise reagiert wird.

Dies erfordert, dass Sie beim Schreiben Ihrer Anwendung einen funktionalen Ansatz verfolgen, insbesondere den UI / View-Teil der Dinge. Der Status wird nicht geändert, der neue Status wird aus einer Absicht und einer Reihe von Anwendungsfällen berechnet. Dies wird hier ziemlich gut erklärt: https://proandroiddev.com/mvi-a-new-member-of-the-mv-band-6f7f0d23bc8a .

Es soll der wachsenden Komplexität moderner UI-Anwendungen Rechnung tragen, die einen nicht trivialen clientseitigen Status aufweisen, der explizit verwaltet werden muss. Wie die meisten erfahrenen Programmierer wissen, stammen die komplexesten Fehler aus einem Zustand, der auf unerwartete Weise geändert wird. Diese Statusmanipulation kann zu "ungültigen" Status führen, die Ihre Anwendung nicht verarbeiten kann. Dies ist effektiv eine abgestürzte Anwendung. MVI behebt dies, indem Statusübergänge explizit und sorgfältig strukturiert werden, sodass das System niemals in einen ungültigen Status übergeht und der Status immer verständlich ist.

Rob Conklin
quelle