SwiftUIとMVIの相性が良さそうだったので調べてみた #1
経緯
こちらの記事を読んで、MVI patternが気になったため、色々調べてみました。
まだまだ知らないことが多いので、間違いなどあったらご指摘頂けますと幸いです。
iOS+MVIの記事が少なく、Android/Webの知見に頼る部分も多くあるため、調べ方なども含めて、参考になると幸いです。
MVIとは
Model-View-Intentの略です。MVIのそれぞれの役割については後述しますが、まずはどのようにMVIが提案されたのか、調べていった過程で見てもらえればと思います。
色々調べている中で、Androidでは記事などで紹介されているとアドバイスをもらったので、 「Android MVI」で調べてみました。
Androidでは、既に有名なカンファレンスなどでも紹介されているようで、iOSよりも情報量が多かったです。
さらに、Androidの記事などを見ていく中で、「Cycle.jsはMVIアーキテクチャを採用しているFramework」という情報を知りました。
Cycle.js
Cycle.jsは、MVI patternを採用したWebフロントエンドのフレームワークです。
上にリンクを貼ったCycle.jsのサイトを参考に、MVI patternにおける、それぞれのクラスの役割について調べようと思います。
余談ですが、「Cyclejs MVI」で調べると、参考になりそうな記事が多く出てきます。MVIアーキテクチャの概念理解に困ったら、Cycle.jsで調べると、多くの情報を得られそうです。
MVI pattern
MVI is a simple pattern to refactor the main() function into three parts: Intent (to listen to the user), Model (to process information), and View (to output back to the user).
上記、Cycle.jsの公式ドキュメントに記載されていました。
Intentがユーザからの操作を監視 → Model側で情報を処理 → Viewへ反映 という流れで処理を記述するようです。
まとめ
本記事では、MVIアーキテクチャの紹介をしました。
次回記事で、実際にSwiftUIでMVIアーキテクチャを実装したいと思います。
参考資料
- MVI Architecture
- http://yuyakaido.hatenablog.com/entry/2017/12/12/235143
- http://hannesdorfmann.com/android/model-view-intent
- https://medium.com/mindorks/mvi-a-reactive-architecture-pattern-45c6f5096ab7
- https://speakerdeck.com/oldergod/android-niokeru-model-view-intent-akitekutiya
- https://qiita.com/numa08/items/f096ac085e4a1ff7f63b
- https://github.com/oldergod/android-architecture/tree/todo-mvi-rxjava-kotlin
- iOS