2. Luis Beltrán
• Investigador/estudiante en Tomas Bata
University in Zlín, República Checa
• Docente en Tecnologico Nacional de
Mexico en Celaya, Mexico
• Microsoft MVP en IA y Tecnologías de
Desarrollador
luis@luisbeltran.mx
@darkicebeam
4. Enfoque tradicional de desarrollo (SILO)
Tradicionalmente, las aplicaciones tienen bases de código separadas escritas en su
lenguaje nativo, construidas usando herramientas nativas e incorporando
características específicas de plataforma
5. Ventajas
Las aplicaciones tradicionales siguen las
guías de experiencia de usuario de cada
plataforma: estilo de navegación, diseño de
interfaces, configuraciones, etc.
Los usuarios saben qué esperar y cómo
utilizar una app de forma natural.
6. Desventajas
El desarrollo tradicional de apps toma más tiempo, requiere múltiples equipos,
múltiples entornos de desarrollo y no se puede compartir código.
7. Tecnologías cross-platform
“cross-platform”: Tecnología que permite escribir
lógica de negocios y crear interfaces de usuario bajo
un framework de trabajo común para construir
aplicaciones para iOS, Android y posiblemente
Windows.
“Write once, run anywhere”
9. Recomendaciones
• Elige la tecnología cross-platform que más se ajuste a tus necesidades, stack, conocimientos,
reutilización de código.
• No elijas cross-platform si el equipo de desarrollo (colaboradores) no tiene los
conocimientos requeridos.
• Entender que cross-platform no es ideal para todos los escenarios.
• Pon atención especial a tu proveedor de servicios.
• Experimenta cada plataforma de primera mano.
10. Consideraciones
Cross-platform NO sustituye el aprendizaje de los patrones de cada plataforma
Cross-platform NO es la solución para todo.
Ciertos aspectos deben seguirse gestionando:
Acceso offline
Permisos
Almacenamiento
11. .NET: La plataforma para construir lo que necesites
Desktop Web Cloud Mobile Gaming IoT AI
.NET
12. Xamarin
Una plataforma de aplicaciones open source de Microsoft para construir apps
iOS, Android, macOS, Windows, watchOS, & tvOS
modernas y de alto rendimiento con .NET.
13. Xamarin.Forms
Un framework mobile para UI
open source de Microsoft para
construir apps iOS, Android & Windows con .NET a partir de
una base única de código compartido.
14. Xamarin + Xamarin.Forms
Xamarin.Forms
Enfoque Tradicional
iOS C# UI Windows C# UI
Android C# UI
Lógica de C# (Shared) Lógica de C# (Shared)
Xamarin.Forms
Base de código compartido • Acceso 100% a APIs nativos • Alto
desempeño
15. Xamarin.iOS
MapKit UIKit SiriKit ARKit CoreML
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml
C#
Todo lo que puedes hacer en Swift y
Objective-C para iOS, lo puedes
programar con Xamarin usando C#
API cubierto al 100% con el beneficio adicional de
las APIs de .NET
16. Xamarin.Android
Fingerprint Bluetooth Picture-in-Picture Geolocation NFC
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml
C#
Todo lo que puedes hacer en Android y
Kotlin para Android, lo puedes
programar con Xamarin usando C#
API cubierto al 100% con el beneficio adicional de
las APIs de .NET
17. APIs de Windows
Windows.Media Windows.Networking Windows.Storage Windows.Foundation Windows.Devices
System.Data System.Windows System.Numerics System.Core System.ServiceModel
System.Net System System.IO System.Linq System.Xml
C#
Las apps de Windows son construidas en
C# usando las APIs nativas
18. Xamarin.Forms
Xamarin.Forms permite compartir todavía más
elementos que en Xamarin Tradicional, dado
que existe una definición de UI común.
Esto significa que puedes construir interfaces
de usuario nativas para Android, iOS y
Windows a partir de una base única de código
compartido.
22. Requisitos de instalación
Xamarin.iOS
• Equipo Mac (o acceso remoto)
• Xcode
• SDK de iOS
Xamarin.Android
• Equipo Windows 10 o Mac
• SDK de Android
Hardware
• 8 GB de RAM (mínimo)
• Soporte a virtualización (en caso de usar emuladores)
• Procesador Core i5 (mínimo)
• Recomendable disco SSD
24. Creando la UI de la app
La Interfaz de Usuario (UI) de la aplicación está definida en términos de
páginas (Pages) y vistas (Views).
Views son los controles
de UI con los que el
usuario interactúa
Page representa una pantalla única
que se muestra en la aplicación
25. Xamarin.Forms Pages
Page es una clase abstracta utilizada para definir una pantalla única de
contenido.
Content MasterDetail Navigation Tabbed Carousel
30. Image
Permite mostrar una imagen a partir de un nombre de archivo, ruta
URL, ruta física del dispositivo, recurso embebido o stream.
<Image Source="waterfront.jpg" />
32. CollectionView
• CollectionView es una vista flexible y eficaz para
presentar listas de datos que tienen especificaciones
de diseño diferentes.
• Un CollectionView se rellena con datos estableciendo
el valor de la propiedad ItemsSource con cualquier
colección que implemente la interfaz IEnumerable.
• La apariencia de cada elemento de la lista se define
asignando un DataTemplate al ItemTemplate.
34. Acomodando la UI mediante Layouts
• Los Layouts en Xamarin.Forms son contenedores que
permiten dar una estructura a la UI (tamaño y
posición).
• Los Layouts admiten uno o más Views, conocidos como
“hijos”.
• En lugar de especificar posiciones con coordenadas
(pixeles, dips, etc.), utilizas los contenedores de layout
para controlar cómo se posicionan los views con
respecto a los demás.
• Esta estrategia promueve un diseño adaptable, que no
se ve afectado por dimensiones y resoluciones.
35.
36. Grid
Grid es un panel de diseño utilizado para crear renglones y columnas,
donde los elementos se posicionan en celdas (indicando la columna y
renglón específico), además de que pueden abarcar más de una celda
(span).
40. Patrones de separación de presentación
Son patrones y reglas utilizadas para ayudar a los desarrolladores a
dividir su código en capas lógicas, diseñadas específicamente para
separar el código de la interfaz de usuario del código de lógica de
negocios.
41. Patrones comunes de separación de
presentación
Elegir un patrón de presentación para tu aplicación depende de los
APIs disponibles para la plataforma de desarrollo y la preferencia
personal del desarrollador.
42. MVVM
MVVM es una variante de MVC que usa una
infraestructura de enlace de datos (data
binding) para conectar los controladores (aquí
llamados ViewModels) a las vistas.
Cada capa únicamente debería tener
conocimiento directo acerca de la capa
debjo de ella.
44. View
La Vista presenta la información al usuario por medio de una interfaz
específica de plataforma.
45. ViewModel
El ViewModel proporciona una representación centrada en la vista de
los datos a mostrar.
Expone propiedades
enlazables e
implementa
notificaciones en los
cambios de las
propiedades
Por lo general hay un
Model por cada
ViewModel (relación
1:1)
46. Conectando View y ViewModel
Asignamos una instancia de ViewModel en el BindingContext de la
View para conectar las propiedades expuestas por el ViewModel y que
estén disponibles para ser usadas en la View.
<ContentPage ... xmlns:local="clr-
namespace:DemoApp">
<ContentPage.BindingContext>
<local:MainViewModel />
</ContentPage.BindingContext>
...
</ContentPage>
47. Para enlazar una propiedad del ViewModel en la View, utilizamos Data
Binding