Software Architectural Design Patterns(MVC, MVP, MVVM)

Dongho, LEE

22

What’ Design Pattern?A design pattern is a general reusable solution to a commonly occurring problem.

Creational Structural Behavioral

Meaningdetermines how

an object is created

Organize objects

organize, manage, and combine the

behavior of an object

Range

Class Factory Method Adapter(Class) InterpreterTemplate Method

ObjectAbstract Factory

BuilderPrototypeSingleton

Adapter(Object)Bridge

CompositeDecorator

FacadeFlyweight

Proxy

CommandIterator

MediatorMementoObserver

StateStrategyVisitor

33

What’ Architecture Design Pattern?

- Similar to design pattern, but has a broader scope

View(Composi

te)

Controller(Strategy

)

Model(Observer

)

< Representative Architecture Pattern : MVC >

44

Design Pattern simply explained with sample

ClassicMVC MVC MVP MVVM

55

Classic MVC

MODEL VIEW CONTROLLER

User Event

Update CheckCheck for updates

Is Data update needed?

Request Data update

Yes

Update Data

UI Change

No

66

MVC in Android

MODEL VIEW(XML)

CONTROLLER(Activity, Fragment)

User Event

Update CheckCheck for updates

Is Data update needed?

Request Data updateYesUpdate Data

UI Change

No

Interact with

Get user eventNotify event

Setup View

77

MVC in android

VIEW

activity_main.x

ml

ListViewEditTextButton

CONTROLLER

MainActivity

findViewById()addListener

(Button, EditText)

childEventListener()

getChatFromServer()

Notify Event

Setup View

MODEL

ChatDataFireBase

Interact with

ListAdapter.add()editText.setText()

88

MVP Pattern in Android

VIEW PRESENTER MODEL

Request Data depending on event

Notify event to Presenter

Get Data Update Data

Update UI Process business logic

User Event

Notify

Send data

View Layer doesn’t know Model anymore!!

Ask view to setup itself

99

MVP in android VIEW

activity_main.xmlListViewEditTextButton

MainActivity implements MainView

findViewById();addListener

(Button, EditText)

updateListView()initializeInputCons

ole()setListAdapter()

PRESENTER

MainPresenter

MainView<Interface>

Notify Event

Ask view to setup itself

MODEL

ChatDataFireBase

Interact with

updateListView()initializeInputConsole()

setListAdapter()

1 : 1

1010

MVVM Pattern in Android

View VIEWMODEL MODEL

Request Data depending on event

Get Data Update Data

Update UI Process business logic

User EventInvokeAction

Update Model

Statechangeevent

Data Binding

Update View Itself

View Layer doesn’t know Model

anymore!!

1111

MVVM in android View

activity_main

(xml)ListViewEditTextButton

MainActivity

ViewModel

ViewModel<Interface>

MainViewModel

onSendButtonClicked

(View view)onTextChanged()getCurrentTime()

Invoke Action

Bind to data

Model

ChatDataFireBase

Interact with

Data Binding

N : 1

1212

Data Binding Library

Required : Android version 2.1 Android Studio 1.3 Gradle upper 1.5.0-alpha1

LAYOUT (XML)

ACTIVITY

Create Method and Observable

1313

Data Binding Library

LAYOUT (XML)

1414

Data binding Library

DataBindingUtils.setContentView()Binding Class is automatically generated based on xml, and changed base on Pascal notation standard.Activity_main.xml -> ActivityMainBinding.class

1515

Data binding LibraryExample using ButterKnife

1616

Data binding LibraryExample using DataBinding Library

1717

Data Binding Library

LAYOUT (XML)

1818

Data binding Library

ViewModelJust use observable to settle value.

Learn more :https://developer.android.com/topic/libraries/data-binding/index.html

1919

Conclusion

What’s COOLEST architecture in Android?There is no right answer for that.It’s depend on case by case.

However, ButterKnife that we use on our app CAN BE REPLACED with Data Binding Library.