UIアーキテクチャパターン - MVC/MVVM/MV比較

MVC/MVVM/MV 比較#

scale 2
!theme vibrant
namespace mvc {
	namespace ui {
		class Controller
		class View
	}
	namespace data {
		class Model
	}
	Controller --> View :update & listen
	Controller --> Model : get & set
	View --> Model
}
namespace mvvm {
	namespace ui {
		class View
		class ViewModel
		View --> ViewModel : data binding
	}
	namespace data {
		class Model
		ViewModel --> Model : get & set
	}
}
namespace mv {
	namespace data {
		class StatefulModel
		class Model
		StatefulModel --> Model
	}
	namespace ui {
		class View
		View --> StatefulModel : observe & action
	}
}

MVX#

StatefulModel 優先
StatefulModel を変更できない場合、または UI レイヤーのみを変更する場合は ViewModel を使用します。
データバインディングフレームワークがない場合は Controller を使用します。

scale 2
!theme vibrant
namespace data {
	class StatefulModel
	class Model
	StatefulModel --> Model
}
namespace ui {
	class ViewModel
	class View
	class Controller
	Controller --> View : update & listen
    Controller --> ViewModel : get & set
	View --> ViewModel : data binding
	ViewModel --> StatefulModel : observe & action
	View --> StatefulModel : observe & action
}