Construyendo Aplicaciones Multiplataforma con Xamarin: Perspectiva de un Desarrollador Android
5 de June del 2017
Escribir código una vez y utilizarlo en múltiples plataformas ha sido un sueño para muchos desarrolladores software. Aunque esto ha sido posible desde hace un tiempo, siempre ponía en riesgo el mantenimiento, facilidad de prueba o peor, una mala experiencia de usuario.
Desarrollar aplicaciones móviles usando el nativo SDK es, probablemente, el punto de partida para muchos desarrolladores quienes tienen sus raíces en el reino de desarrollo de aplicaciones para escritorio. Programar idiomas sería una barrera para algunos: Si alguien tuviera experiencia en el desarrollo de escritorio Java o aplicaciones back-end, pasar a Android podría ser más fácil que comenzar con Objective-C desde cero para iOS.
Siempre tuve mis dudas con el desarrollo de aplicaciones multiplataforma. Los frameworks basados en JavaScript como Sencha, Cordova, Titanium, etc. nunca han sido buenas opciones cuando el desempeño es importante. La falta de API y una experiencia de usuario particular era algo clave con estos frameworks.
Pero, descubrí Xamarin.
En este artículo, aprenderás cómo puedes usar Xamarin para compartir código en múltiples plataformas sin perjudicar ningún otro aspecto del desarrollo de aplicaciones móviles. El artículo se enfocará, en particular, en Android y iOS pero puedes usar cualquier otra de las plataformas que apoya Xamarin.
¿Qué es Xamarin?
Xamarin es una plataforma de desarrollo que te permite escribir aplicaciones multiplataforma—aunque nativa—para iOS, Android y Windows Phone en C# y .NET.
Xamarin proporciona bindings C# a las API nativas Android y iOS. Esto te da el poder para usar toda la interfaz de usuario nativo, notificaciones, gráficos, animación y otras características de teléfono— y todas usan C#.
Xamarin alcanza cada lanzamiento nuevo de Android y iOS, con un lanzamiento que incluye bindings para sus nuevas API.
El puerto de .NET de Xamarin incluye características como tipos de data, genéricos, colección de papelera de reciclaje, language-integrated query (LINQ), patrón de programación asincrónica, delegación y un subconjunto de Windows Communication Foundation (WCF). Las bibliotecas son manejadas con un linger para incluir sólo los componentes referidos.
Xamarin.Forms es una capa que se encuentra sobre las otros bindings UI y la API Windows Phone, la cual proporciona una biblioteca de interfaz de usuario completamente multiplataforma.
Escribir Aplicaciones Multiplataforma
Para poder escribir aplicaciones multiplataforma con Xamarin, los desarrolladores necesitan escoger uno de los dos tipos de proyecto disponibles:
- Portable Class Library (PCL)
- Proyecto Compartido
El PCL te permite escribir código que se puede compartir entre plataformas múltiples pero con una limitante. Dado que no todas las API .NET están disponibles en todas las plataformas, con un proyecto PLC, lo estarás limitando a ser ejecutado solo en plataformas para las que está dirigido.
La tabla de abajo muestra cuales API están disponibles en qué plataformas:
| Feature | .NET Framework | Windows Store Apps | Silverlight | Windows Phone | Xamarin |
|---|---|---|---|---|---|
| Core | Y | Y | Y | Y | Y |
| LINQ | Y | Y | Y | Y | Y |
| IQueryable | Y | Y | Y | 7.5+ | Y |
| Serialization | Y | Y | Y | Y | Y |
| Data Annotations | 4.0.3+ | Y | Y | Y | Y |
Durante el proceso de construcción, un PCL se compila en distintos DLL y se carga por Mono durante la ejecución. Una implementación diferente pero de la misma interfaz se puede proporcionar durante la ejecución.
Por otra parte, los proyectos compartidos te dan más control, porque te permiten escribir código de plataforma específica para cada plataforma que quieras apoyar. El código en un proyecto compartido puede contener directivas de conversión de datos que activarán o desactivarán secciones de código, dependiendo de qué proyecto de aplicación está usando el código.
A diferencia de un PCL, un proyecto compartido no produce ningún DLL. El código está incluido directamente en el proyecto final.
Dar Estructura a tu Código Multiplataforma con MvvmCross
Un código reusable puede ayudar a ahorrar dinero y tiempo a los equipos de desarrollo. Sin embargo, un código bien estructurado le hace la vida más fácil a los desarrolladores. Nadie aprecia un código bien escrito y libre de bugs como los desarrolladores.
Xamarin solo proporciona un mecanismo el cual hace más fácil escribir código reusable multiplataforma.
Los desarrolladores móviles están familiarizados con escenarios donde tienen que escribir la misma lógica dos veces o más para poder apoyar iOS, Android y otras plataformas. Pero con Xamarin, como lo expliqué en el capítulo pasado, es fácil reusar un código en otras plataformas, aunque haya sido escrito para una plataforma en particular.
Entonces, ¿en qué momento entra MvvmCross?
MvvmCross, como su nombre lo insinúa, hace posible el uso del patrón MVVM en aplicaciones Xamarin. Viene con varias bibliotecas, APIs y servicios que son muy importantes en el desarrollo de la aplicación multiplataforma.
MvvmCross puede reducir, significativamente, la cantidad de código boilerplate qué habrías escrito (en ocasiones repetidas veces en distintos idiomas) en cualquier otro acercamiento al desarrollo de aplicaciones.
Estructura de una Solución MvvmCross
La comunidad MvvmCross recomienda una manera muy simple y eficiente para estructurar una solución MvvmCross:
<ProjectName>.Core
<ProjectName>.UI.Droid
<ProjectName>.UI.iOS
El proyecto Core en una solución MvvmCross está relacionada al código reusable. El proyecto Core es un proyecto PCL de Xamarin, en el que el enfoque principal es la reusabilidad.
Cualquier código escrito en Core debería ser, en lo posible, agnóstico de plataforma. Sólo debería contener lógica, la cual puede ser reusada en todas las plataformas. El proyecto Core no debe usar las API Android ni iOS, tampoco ingresar nada específico a ninguna plataforma.
La capa lógica de negocio, capa de data y la comunicación back-end, son perfectos candidatos para ser incluidos en el proyecto Core. La navegación a través de vista de jerarquía (actividades, fragmentos, etc.) se conseguirá en el Core.
Antes de continuar, es necesario entender un patrón de diseño arquitectural, lo cual es crucial para entender más sobre MvvmCross y cómo funciona. Como se puede percibir por su nombre, MvvmCross depende, grandemente, del patrón MVVM.
MVVM es un patrón de diseño arquitectural, el cual facilita la separación de la interfaz gráfica de usuario de la lógica de negocio y la data back-end.
¿Cómo se usa este patrón en MvvmCross?
Bueno, dado que queremos alcanzar un alto nivel de reusabilidad de nuestro código, queremos tener lo más posible en nuestro Core, que es un proyecto PLC. Ya que las vistas son la única parte del código que difiere de una plataforma a otra, no las podemos reusar entre plataformas. Esa parte se implementa en los proyectos relacionados a la plataforma.
MvvmCross nos da la habilidad de crear una navegación de aplicación desde Core usando ViewModels.
Ya con lo básico y los detalles técnicos encaminados, empecemos con Xamarin creando nuestro propio proyecto Core MvvmCross:
Crear un Proyecto Core MvvmCross
Abre Xamarin Studio y crea una solución llamada ToptalExampleSolution:
Dado que estamos creando un proyecto Core, es buena idea mantener la convención de dar nombres. Asegúrate de que el sufijo Core sea agregado al nombre del proyecto.
Para poder obtener el apoyo de MvvmCross, se requiere agregar bibliotecas MvvmCross a nuestro proyecto. Para agregar esto podemos usar apoyo incluido para NuGet en Xamarin Studio.
Para agregar una biblioteca, da clic derecho en la carpeta Packages y selecciona la opción Add Packages… .
En el campo de búsqueda, podemos buscar MvvmCross, el cual actuará como filtro y encontrará resultados relacionados a MvvmCross como se muestra abajo:
Al dar clic en el botón Add Package se agregará al proyecto.
Con MvvmCross agregado al proyecto, estamos listos para escribir nuestro código Core.
Vamos a definir nuestro primer ViewModel. Para crear uno, crea una jerarquía de carpetas de la siguiente manera:
Aquí ves de que se trata cada carpeta:
- Modelos: Modelos de dominio que representan el contenido de bienes raíces
- Servicios: Una carpeta que lleva nuestro servicio (lógica de negocio, base de datos, etc.)
- ViewModel: La forma como nos comunicamos con nuestros modelos
Nuestro primer ViewModel se llama FirstViewModel.cs
public class FirstViewModel : MvxViewModel
{
private string _firstName;
private string _lastName;
private string _fullName;
public string FirstName
{
get
{
return _firstName;
}
set
{
_lastName = value;
RaisePropertyChanged();
}
}
public string LastName
{
get
{
return _lastName;
}
set
{
_lastName = value;
RaisePropertyChanged();
}
}
public string FullName
{
get
{
return _fullName;
}
set
{
_fullName = value;
RaisePropertyChanged();
}
}
public IMvxCommand ConcatNameCommand
{
get
{
return new MvxCommand(() =>
{
FullName = $"{FirstName} {LastName}";
});
}
public IMvxCommand NavigateToSecondViewModelCommand
{
get
{
return new MvxCommand(() =>
{
ShowViewModel<SecondViewModel>();
});
}
}
}
Ahora que tenemos nuestro primer ViewModel, podemos crear nuestra primera vista y unir todo.
About the author
Emran Bajrami, Bosnia and Herzegovina
