Probando Xamarin.Forms XAML Hot Reload

Iterar en UI

Si, conozco esa sensación. Hablo de los segundos esperando a desplegar la App de nuevo en un emulador o dispositivo para probar los últimos cambios en UI trabajando con Xamarin.Forms. Realizando la misma tarea varias veces se vuelve en algo que podría/debería ser más eficiente.

En el pasado Xamarin Developer Summit se ha anunciado Xamarin.Forms XAML Hot Reload.

Xamarin.Forms XAML Hot Reload

Llega Xamarin.Forms XAML Hot Reload

El objetivo principal de Hot Reload es permitir ver cambios de XAML al vuelo sin necesidad de compilar y desplegar constantemente. Las características fundamentales son:

Permite ver los cambios de XAML al vuelo una vez desplegada la App en modo depuración.
Funciona en Visual Studio 2019 tanto en Windows como macOS.
Funciona tanto para iOS como Android.
Soporta emuladores como dispositivos físicos.
Soporta plugins, librerías de terceros, SkiaSharp, etc.

¿Cómo funciona?

Actualmente al trabajar iterando interfaces en Xamarin.Forms el ciclo consiste en hacer un cambio en XAML, compilar, desplegar y depurar. Ante cualquier otro cambio, volver a repetir todo el proceso.

XAML Hot Reload llega para ayudar reducir drásticamente los pasos y tiempos necesarios para iterar en UIs. No hace falta hacer nada especial para usar XAML Hot Reload. Sencillamente, compila y despliega tu App como lo harías normalmente y a partir de ese momento solo tienes que hacer cualquier cambio en XAML. Es decir, tampoco es necesario instalar ningun paquete NuGet adicional en la App o realizar cualquier lógica de incialización en la misma.

Esto es así porque XAML Hot Reload usa el depurador y no una conexión de red, asi que funciona con o sin conectividad. Edita XAML y guarda los cambios. Al volver a cargar, se mantendrá el estado de navegación. Si usas el patrón MVVM, el estado de la interfaz de usuario vinculado a la ViewModel permanecerá intacto.

Suena genial, ¿verdad?. Veamoslo en funcionamiento. Se soportan cambios en cualquier tipo de archivo XAML, es decir, se soportan páginas, ContentView’s, App, recursos o Shell.

Para las pruebas he usado el ejemplo RottenUI de Kym Phillpotts. Es un ejemplo visualmente atractivo pero además:

Hace uso de estilos a nivel de App y de página.
Hace uso de ContentView definido en otro archivo.
Usa plugins de comunidad como PancakeView.
Usa SkiaSharp.

Comenzamos haciendo cambios en la página principal:

Cambios a nivel de página

Continuamos haciendo cambios en una ContentView usada en la página pero definida en otro archivo:

ContentView usada en la página

Y también a nivel de App:

Cambios a nivel de App

Y todo…en modo avión sin conexión a internet, etc.

Sin internet!

Preview privada

Si quieres probar XAML Hot Reload, desde ya, puedes registrarte para obtener una Preview. Puede encontrar toda la información aquí: https://devblogs.microsoft.com/xamarin/xaml-hot-reload.

Se estan añadiendo a grupos por lotes, así que no te preocupes si no puedes obtenerlo de forma inmediato. Y recuerda; cualquier feedback es importante para continuar mejorando.

Estoy seguro de que Hot Reload hará que tu vida desarrollando Xamarin.Forms mucho mejor.

Happy reloading!