UI Architecture Patterns - MVC/MVVM/MV Comparison

MVC/MVVM/MV Comparison#

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 priority
If unable to modify StatefulModel or only modify the UI layer, use ViewModel
If there is no data binding framework, use 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
}