.NET MAUI Preview 2

Con la primera Preview de .NET 6 llegaban los primeros bits para poder hacer pruebas con .NET para Android y iOS, una primera muestra de todo lo que llegará con .NET MAUI. Con la Preview 2, llegan muchas más novedades relacionadas con .NET MAUI como:

  • Primera muestra de proyecto único. Incluye gestión común de iconos, fuentes, etc.
  • Introducción del concepto de nueva aplicación, ventana etc.
  • Handlers. Son la evolución de los actuales renderers en Xamarin.Forms, pero con una nueva arquitectura en búsqueda de mayor rendimiento y opciones de extensibilidad.
  • HostBuilder.
  • Soporte a Mac Catalyst.

En este artículo, vamos a hacer un repaso a todo lo que incluye la Preview 2, además de repasar que nos esperar en próximas Previews.

¿Qué es .NET MAUI?

Partiendo de la evolución de Xamarin.Forms llega a .NET, Multi-platform App UI, MAUI. Se trata de un framework, evolución de Xamarin.Forms, que permitirá crear interfaces de usuario nativas para escritorio y dispositivos móviles usando una base de código común y un único proyecto.

.NET MAUI

Las claves de MAUI son:

  • Interfaz de usuario multi-plataforma nativa.
  • Evolución de Xamarin.Forms.
  • Base de código común, un único proyecto.
  • .NET 6.
  • Soporte oficial para Android, iOS, macOS y Windows.

Los objetivos fundamentales son:

  • Mejorar el rendimiento.
  • Mejorar las posibilidades a la hora de extender controles. Extender de forma más sencilla.
  • Habilitar otras opciones como Model-View-Update (MVU).

Puedes verlo todo con más detalles en el siguiente video:

Preparar el entorno

Antes de comenzar a trabajar con .NET MAUI, necesitamos instalar .NET 6 y otros requisitos. Y antes de instalar nada, recuerda que vamos a instalar Previews. NO están listos para producción, el objetivo principal es permitir comenzar a probar y descubrir las novedades, etc.

Comenzamos instalando la Preview de .NET 6:

Para trabajar con .NET para Android y iOS necesitarás instalar también los workloads:

Android:

iOS:

En el caso de querer probar la implementación de macOS usando Catalyst, necesitas instalar:

Casi lo tenemos todo listo!. Puedes obtener algunos ejemplos usando .NET 6 preparados aquí.

Con .NET 6 ganamos la línea de comandos para poder realizar compilaciones y despliegues de aplicaciones móviles. Puedes compilar aplicaciones .NET MAUI con el comando:

dotnet build HelloMaui

Y compilar y desplegar a la vez usando:

dotnet build HelloMaui -t:Run -f net6.0-android

NOTA: En esta Preview debes añadir también –no-restore. Es debido a algo que estará implementado en la próxima Release, pero no disponible en esta.

Para lanzar un proyecto .NET MAUI, necesitas especificar el $(TargetFramework) usando el parámetro -f.

Hola .NET MAUI

Pero…te estarás preguntando si puedes usar algún IDE. Actualmente hay soporte a Visual Studio 16.9 para Windows pero hay que hacer unos pequeños cambios.

NOTA: El soporte a Visual Studio para macOS o Visual Studio Code aún no esta disponible.

Abre una línea de comandos para activar el EnableWorkloadResolver.sentinel:

cd "%ProgramFiles(x86)%\Microsoft Visual Studio\2019\Enterprise\MSBuild\Current\Bin\SdkResolvers\Microsoft.DotNet.MSBuildSdkResolver"
type NUL > EnableWorkloadResolver.sentinel

Debes reiniciar Visual Studio (si lo tenías abierto) tras este cambio.

.NET MAUI Preview 2

A continuación, veamos que incluye esta Preview así como que podemos hacer con ella.

Proyecto único

Simplificar y reducir conceptos necesarios para ser productivos es uno de los objetivos de .NET MAUI. Una de las formas de buscar este objetivos es con el proyecto único. A diferencia de Xamarin.Forms donde teníamos una librería común compartida junto con un proyecto nativo por cada plataforma, en .NET MAUI tenemos un proyecto único para todas las plataformas.

Proyecto único

En estos momentos, el proyecto incluye soporte a Android, iOS y macOS. El soporte a Windows usando WinUI 3 llegará en próximas Previews.

Para poder usar un proyecto único con diferentes plataformas donde cada una requiere recursos como imágenes o fuentes, necesitamos una forma común de gestionar recursos. Las fuentes e imágenes se pueden colocar en una ubicación común de la solución y .NET MAUI lo gestionará para adaptar todos los recursos a cada plataforma nativa. Estos recursos se registran en el *.csproj como SharedImage y SharedFont.

<ItemGroup>
    <SharedImage Include="appicon.svg" ForegroundFile="appiconfg.svg" IsAppIcon="true" />
    <SharedFont Include="Resources\Fonts\ionicons.ttf" />
</ItemGroup>

Android, iOS y macOS (Catalyst)

El soporte a macOS en .NET MAUI utiliza Catalyst. Para poder usar Catalyst y compilar la aplicación para escritorio, se necesita usar el siguiente TargetFramework:

<TargetFrameworks>net6.0-android;net6.0-ios</TargetFrameworks>
<TargetFrameworks Condition=" '$(OS)' != 'Windows_NT' ">$(TargetFrameworks);net6.0-maccatalyst</TargetFrameworks>

Handlers

La evolución de los Renderers de Xamarin.Forms. Se busca tener siempre el equivalente a un Fast Renderer (solo crear el elemento nativo necesario sin ningún elemento padre o similar para realizar tareas de posicionamiento, reduciendo el árbol visual y por consiguiente, consiguiendo un mejor rendimiento), además de realizar una gestión más óptima con Layouts, etc.

En esta Preview se ha incluido un subconjunto de Handlers (controles) entre los que puedes encontrar: Label, Button, Entry, Slider y Switch. Sin embargo, en esta Preview también se incluye la librería Compatibility.

¿Qué es el paquete Compatibility?

Dado que .NET MAUI es una evolución de Xamarin.Forms, se busca desde el inicio de .NET MAUI ofrecer una experiencia de conversión de proyectos sencilla. Para permitir seguir usando Custom Renderers y otras opciones creadas con Xamarin.Forms, se ha creado el paquete Compatibility. De igual forma, se pueden usar Renderers (controles) de Xamarin.Forms en .NET MAUI. Por ese motivo, aunque no este disponible el Handler de Image (por ejemplo), puedes usar imágenes también.

NOTA: Existe una diferencia de rendimiento entre Renderers y Handlers, sin embargo, poder rehusar grandes cantidades de código gracias al paquete Compatibility, es un gran beneficio.

BuildHost

Se añade en .NET MAUI el concepto de Host, junto con extensiones para configurar servicios, fuentes o habilitar el uso de Renderers para migrar proyectos de Xamarin.Forms. Este nuevo patrón también presenta un lugar único y coherente para que los autores de librerías se integren con .NET MAUI.

public class Application : MauiApp
{
    public override IAppHostBuilder CreateBuilder() => 
        base.CreateBuilder()
            .RegisterCompatibilityRenderers()
            .ConfigureServices((ctx, services) =>
            {
                services.AddTransient<MainPage>();
                services.AddTransient<IWindow, MainWindow>();
            })
            .ConfigureFonts((hostingContext, fonts) =>
            {
                fonts.AddFont("ionicons.ttf", "IonIcons");
            });

    public override IWindow CreateWindow(IActivationState state)
    {
        Microsoft.Maui.Controls.Compatibility.Forms.Init(state);
        return Services.GetService<IWindow>();
    }
}

Otras novedades

  • Xamarin.Essentials también esta integrado en esta Preview. Essentials y toda su funcionalidad es ahora parte directa del framework.
  • AndroidX esta ya integrado en .NET 6.
  • Funciona el Build Host para conectar desde Windows a un Mac.
  • Añadido soporte a AOT para iOS en .NET 6.
  • Etc.

¿Qué es lo próximo?

Habrá varias Previews antes de la llegada de .NET 6 y .NET MAUI en Noviembre. La próxima Preview contará además de con mas Handlers (controles), primera versión de nuevo sistema de Layout, concepto de Startup, eventos de ciclo de vida, y mucho más. Al estar disponible, volveremos a tener artículo en el blog así como algún streaming en Twitch.

¿Qué te parece lo que ves en la Preview?, ¿cuál es tu novedad favorita?. Puedes dejar cualquier feedback o pregunta en los comentarios de la entrada!

Más información

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