Xamarin.Forms en la web con WebAssembly y UNO

Introducción

Xamarin.Forms en la web. No es la primera vez que hablamos de ello. Dependiendo de con quien hables es una idea que trae malos recuerdos y piensa en algo horrible o piensa que es genial aprovechar la expansión de Xamarin.Forms, llegar a la web y aprovechar para reutilizar herramientas, código, etc.

En cualquier caso, en este artículo, vamos a conocer como llevar Xamarin.Forms en la web, vamos a ello!.

WebAssembly

¿Qué es?

WebAssembly es una nueva definición de bajo nivel de Abstract Syntax Tree (AST) representada en un formato binario. Puedes pensar en ello como un lenguaje ensamblador que los navegadores web pueden ejecutar. Esto quiere decir que sería posible compilar código escrito en muchos idiomas modernos en binarios que los navegadores web ejecutan de forma nativa.

¿Por qué Web Assembly?

WebAssembly está tratando de resolver los problemas existentes que dificultan la optimización del rendimiento de aplicaciones grandes, proporcionando acceso a lenguajes que producen binarios y mejorando la seguridad de ejecutar el código resultante.

También proporciona una forma para que cualquier lenguaje tenga un back-end de compilación (como LLVM) para llegar a la Web. Esto abre un camino para C, C ++, lenguajes basados ​​en .NET a través de Mono, Java y otros lenguajes. Proporciona opciones para los desarrolladores para llegar a la Web, reutilizando una librería (por ejemplo C++) sin tener que portarla a Javascript.

WebAssembly y .NET

Microsoft ha estado trabajando en WebAssembly y .NET utilizando  Mono desde hace un tiempo, y el progreso ha sido constante desde inicios de 2018.

Debido a consideraciones técnicas como la integración de Emscripten y su implementación sobre Javascript, AOT aún no está disponible. Se está trabajando actualmente en la integración AOT, pero la ruta actual para ejecutar código .NET en un entorno WebAssembly es a través del intérprete Mono. Se consiguen resultados bastante positivos, aunque obviamente el rendimiento mejorará considerablemente al usar AOT.

Uno Platform WebAssembly Renderers for Xamarin.Forms

Tras repasar que es WebAssembly, vamos a conocer cómo llevamos una App Xamarin.Forms a la web (usando WebAssembly).

Uno Platform

Uno Platform es un framework que permite desarrollar Apps para iOS y Android (Xamarin Stack) y para WebAssembly (Mono-Wasm runtime).

Uno Platform WebAssembly Renderers for Xamarin.Forms

Xamarin.Forms lleva soportando UWP desde el inicio, y Uno proporciona el conjunto de APIs UWP para funcionar en WebAssembly, asi que es un paso (lógico) más el ofrecer Renderers para habilitar Apps Xamarin.Forms UWP en WebAssembly.

Esto permite que las aplicaciones Xamarin.Forms se ejecuten en la Web.

¿Cómo llevar una App Xamarin.Forms a la Web?

Teniendo una solución Xamarin.Forms con un proyecto UWP, abrimos una línea de comandos y navegamos a la carpeta del proyecto.

Comenzamos instalando las plantillas de Uno:

dotnet new -i Uno.ProjectTemplates.Dotnet::1.46.230-dev.2723

NOTA: Una vez instaladas las plantillas, no será necesario volver a instalarlas.

Para crear un proyecto Wasm (reusará partes del proyecto UWP), ejecutamos:

dotnet new wasmxfhead

Al refrescar Visual Studio, veremos un nuevo proyecto:

Proyecto Wasm

Si lanzamos ese proyecto:

Monkey Conf

Estamos ante una sencilla App Xamarin.Forms con el objetivo de crear la página web del evento Monkey Conf. Reutilizamos el mismo XAML y código usado para la App UWP, pero corriendo en el navegador.

Puedes encontrar el código en GitHub:

Ver GitHub

Más información

Un pensamiento en “Xamarin.Forms en la web con WebAssembly y UNO

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s