1. 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.

2. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Javier Suárez
XAML Team Lead Bravent
Microsoft MVP Windows Platform
Development
• Blog: http://geeks.ms/blogs/jsuarez
• Email: javiersuarezruiz@hotmail.com
• Twitter: @jsuarezruiz

3. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
EL PROBLEMA
Creas la misma App
varias veces

4. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
EL ENFOQUE “ESCRIBE UNA
VEZ” PARA TODO
Mínimo Denominador
Común

5. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
EL ENFOQUE DE XAMARIN
Nativo compartiendo
código

6. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
DEMO
Primera App Xamarin

7. COMPARTIR AL MÁXIMO
MOBILE 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 XAML
MVC MVC MVVMPatrón diseño

8. COMPARTIR AL MÁXIMO
MOBILE 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 XAML
MVVM MVVM MVVMPatrón diseño

9. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
MVVM
View
ViewModel
Model
get/set
Propiedades
Comandos
Notifica cambios
C#
Models
View
View
ViewModel
ViewModel
Model
Model
Cross Platform
Específico de
la Plataforma

10. COMPARTIR AL MÁXIMO
MOBILE 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.

11. COMPARTIR AL MÁXIMO
MOBILE 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

12. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
PORTABLE CLASS LIBRARY
•1 Librería
•Multiples Platformas
•Incluyendo:
•Xamarin.Android
•Xamarin.iOS

13. COMPARTIR AL MÁXIMO
MOBILE 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

14. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
MVVMCross & PCL
View
ViewModel
Model
Propiedades
Comandos
Notifica
cambios
C#
Model
View
View
ViewModel
ViewModel
Model
Model
Cross Platform -PCL
Específico de
Plataforma

15. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Binding OneWay
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Date of birth
12/07/1989

16. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
UI Syntax

17. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Two Way Binding
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Date of birth
12/07/1989

18. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
UI Syntax

19. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Value Conversion
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Age
24
“Age” Conversion

20. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
IMvxValueConverter

21. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
AgeValueConverter

22. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
UI Syntax

23. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
UI Syntax

24. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Acciones (Comandos)
PersonViewModel
FirstName
LastName
DateOfBirth
First Name
Jon
Last Name
Doe
Date of birth
12/07/1989
AddCommand

25. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
ICommand

26. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
ViewModel Command

27. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
UI Syntax

28. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
DEMO
Utilizando MVVMCross

29. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Xamarin + Xamarin.Forms
Con Xamarin.Forms:
Se comparte más, controles compartidos
El enfoque tradicional de Xamarin
Shared UI Code

30. COMPARTIR AL MÁXIMO
MOBILE 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

31. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Plataformas soportadas por Xamarin.Forms
Soporta:
• Android 4.0+
• iOS 6.1+
• Windows Phone 8.0
(Silverlight) &
Windows Phone 8.1
(WinRT)

32. COMPARTIR AL MÁXIMO
MOBILE 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

33. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Páginas
Content MasterDetail Navigation Tabbed Carousel

34. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Layouts
Stack Absolute Relative Grid ContentVie
w
ScrollView Frame

35. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Controles
ActivityIndicato
r
BoxView Button DatePicker Editor
Entry Image Label ListView Map
OpenGLView Picker ProgressBar SearchBar Slider
Stepper TableView TimePicker WebView EntryCell
ImageCell SwitchCell TextCell ViewCell

36. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Arquitectura de Apps con Xamarin.Forms
View
ViewModel
Model
Propiedades
Comandos
Notifica
cambios
C#
Model
View
View
ViewModel
ViewModel
Model
Model
Cross Platform –PCL o Shared

37. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
COMPARATIVA DE PLATAFORMAS MÓVILES NATIV
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

38. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
DEMO
Xamarin.Forms utilizando MVVM

39. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
¿Qué podemos compartir
con este planteamiento?

40. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.

41. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
El enfoque de Xamarin
Con Xamarin.Forms:
Se comparte más, controles compartidos
El enfoque tradicional de Xamarin
Shared UI Code

42. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.

43. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
TÉCNICAS DE REUTILIZACIÓN
DE CÓDIGO

44. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
MVVM EN APLICACIONES
UNIVERSALES
Data Binding
Comandos
Interfaz de Usuario Lógica de Negocio
Lógica de Negocio
Lógica de
Presentación

45. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
¿Y todo esto con
una App “real”?

46. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.

47. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Utilizando Xamarin Classic

48. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
COMPARATIVA DE PLATAFORMAS MÓVILES XAMA
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Visual Studio Visual Studio Visual Studio
C# C# C#
Storyboard AXML XAML
MVVM MVVM MVVMPatrón diseño

49. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
MVVM
View
ViewModel
Model
get/set
Propiedades
Comandos
Notifica cambios
C#
Models
View
View
ViewModel
ViewModel
Model
Model
Cross Platform
Específico de
la Plataforma

50. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
DEMO
Nuestra App utilizando MVVMCross

51. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
Utilizando Xamarin.Forms

52. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
COMPARATIVA DE PLATAFORMAS MÓVILES
IDE
Lenguaje
Vistas
iOS Android Windows
Phone
Visual Studio Visual Studio Visual Studio
C# C# C#
XAML XAML XAML
MVVM MVVM MVVMPatrón diseño

53. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
ARQUITECTURA DE APPS CON
XAMARIN.FORMS
View
ViewModel
Model
Propiedades
Comandos
Notifica
cambios
C#
Model
View
View
ViewModel
ViewModel
Model
Model
Cross Platform –PCL o Shared

54. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
DEMO
Ahora utilizando Xamarin.Forms

55. COMPARTIR AL MÁXIMO
MOBILE 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#

56. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
UTILIZANDO XAMARIN CLASSIC
Web Services
Web Services Backend C#
App
Services
Services Services Services
Model
View Model
View View View

57. COMPARTIR AL MÁXIMO
MOBILE 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

58. COMPARTIR AL MÁXIMO
MOBILE 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.

59. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
¿PREGUNTAS y RESPUESTAS?
Dudas?
P&R

60. COMPARTIR AL MÁXIMO
MOBILE DEV DAY
.
.
GRACIAS a TODOS
Por vuestro tiempo!
Javier Suárez
Microsoft MVP Windows Platform Development
• Blog: http://geeks.ms/blogs/jsuarez
• Email: javiersuarezruiz@hotmail.com
• Twitter: @jsuarezruiz

61. COMPARTIR AL MÁXIMO
MOBILE 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.