crear apps multiplataforma compartiendo la mayor cantidad con xamarin

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

Upload: javier-suarez-ruiz

Post on 06-Aug-2015

829 views

Category:

Documents


1 download

TRANSCRIPT

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

EL PROBLEMA

Creas la misma Appvarias veces

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

EL ENFOQUE “ESCRIBE UNA VEZ” PARA TODO

Mínimo DenominadorComún

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

EL ENFOQUE DE XAMARIN

Nativo compartiendocódigo

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

DEMOPrimera App Xamarin

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

COMPARATIVA DE PLATAFORMAS MÓVILES XAMARIN

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Visual Studio Visual Studio Visual Studio

C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVMPatrón diseño

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

MVVM

View

ViewM

odel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewM

odelView

Model

ModelM

odel

Cross PlatformEspecífico de la Plataforma

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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.

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

PORTABLE CLASS LIBRARY

•1 Librería•Multiples Platformas•Incluyendo:• Xamarin.Android• Xamarin.iOS

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

MVVMCross & PCL

View

ViewM

odel

Model

PropiedadesComandos

Notifica cambios

C#

Model

ViewView

ViewM

odelView

Model

ModelM

odel

Cross Platform -PCLEspecífico de Plataforma

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Binding OneWay

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UI Syntax

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Two Way Binding

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UI Syntax

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Value Conversion

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Age

24

“Age” Conversion

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

IMvxValueConverter

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

AgeValueConverter

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UI Syntax

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UI Syntax

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Acciones (Comandos)

PersonViewModel

FirstName

LastName

DateOfBirth

First Name

Jon

Last Name

Doe

Date of birth

12/07/1989

AddCommand

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

ICommand

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

ViewModel Command

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UI Syntax

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

DEMOUtilizando MVVMCross

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Xamarin + Xamarin.FormsCon Xamarin.Forms:

Se comparte más, controles

compartidos

El enfoque tradicional de Xamarin

Shared UI Code

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Plataformas soportadas por Xamarin.FormsSoporta:

• Android 4.0+

• iOS 6.1+

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Páginas

Content MasterDetail Navigation Tabbed Carousel

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

Layouts

Stack Absolute Relative Grid ContentView

ScrollView Frame

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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 XAMLMVC MVC MVVMPatrón diseño

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

DEMOXamarin.Forms utilizando MVVM

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.¿Qué podemos compartir con este planteamiento?

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

El enfoque de Xamarin

Con Xamarin.Forms:

Se comparte más, controles

compartidos

El enfoque tradicional de Xamarin

Shared UI Code

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.Utilizando Xamarin Classic

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

COMPARATIVA DE PLATAFORMAS MÓVILES XAMARIN

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Visual Studio Visual Studio Visual Studio

C# C# C#

Storyboard AXML XAMLMVVM MVVM MVVMPatrón diseño

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

MVVM

View

ViewM

odel

Model

get/set PropiedadesComandos

Notifica cambios

C#

Models

ViewView

ViewM

odelView

Model

ModelM

odel

Cross PlatformEspecífico de la Plataforma

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

DEMONuestra App utilizando MVVMCross

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.Utilizando Xamarin.Forms

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

COMPARATIVA DE PLATAFORMAS MÓVILES XAMARIN

IDE

Lenguaje

Vistas

iOS Android Windows Phone

Visual Studio Visual Studio Visual Studio

C# C# C#

XAML XAML XAMLMVVM MVVM MVVMPatrón diseño

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

DEMOAhora utilizando Xamarin.Forms

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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#

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UTILIZANDO XAMARIN CLASSIC

Web Services

Web Services Backend C#

App

Services

Services Services Services

Model

View Model

View View View

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

UTILIZANDO XAMARIN.FORMS

Web Services

Web Services Backend C#

App

Services

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

Model

View Model

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

View

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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.

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

¿PREGUNTAS y RESPUESTAS?Dudas?

P&R

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

GRACIAS a TODOSPor vuestro tiempo!

Javier SuárezMicrosoft MVP Windows Platform Development

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

COMPARTIR AL MÁXIMOMOBILE DEV DAY

.

.

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.