Crear Apps Multiplataforma compartiendo la mayor cantidad con Xamarin

CREANDO APPS COMPARTIENDO

AL MÁXIMOEstructura, trucos y otros aspectos de interes con el objetivo de compartir la

mayor cantidad de código possible entre plataformas.

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Javier SuárezXAML Team Lead BraventMicrosoft MVP Windows Platform Development

• Blog: http://geeks.ms/blogs/jsuarez• Email: [email protected]• Twitter: @jsuarezruiz

http://geeks.ms/blogs/jsuarez


mailto:[email protected]


.

.

EL PROBLEMA

Creas la misma Appvarias veces


.

.

EL ENFOQUE “ESCRIBE UNA VEZ” PARA TODO

Mínimo DenominadorComún


.

.

EL ENFOQUE DE XAMARIN

Nativo compartiendocódigo


.

.

DEMOPrimera App Xamarin


.

.

COMPARATIVA DE PLATAFORMAS MÓVILES NATIVOS

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAMLMVC MVC MVVMPatrón diseño


.

.

COMPARATIVA DE PLATAFORMAS MÓVILES XAMARIN

IDE

Lenguaje

Vistas


Visual Studio Visual Studio Visual Studio

C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVMPatrón diseño


.

.

MVVM

View

ViewM

odel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewM

odelView

Model

ModelM

odel

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

ViewM

odel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewM

odelView

Model

ModelM

odel

Cross Platform -PCLEspecífico de Plataforma


.

.

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


.

.

Value Conversion

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Age

24

“Age” Conversion


.

.

IMvxValueConverter


.

.

AgeValueConverter


.

.

UI Syntax


.

.

UI Syntax


.

.

Acciones (Comandos)

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

AddCommand


.

.

ICommand


.

.

ViewModel Command


.

.

UI Syntax


.

.

DEMOUtilizando MVVMCross


.

.

Xamarin + Xamarin.FormsCon Xamarin.Forms:

Se comparte más, controles

compartidos

El enfoque tradicional de Xamarin

Shared UI Code


.

.

Xamarin + Xamarin.Forms

• Permite crear facilmente y con rapidez interfaces de usuario nativas compartidas

• Los elementos de Xamarin.Forms son mapeados a elementos nativos y behaviors propios de cada plataforma

• Podemos mezclar Xamarin.Forms con APIs nativas


.

.

Plataformas soportadas por Xamarin.FormsSoporta:

• Android 4.0+

• iOS 6.1+

• Windows Phone 8.0 (Silverlight) & Windows Phone 8.1 (WinRT)


.

.

Que incluye 40+ tipos de páginas, Layouts,

y controles Se puede utilizer code behind

o XAML

Two-way Data Binding

Navegación

API de animaciones

Servicio de dependencias

Messaging Center


.

.

Páginas

Content MasterDetail Navigation Tabbed Carousel


.

.

Layouts

Stack Absolute Relative Grid ContentView

ScrollView Frame


.

.

Controles

ActivityIndicator

BoxView Button DatePicker Editor

Entry Image Label ListView Map

OpenGLView Picker ProgressBar SearchBar Slider

Stepper TableView TimePicker WebView EntryCell

ImageCell SwitchCell TextCell ViewCell


.

.

Arquitectura de Apps con Xamarin.Forms

View

ViewM

odel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewM

odelView

Model

ModelM

odel

Cross Platform –PCL o Shared


.

.

COMPARATIVA DE PLATAFORMAS MÓVILES NATIVO

IDE

Lenguaje

Vistas


Xcode Android Studio

Visual Studio

ObjectiveC o Swift

Java C#

Storyboard AXML XAMLMVC MVC MVVMPatrón diseño


.

.

DEMOXamarin.Forms utilizando MVVM


.

.¿Qué podemos compartir con este planteamiento?


.

.


.

.

El enfoque de Xamarin

Con Xamarin.Forms:

Se comparte más, controles

compartidos

El enfoque tradicional de Xamarin

Shared UI Code


.

.


.

.

TÉCNICAS DE REUTILIZACIÓN DE CÓDIGO

• Copiar y pegar.• Mismo código

duplicado.• Difícil de mantener.• Evitar en lo posible.

Ctrl-C, Ctrl-V

• Modelo• VistaModelo• Vista

MVVM

• Enlaces simbólicos.

• Depende del lenguaje.

Enlazado de ficheros

• Permite mantener código específico de cada plataforma.

• Por contra, multiplica las ramas a mantener.

Compilación Condicional

• Código manejado común a las plataformas.

Portable Class Library


.

.

MVVM EN APLICACIONES UNIVERSALES

Vista VistaModelo

Modelo

Modelo

MainView.Xaml

MainViewModel.cs

Data Binding

Comandos

Interfaz de Usuario Lógica de Negocio

Lógica de Negocio

Lógica de Presentación


.

.¿Y todo esto con una App “real”?


.

.


.

.Utilizando Xamarin Classic


.

.


IDE

Lenguaje

Vistas



C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVMPatrón diseño


.

.

MVVM

View

ViewM

odel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewM

odelView

Model

ModelM

odel

Cross PlatformEspecífico de la Plataforma


.

.

DEMONuestra App utilizando MVVMCross


.

.Utilizando Xamarin.Forms


.

.


IDE

Lenguaje

Vistas



C# C# C#

XAML XAML XAMLMVVM MVVM MVVMPatrón diseño


.

.

ARQUITECTURA DE APPS CON XAMARIN.FORMS

View

ViewM

odel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewM

odelView

Model

ModelM

odel

Cross Platform –PCL o Shared


.

.

DEMOAhora utilizando Xamarin.Forms


.

.

UTILIZANDO NATIVO

Web Services

Web Services Backend C#

App

Services Services Services

View View View

ViewModel Controller Controller

App App

Web Services Backend C# Web Services Backend C#


.

.

UTILIZANDO XAMARIN CLASSIC

Web Services


App

Services

Services Services Services

Model

View Model

View View View


.

.

UTILIZANDO XAMARIN.FORMS

Web Services


App

Services

Services (Implementation) Services (Implementation) Services (Implementation)

Model

View Model

View (Custom Render) View (Custom Render) View (Custom Render)

View


.

.

CONCLUSIONES RÁPIDAS

1. Siendo ordenado y siguiendo una serie de patrones podemos compartir entre el 65% y el 90% del código de una App móvil multiplataforma.

2. Xamarin.Forms no es siempre la solución más ideal dependiendo de las características del Proyecto.


.

.

¿PREGUNTAS y RESPUESTAS?Dudas?

P&R


.

.

GRACIAS a TODOSPor vuestro tiempo!

Javier SuárezMicrosoft MVP Windows Platform Development

• Blog: http://geeks.ms/blogs/jsuarez• Email: [email protected]• Twitter: @jsuarezruiz



mailto:[email protected]


.

.

CREANDO APPS COMPARTIENDO AL MÁXIMOEstructura, trucos y otros aspectos de interes con el objetivo de compartir la mayor cantidad de código possible entre plataformas.

Crear Apps Multiplataforma compartiendo la mayor cantidad con Xamarin

Documents

Crear Apps Multiplataforma compartiendo la mayor cantidad con Xamarin