Arquitectura de Apps XamarinJavier Suárez Ruiz

Javier SuárezMicrosoft MVP Windows Platform Development

• Blog: http://geeks.ms/blogs/jsuarez

• Email: javiersuarezruiz@hotmail.com

• Twitter: @jsuarezruiz

¿Qué vamos a ver?

1.Arquitectura de proyectos móviles en cada

plataforma.

2.El patron MVVM.

3. Introducción a MVVMCross.

4.Utilizando MVVMCross.

5.Preguntas y Respuestas.

Comparativa de plataformas móviles. Nativo

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAML

MVC MVC MVVMPatrón diseño

Primer proyecto con Xamarin!

Comparativa de plataformas móviles. Nativo

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAML

MVC MVC MVVMPatrón diseño

Comparativa de plataformas móviles. Xamarin

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Visual Studio Visual Studio Visual Studio

C# C# C#

Storyboard AXML XAML

MVC MVC MVVM

Patrón diseño

Comparativa de plataformas móviles. Xamarin

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Visual Studio Visual Studio Visual Studio

C# C# C#

Storyboard AXML XAML

MVVM MVVM MVVM

Patrón diseño

Nuestros objetivos. Buenas prácticas

1. Reutilizar código

2. Utilizar MVVM

3. Utilizar inyección de dependencias para resolver servicios y viewmodels

4. Dividir responsabilidades, dividir código

MVVM

View

View

Mo

del

Mo

del

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewV

iew

View

Mo

del

View

Mo

del

Mo

del

Mo

del

Cross PlatformEspecífico de la Plataforma

Pero… ¿Porque MVVM?

Mayor facilidad para mantener, extender y compartir el código.

Más facilidad a la hora de colaborar.

Testing.

Más fácil de diseñar.

MvvmCross

•Cross Platform MVVM Development Framework•Gratuito, Open Source•Soporta

•WP 7, 8, 8.1•WPF•WinRT•Xamarin.Android•Xamarin.iOS•Xamarin.Mac

•AKA Mvx

Portable Class Library

•1 Librería

•Multiples Platformas

•Incluyendo:

•Xamarin.Android

•Xamarin.iOS

Características de una Portable Class Library

•Código compartido centralizado•Se depura igual que si el código

estuviese en un Proyecto específico.

•Compartir Proyecto/Assembly

•NuGet

MVVMCross & PCL

View

View

Mo

de

l

Mo

del

PropiedadesComandos

Notifica cambios

C#

Model

ViewV

iew

View

Mo

de

lV

iewM

od

el

Mo

de

lM

od

el

Cross Platform -PCLEspecífico dePlataforma

INotifyPropertyChanged

Propriedad típica en la ViewModel

Binding OneWay

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

UI Syntax

Two Way Binding

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

UI Syntax

Nuestra primera App multiplataforma con Xamarin y MVVM Cross

Value Conversion

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Age

24

“Age” Conversion

IMvxValueConverter

AgeValueConverter

UI Syntax

UI Syntax

Trabajando con Converters

MyViewModel

Necesita Localización

Necesita SQL

Necesita CalculadoraMy TaxCalculator

Windows Phone Location

Inversión de Control

Windows Phone SQL

El contenedor

MyViewModel

Necesita Localización

Necesita SQL

Necesita CalculatorMy TaxCalculator

iOS Location

Inversión de Control

iOS SQL

El contenedor

Mvx.Register<T>

• RegisterSingleton

• Lazy - RegisterSingleton

• RegisterType

Registro automático

Mvx.Resolve<T>

• Resolve

• CanResolve

• TryResolve

Mvx Construction

• Resolución en el constructor

• IoCConstruct

Nuestro primer servicio y comenzamos a utilizer Ioc

Acciones (Comandos)

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

AddCommand

ICommand

Typical ViewModel Command

UI Syntax

Llega el turno de realizar

acciones!

Colecciones

PeopleViewModel

HackersList<PersonViewModel>

Greg

Jon

Daniel

Cool Hackers

Jon@redth

Greg@gshackles

Daniel@dsplaisted

Tomasz

Tomasz@cheesebar

INotifyCollectionChanged

ObservableCollection

ViewModel Collection Property

UI Syntax

UI Syntax

UI Syntax

UI Syntax

Seguimos avanzando, trabajando con colecciones de datos y controles listado

Navegación

Uso de parámetrosShowViewModel<DetailViewModel>(new DetailParameters() { Index = 2 });

public void Init(DetailParameters parameters)

{

// use the parameters here

}

Go Back

Navegación entre páginas

Plugins• Forma rápida y sencilla

de añadir funcionalidad

específica de cada

plataforma.

• Usamos NuGet o

NinjaCoder para

añadirlos.

• Consumimos los plugins

utilizando inyección de

dependencias o Service

Locator.

• Disponibles: Location,

PhoneCall, Email, Sqlite,

etc.

Añadiendo y utilizando plugins

Preguntas y respuestas.

P&R¿Dudas?

Javier SuárezMicrosoft MVP Windows Platform Development

• Blog: http://geeks.ms/blogs/jsuarez

• Email: javiersuarezruiz@hotmail.com

• Twitter: @jsuarezruiz

GRACIAS

Ven a conocer nuestras oficinas:Avenida de Manoteras 38 – Oficina C31128050 Madrid

Con Bravent tendrás proyectos cercanos. Conseguirás triunfos globales

Contacta con nosotros:

Llámanos:91 240 4785

Envíanos un e-mail:info@bravent.netbravent@bravent.net

Visita nuestra web:www.bravent.net

Síguenos en twitter:@bravent