MVVM em aplicações Mobile - Comparação entre iOS, Android e Xamarin

1. 11
MVVM - IOS, ANDROID, XAMARIN
GUILHERME ENDRES

2. 22
MVVM - IOS, ANDROID, XAMARIN
GUILHERME ENDRES

4. MVVM
!= !=

5. MVVM IOS

6. IOS | MVC
Model View Controller

7. IOS | MVC
Model View
View
Controller

8. Massive View Controller
IOS | MVC

11. M V V M

12. Model ViewModelView
View
Controller
IOS | MVVM

14. Model
Nome
Preço
Teor Alcoólico
Marca
IOS | MODEL

15. Model ViewModelView
View
Controller
IOS | MVVM

16. ViewModel
BANCO DE DADOS
VALIDAÇÃO DE DADOS
MANIPULAÇÃO DE MODELOS
IOS | VIEW MODEL

17. Model ViewModelView
View
Controller
IOS | MVVM

18. ViewModel
View
Controller
4.5%
R$ 5,00
TDCBeer
Pale Ale
Model

19. swift

20. var beerView = BeerView( beerViewModel )

21. var beerView = BeerView( beerViewModel )
var beerViewController = BeerViewController()
beerViewController.beerView = beerView

22. var beerViewController = BeerViewController( beerViewModel)

23. Model ViewModelView
View
Controller
IOS | MVVM

24. ViewModel
View
Controller
beerViewModel.quantity = 5
imageView.image = beerViewModel.image
beerViewModel.quantity = textField.text
beerViewModel.image { image in
imageView.image = image
}
IOS | COMUNICAÇÃO

25. DELEGATE
KVO
BINDING
THIRD PARTY

26. beerViewModel.addObserver(self,
forKeyPath: "userImage",
options: .New,
context: &imageContext)
BINDING | KVO

27. beerViewModel.addObserver(self,
forKeyPath: "userImage",
options: .New,
context: &imageContext)
deinit {
beerViewModel.removeObserver(self, forKeyPath: "userImage")
}
BINDING | KVO

28. override func observeValueForKeyPath(keyPath: String,
ofObject object: AnyObject,
change: [NSObject: AnyObject],
context: UnsafeMutablePointer<Void>) {
if context == &imageContext {
self.imageView.image= change[NSKeyValueChangeNewKey]
}
}
BINDING | KVO

29. override func observeValueForKeyPath(keyPath: String,
ofObject object: AnyObject,
change: [NSObject: AnyObject],
context: UnsafeMutablePointer<Void>) {
if context == &imageContext {
self.imageView.image= change[NSKeyValueChangeNewKey]
} else if context == &quantityContext {
self.textField.text = change[NSKeyValueChangeNewKey]
}
}
BINDING | KVO

30. override func observeValueForKeyPath(keyPath: String,
ofObject object: AnyObject,
change: [NSObject: AnyObject],
context: UnsafeMutablePointer<Void>) {
if context == &imageContext {
self.imageView.image= change[NSKeyValueChangeNewKey]
} else if context == &quantityContext {
self.textField.text = change[NSKeyValueChangeNewKey]
}
}
BINDING | KVO
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}
else if context == &context {
self.variable = change[NSKeyValueChangeNewKey]
}

32. DELEGATE
KVO
BINDING
THIRD PARTY

33. protocol BeerViewModelDelegate {
func viewModelDidUpdate()
}
BINDING | DELEGATE

34. protocol BeerViewModelDelegate {
func viewModelDidUpdate()
}
class BeerViewModel {
var delegate: BeerViewModelDelegate?
//Quando atualizar
delegate!.viewModelDidUpdate()
}
BINDING | DELEGATE

35. class ViewController {
beerViewModel.delegate = self
func viewModelDidUpdate() {
imageView.image = beerViewModel.userImage
}
}
BINDING | DELEGATE

36. DELEGATE
KVO
BINDING
THIRD PARTY

37. Swift
ReactiveCocoa4
BINDING | THIRD PARTY

39. <~<~

40. errorLabel.rac_text <~ userViewModel.errorMessage
errorLabel.rac_hidden <~ userViewModel.usernameCorrect
UserViewController

41. errorLabel.rac_text <~ userViewModel.errorMessage
errorLabel.rac_hidden <~ userViewModel.usernameCorrect
enterButton.rac_hidden <~ userViewModel.hiddenButton
UserViewController

42. imageView.image <~ beerViewModel
.userImage
BeerViewController

43. UNIT TEST

44. let userViewModel: UserViewModel = UserViewModel()
IOS | UNIT TEST

45. let userViewModel: UserViewModel = UserViewModel()
userViewModel.username.value = "Skywalker"
IOS | UNIT TEST

46. let userViewModel: UserViewModel = UserViewModel()
userViewModel.username.value = "Skywalker"
userViewModel.saveUser().on(
completed: {
// success
}, failed: { error in
// fail
}).start()
IOS | UNIT TEST

47. userViewModel.saveUser().on(
completed: {
// success
}, failed: { error in
// fail
}).start()
IOS | UNIT TEST

48. userViewModel.username.value = "Darth Vader"
userViewModel.saveUser().on(
completed: {
// fail
}, failed: { error in
// success
}).start()
IOS | UNIT TEST

50. MVVM ANDROID

51. MVVM?

52. MVVM Data Binding!

53. MVVM Data Binding!
Android?

54. MVVM Data Binding!
Android?
SIM!

55. ANDROID DATA BINDING LIBRARY

56. ATIVANDO DATA BINDING
android {
....
dataBinding {
enabled = true
}
}

57. ANTES…
<EditText
android:id="@+id/beer_count_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:inputType="numberDecimal"
android:singleLine="true" />
EditText beerCountEditText = (EditText)findViewById(R.id.beer_count_edit_text);
beerCountEditText.setText(beerViewModel.getBeerCount());

58. USANDO DATA BINDING LIBRARY
<data>
<variable
name="beerViewModel"
type="com.arctouch.beerbind.beer.BeerCountViewModel" />
</data>
<EditText
android:id="@+id/beer_count_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:inputType="numberDecimal"
android:singleLine="true" />

59. USANDO DATA BINDING LIBRARY
<EditText
android:id="@+id/beer_count_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:inputType="numberDecimal"
android:singleLine="true"
android:text="@{beerViewModel.beerCountText}" />
<data>
<variable
name="beerViewModel"
type="com.arctouch.beerbind.beer.BeerCountViewModel" />
</data>

60. TWO-WAY BINDING
<EditText
android:id="@+id/beer_count_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:inputType="numberDecimal"
android:singleLine="true"
android:text="@{beerViewModel.beerCountText}" />
<data>
<variable
name="beerViewModel"
type="com.arctouch.beerbind.beer.BeerCountViewModel" />
</data>

61. TWO-WAY BINDING
<EditText
android:id="@+id/beer_count_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:inputType="numberDecimal"
android:singleLine="true"
android:text="@{beerViewModel.beerCountText}"
app:addTextChangedListener="@{beerViewModel.beerCountTextWatcher}" />
<data>
<variable
name="beerViewModel"
type="com.arctouch.beerbind.beer.BeerCountViewModel" />
</data>

62. TWO-WAY BINDING
<EditText
android:id="@+id/beer_count_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="end"
android:inputType="numberDecimal"
android:singleLine="true"
android:text="@{beerViewModel.beerCountText}"
app:addTextChangedListener="@{beerViewModel.beerCountTextWatcher}" />
public TextWatcher getBeerCountTextWatcher() {
return new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
setBeerCount(Integer.parseInt(s.toString()));
}
};
}

63. ACTIVITY
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActivityBeerBinding binding =
DataBindingUtil.setContentView(this, R.layout.activity_beer);
BeerCountViewModel beerViewModel =
new BeerCountViewModel(new BeerCountModel());
binding.setBeerViewModel(beerViewModel);
}

64. ACTIVITY
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
ActivityBeerBinding binding =
DataBindingUtil.setContentView(this, R.layout.activity_beer);
BeerCountViewModel beerViewModel =
new BeerCountViewModel(new BeerCountModel());
binding.setBeerViewModel(beerViewModel);
}

65. FRAGMENT
@Override
public View onCreateView(…){
ActivityBeerBinding binding =
DataBindingUtil.inflate(inflater, R.layout.activity_beer,
container, false);
BeerCountViewModel viewModel =
new BeerCountViewModel(new BeerCountModel());
binding.setBeerViewModel(viewModel);
return binding.getRoot();
}

66. FRAGMENT
@Override
public View onCreateView(…){
ActivityBeerBinding binding =
DataBindingUtil.inflate(inflater, R.layout.activity_beer,
container, false);
BeerCountViewModel viewModel =
new BeerCountViewModel(new BeerCountModel());
binding.setBeerViewModel(viewModel);
return binding.getRoot();
}

67. VIEW MODEL
public class BeerCountViewModel extends BaseObservable {
private int beerCount;
@Bindable
public int getBeerCount() {
return beerCount;
}
public void setBeerCount(int beerCount) {
this.beerCountModel.setBeerCount(beerCount);
notifyPropertyChanged(BR.beerCount);
}
}

68. VIEW MODEL
extends BaseObservable {
t beerCount) {
BeerCount(beerCount);
R.beerCount);
• Classe base
• Implementa a interface
Observable
• Usado pra notificar a
mudanças para a view

69. VIEW MODEL
public class BeerCountViewModel extends BaseObservable {
private int beerCount;
@Bindable
public int getBeerCount() {
return beerCount;
}
public void setBeerCount(int beerCount) {
this.beerCountModel.setBeerCount(beerCount);
notifyPropertyChanged(BR.beerCount);
}
}

70. VIEW MODEL
ublic class BeerCountViewModel extends BaseObservable {
private int beerCount;
@Bindable
public int getBeerCount() {
return beerCount;
}
public void setBeerCount(int beerCount) {
this.beerCountModel.setBeerCount(beerCount);
notifyPropertyChanged(BR.beerCount);
}

71. VIEW MODEL
ublic class BeerCountViewModel extends BaseObservable {
private int beerCount;
@Bindable
public int getBeerCount() {
return beerCount;
}
public void setBeerCount(int beerCount) {
this.beerCountModel.setBeerCount(beerCount);
notifyPropertyChanged(BR.beerCount);
}

72. CUSTOM SETTER
@BindingAdapter("app:imageUrl")
public static void loadImage(ImageView imageView, String url) {
Glide.with(imageView.getContext())
.load(url)
.into(imageView);
}
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginTop="@dimen/default_margin"
app:imageUrl="@{beerViewModel.imageUrl}" />

73. ANDROID DATA BINDING
• One-way binding:
• Two-way binding:
• Custom setters:

74. ANDROID DATA BINDING
• One-way binding:
• Two-way binding:
• Custom setters:

75. ANDROID DATA BINDING
• One-way binding:
• Two-way binding:
• Custom setters:

76. ANDROID DATA BINDING
• One-way binding:
• Two-way binding:
• Custom setters:

77. MVVM XAMARIN

78. No .NET desde 2008

80. XAMARIN | MVVM
VIEW (XAML)
VIEWMODEL
MODEL
Command BindingContext / Binding
Read/Update
INotifyPropertyChanged
BindableObject

81. using System;
namespace System.ComponentModel
{
public interface INotifyPropertyChanged
{
//
// Events
//
event PropertyChangedEventHandler PropertyChanged;
}
}
XAMARIN | Data Binding

82. XAMARIN | Data Binding
public abstract class BaseViewModel : INotifyPropertyChanged
{
public event PropertyChangedEventHandler PropertyChanged;
protected void OnPropertyChanged([CallerMemberName] string propertyName = null)
{
PropertyChanged?.Invoke(this, new PropertyChangedEventArgs(propertyName));
}
}

83. XAMARIN | Data Binding
private string errorMessage;
public string ErrorMessage
{
get { return this.errorMessage; }
set
{
this.errorMessage = value;
OnPropertyChanged();
}
}

84. XAMARIN | Data Binding - Genérico
protected bool SetPropertyAndNotify<T>(ref T storage, T value,
[CallerMemberName] string propertyName = null)
{
if (Equals(storage, value))
{
return false;
}
storage = value;
OnPropertyChanged(propertyName);
return true;
}
this.myField = value;

85. XAMARIN | Data Binding
private string errorMessage;
public string ErrorMessage
{
get { return this.errorMessage; }
set
{
this.errorMessage = value;
OnPropertyChanged();
}
}

86. XAMARIN | Data Binding
private string errorMessage;
public string ErrorMessage
{
get { return this.errorMessage; }
set { SetPropertyAndNotify(ref this.errorMessage, value); }
}

87. XAMARIN | Data Binding
<Label
Text="{Binding ErrorMessage}"
TextColor="White"
FontSize="17"
HorizontalTextAlignment="Center"
FontFamily="HelveticaNeue-CondensedBold"
HorizontalOptions="Center"
HeightRequest="20"/>

88. <ContentPage.BindingContext>
<custom:UserViewModel />
</ContentPage.BindingContext>
UserView.xaml

89. <StackLayout>
<Label Text="{Binding ErrorMessage}” />
<Entry Placeholder="Digite seu nome aqui"
Text="{Binding Username}"/>
<Button Text="ENTER"
Command="{Binding EnterCommand}”
IsVisible="{Binding IsUsernameValid}”/>
</StackLayout>
UserView.xaml

90. public class UserViewModel : BaseViewModel
public string Username
{
get { return this.username; }
set
{
SetPropertyAndNotify(ref this.username, value);
ValidateUsername();
}
}
UserViewModel
Apenas validação simples!
Sem longos processamentos e/ou
chamadas assíncronas.
Ex:. APIs ou banco de dados

91. <Slider Maximum=“20" Minimum="0"
Value="{Binding DrankBeersCount, Mode=TwoWay}"/>
BeerView.xaml

92. public int DrankBeersCount
{
get
{
return this.drankBeersCount;
}
set
{
SetPropertyAndNotify(ref this.drankBeersCount, value);
OnPropertyChanged(nameof(DrunkenPersonImage));
}
}
public string DrunkenPersonImage
{
get { return GetBeerImage(DrankBeersCount); }
}
BeerViewModel

93. COMPARAÇÃO MVVM
IOS/ANDROID/XAMARIN

94. Suporte MVVM | Comparação entre plataformas
Anunciado em 2015/Android M +
No .NET desde 2008
Delegate / KVO / ReactiveCocoa

95. iOS: https://github.com/gfendres/ractdc2016
Android: https://github.com/thiagocechetto/BeerBind
Xamarin: https://github.com/oberdanf/tdc2016mvvm

96. OBRIGADO.
Big Brains Wanted
Join our team! Go to arctouch.com/brjobs
guilherme.endres@arctouch.com