View
830
Download
1
Category
Tags:
Preview:
Citation preview
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: javiersuarezruiz@hotmail.com• Twitter: @jsuarezruiz
COMPARTIR AL MÁXIMOMOBILE DEV DAY
.
.
EL ENFOQUE “ESCRIBE UNA VEZ” PARA TODO
Mínimo DenominadorComún
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
.
.
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
.
.
Value Conversion
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Age
24
“Age” Conversion
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
.
.
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
.
.
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
.
.
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
.
.
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
.
.
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
.
.
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
.
.
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
.
.
GRACIAS a TODOSPor vuestro tiempo!
Javier SuárezMicrosoft MVP Windows Platform Development
• Blog: http://geeks.ms/blogs/jsuarez• Email: javiersuarezruiz@hotmail.com• Twitter: @jsuarezruiz
Recommended