Introducción a .NET MAUI

Bienvenidos a la .NET MAUI una versión que marca un nuevo hito en nuestro viaje de varios años para unificar la plataforma .NET. Ahora nosotros y más de 5 millones de desarrolladores de .NET tenemos una pila de interfaz de usuario de primera clase y multi-plataforma dirigida a Android, iOS, macOS y Windows para complementar la cadena de herramientas de .NET (SDK) y la biblioteca de clases base (BCL). Ahora Podemos construir cualquier cosa con .NET.

Esto es sólo el principio de un nuevo ecosistema de herramientas para crear una experiencia de aplicación móvil y de escritorio que deleite a los desarrolladores de .NET. Se espera para la siguiente fases librerías que cubran desde .NET Framework hasta .NET 6 y versiones mas recientes, entre los que se encuentran disponibles hoy se encuentran:

AndroidX AlohaKitAPI de Google para iOSPlugin.StoreReview
CommunityToolkit.MVVMBibliotecas de cliente de GooglePlugin.ValidationRules
CommunityToolkit.MauiPlay Services GrialKitReactiveUI.Maui Shiny
CommunityToolkit MauiCompatMauiAnimationSkiaSharp Syncfusion Telerik
CommunityToolkitMicrosoft.Maui.Graphics MR.UI for .NET MAUI TemplateUI
Markup.MauiCompat DevExpressGestos Prism.MauiUser Dialogs
Facebook FreshMvvm.MauiPlugin.Fingerprint
Plugin.InAppBilling

La carga de trabajo de .NET MAUI es totalmente compatible con la programación de versiones actual de 18 meses y se atenderá con la misma cadencia mensual que .NET. El enfoque continuo para .NET MAUI sigue siendo la calidad, resolviendo problemas conocidos y priorizando problemas en función de los comentarios de la comunidad. Esto también incluye las cargas de trabajo que enviamos para crear aplicaciones que se dirigen exclusivamente a Android, Android Wear, CarPlay, iOS, macOS y tvOS directamente utilizando los kits de herramientas nativos de .NET y las bibliotecas compatibles AndroidX, Facebook, Firebase, Google Play Services y SkiaSharp.

Con .NET MAUI podemos lograr buenas experiencias de usuario mientras compartimos o reutilizamos más código que nunca. .NET MAUI utiliza la interfaz de usuario nativa a través de los principales kits de herramientas de aplicaciones proporcionados por cada plataforma y la productividad moderna de los desarrolladores.

Interfaz de usuario nativa

El objetivo principal de .NET MAUI es permitirle ofrecer la mejor experiencia de aplicación diseñada especialmente por cada plataforma (Android, iOS, macOS, Windows y Tizen gracias a la colaboración con Samsung), al tiempo que le permite crear experiencias de marca consistentes a través de un estilo y gráficos enriquecidos. Fuera de la caja, cada plataforma se ve y se comporta de la manera que debería sin ningún widget adicional o estilo requerido para imitar. Por ejemplo, .NET MAUI en Windows está respaldado por WinUI 3, el principal componente de interfaz de usuario nativo que se incluye con el SDK de aplicaciones de Windows.

Usemos C# y XAML para crear nuestras aplicaciones a partir de un completo kit de herramientas de más de 40 controles, diseños y páginas. Sobre los hombros de Xamarin de los controles móviles, .NET MAUI agrega compatibilidad con aplicaciones de escritorio de varias ventanas, barras de menús y nuevas capacidades de animación, bordes, esquinas, sombras, gráficos y más. Lo nuevo que destacaremos a continuación. BlazorWebView

Conoce más en la documentación de .NET MAUI sobre controles: páginas, diseños y vistas.

Accessibility First

Una ventaja importante del uso de la interfaz de usuario nativa es el soporte de accesibilidad heredado que podemos aprovechar con los servicios semánticos para que sea más fácil que nunca crear aplicaciones altamente accesibles. El equipo de MAUI ha trabajado en estrecha colaboración con los clientes para rediseñar la forma en que desarrollamos para la accesibilidad. A partir de estas conversaciones han diseñado servicios semánticos MAUI de .NET para controlar:

  • Propiedades como descripción, sugerencia y nivel de encabezado
  • Centro de atención
  • Lector de pantalla
  • Propiedades de automatización

Más información en la documentación de .NET MAUI sobre los servicios semánticos para la accesibilidad.

Mas allá de la interfaz de usuario

.NET MAUI proporciona API sencillas para acceder a los servicios y características de cada plataforma, como acelerómetro, acciones de aplicaciones, sistema de archivos, notificaciones y mucho más. En este ejemplo, configuramos “acciones de la aplicación” que agregan opciones de menú al icono de la aplicación en cada plataforma:

AppActions.SetAsync(
    new AppAction("current_info", "Check Current Weather", icon: "current_info"),
    new AppAction("add_location", "Add a Location", icon: "add_location")
);

Más en la documentación de .NET MAUI sobre el acceso a los servicios y características de la plataforma.

Fácilmente personalizados.

Ya sea que esté ampliando las capacidades de los controles MAUI de .NET o estableciendo una nueva funcionalidad de plataforma, .NET MAUI está diseñado para la extensibilidad, por lo que nunca se topa con una pared. Tomemos, por ejemplo, el control, un ejemplo canónico de un control que se representa de manera diferente en una plataforma. Android dibuja un subrayado debajo del campo de texto, y los desarrolladores a menudo quieren eliminar ese subrayado. Con .NET MAUI, la personalización de cada uno de los proyectos es solo unas pocas líneas de código: EntryEntry

#if ANDROID
Microsoft.Maui.Handlers.EntryHandler.Mapper.ModifyMapping("NoUnderline", (h, v) =>
{
    h.PlatformView.BackgroundTintList = ColorStateList.ValueOf(Colors.Transparent.ToPlatform());
});
#endif

Aquí hay un gran ejemplo reciente de la creación de un nuevo control de plataforma de mapas por parte de Cayas Software. En este blog se muestra la creación de un controlador para el control, la implementación para cada plataforma y, a continuación, la disponibilidad del control registrándolo en .NET MAUI.

.ConfigureMauiHandlers(handlers =>
{
    handlers.AddHandler(typeof(MapHandlerDemo.Maps.Map),typeof(MapHandler));
})

Más información en la documentación de .NET MAUI sobre la personalización de controles con controladores.

Productividad moderna para desarrolladores

Más que ser una tecnología que puede crear cualquier cosa, la idea es que .NET también acelere la productividad de los desarrolladores utilizando características, patrones, prácticas de lenguaje comunes, y herramientas.

.NET MAUI usa las nuevas características de C# 10 introducidas en .NET 6, incluidas las instrucciones de uso global y los espacios de nombres con ámbito de archivo, ideales para reducir el desorden y código innecesario en los archivos. .NET MAUI lleva la segmentación múltiple a un nuevo nivel con un enfoque de “proyecto único”.

En los nuevos proyectos MAUI de .NET, las plataformas se encuentran en una subcarpeta que centra la atención en su aplicación, donde se invierte la mayor parte de su esfuerzo. Dentro de la carpeta Resources del proyecto, tenemos un único lugar para administrar las fuentes, las imágenes, el icono de la aplicaciónla pantalla de presentación, los recursos sin formato y el estilo de tu aplicación. .NET MAUI hará el trabajo para optimizarlos para los requisitos únicos de cada plataforma.

Multiproyecto vs. Proyecto único: La estructuración de su solución con proyectos individuales para cada plataforma sigue siendo compatible, pero se puede elegir un enfoque de proyecto único también.

.NET MAUI usa el patrón builder popularizado entre las bibliotecas Microsoft.Extensions en aplicaciones ASP.NET y Blazor como un único lugar para inicializar y configurar la aplicación. Desde aquí, podemos proporcionar .NET MAUI con sus fuentes, aprovechar los eventos del ciclo de vida específicos de la plataforma, configurar dependencias, habilitar características específicas, habilitar kits de herramientas de otro proveedores y más.

public static class MauiProgram
{
    public static MauiApp CreateMauiApp()
    {
        var builder = MauiApp.CreateBuilder();
        builder
            .UseMauiApp<App>()
            .ConfigureServices()
            .ConfigureFonts(fonts =>
            {
                fonts.AddFont("Segoe-Ui-Bold.ttf", "SegoeUiBold");
                fonts.AddFont("Segoe-Ui-Regular.ttf", "SegoeUiRegular");
                fonts.AddFont("Segoe-Ui-Semibold.ttf", "SegoeUiSemibold");
                fonts.AddFont("Segoe-Ui-Semilight.ttf", "SegoeUiSemilight");
            });

        return builder.Build();
    }
}
public static class ServicesExtensions
{
    public static MauiAppBuilder ConfigureServices(this MauiAppBuilder builder)
    {
        builder.Services.AddMauiBlazorWebView();
        builder.Services.AddSingleton<SubscriptionsService>();
        builder.Services.AddSingleton<ShowsService>();
        builder.Services.AddSingleton<ListenLaterService>();
#if WINDOWS
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.Windows.NativeAudioService>();
#elif ANDROID
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.Android.NativeAudioService>();
#elif MACCATALYST
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.MacCatalyst.NativeAudioService>();
        builder.Services.TryAddSingleton< Platforms.MacCatalyst.ConnectivityService>();
#elif IOS
        builder.Services.TryAddSingleton<SharedMauiLib.INativeAudioService, SharedMauiLib.Platforms.iOS.NativeAudioService>();
#endif

        builder.Services.TryAddTransient<WifiOptionsService>();
        builder.Services.TryAddSingleton<PlayerService>();

        builder.Services.AddScoped<ThemeInterop>();
        builder.Services.AddScoped<ClipboardInterop>();
        builder.Services.AddScoped<ListenTogetherHubClient>(_ =>
            new ListenTogetherHubClient(Config.ListenTogetherUrl));


        return builder;
    }
}

Puedes encontrar más información en la documentación de .NET MAUI sobre el inicio de la aplicación con MauiProgram y un solo proyecto.

Llevando Blazor a Escritorio y Movil

.NET MAUI también es ideal para desarrolladores web que buscan entrar en acción con aplicaciones cliente nativas. NET MAUI se integra con Blazor, por lo que puede reutilizar los componentes de la interfaz de usuario web de Blazor existentes directamente en aplicaciones móviles y de escritorio nativas. Con .NET MAUI y Blazor, podemos reutilizar sus habilidades de desarrollo web para crear aplicaciones nativas multiplataforma y crear una única interfaz de usuario que abarque dispositivos móviles, de escritorio y web.

.NET MAUI ejecuta los componentes de Blazor de forma nativa en el dispositivo (no se necesita WebAssembly) y los representa en un control de vista web incrustado. Debido a que sus componentes de Blazor compilan y ejecutan en el proceso .NET, no se limitan a la plataforma web y pueden aprovechar cualquier característica nativa de la plataforma, como notificaciones, Bluetooth, geolocalización y sensores, sistema de archivos y mucho más. Incluso puede agregar controles de interfaz de usuario nativos junto con su interfaz de usuario web de Blazor. Este es un nuevo tipo de aplicación híbrida:

¡Blazor Hybrid!

Comenzar con .NET MAUI y Blazor es fácil: solo tenemos que usar la plantilla de proyecto de la aplicación .NET MAUI Blazor incluida.

Esta plantilla está configurada para que podamos comenzar a crear una aplicación .NET MAUI Blazor con HTML, CSS y C#. El tutorial de Blazor Hybrid para .NET MAUI nos guiará a través de la creación y ejecución de su primera aplicación .NET MAUI Blazor.

agreguemos un control BlazorWebView a una aplicación MAUI de .NET existente donde queramos empezar a usar componentes de Blazor:

<BlazorWebView HostPage="wwwroot/index.html">
    <BlazorWebView.RootComponents>
        <RootComponent Selector="#app" ComponentType="{x:Type my:Counter}" />
    </BlazorWebView.RootComponents>
</BlazorWebView>

La compatibilidad con Blazor Hybrid también está ahora disponible para WPF y Windows Forms, por lo que podemos comenzar a modernizar nuestras aplicaciones de escritorio existentes para que se ejecuten en la web o para que se ejecuten entre plataformas con .NET MAUI. Los controles para WPF y Windows Forms están disponibles en NuGet. Consultemos los tutoriales de Blazor Hybrid para WPF y Windows Forms para obtener información sobre cómo empezar. BlazorWebView

Para obtener más información sobre la compatibilidad de Blazor Hybrid con .NET MAUI, WPF y formularios Windows Forms, consultemos los documentos de Blazor Hybrid.

Optimizado para el rendimiento

.NET MAUI está diseñado para el rendimiento. Sabemos lo crítico que es que nuestras aplicaciones se inicien lo más rápido posible, los controles de la interfaz de usuario de .NET MAUI implementan un patrón de handler-mapper sobre los controles nativos de la plataforma. Esto reduce el número de capas en la representación de la interfaz de usuario y simplifica la personalización del control.

Uno de los objetivos de .NET MAUI fue mejorar el rendimiento del inicio y mantener o reducir el tamaño de la aplicación a medida que hacíamos la transición a .NET 6. Hasta el momento se ha logrado una mejora del 34,9% para .NET MAUI y una mejora del 39,4% en .NET para Android. Esas ganancias también se extienden a aplicaciones complejas; la aplicación de muestra .NET Podcast comenzó con un inicio de 1299 ms y en GA se reduce a 814,2 ms, una mejora del 37,3% desde la vista previa 13.

La configuración está habilitada de forma predeterminada para proporcionar una compilación de lanzamiento con estas optimizaciones (usando la opción de release).

En un futuro este rendimiento se seguirá mejorando para lograr reducir a un más los tiempos de espera.

Inicia hoy con .NET MAUI

Para empezar a usar .NET MAUI en Windows, instalemos o actualicemos Visual Studio 2022 Preview a la versión 17.3 o superior. En el instalador, elijamos la carga de trabajo “.NET Multi-platform App UI development”.

Para usar .NET MAUI en Mac, instalemos la nueva vista previa de Visual Studio 2022 para Mac (17.3 o superior).

Visual Studio 2022 admitirá herramientas MAUI de GA .NET a finales de este año. En Windows hoy en día, puede acelerar su bucle de desarrollo con XAML y .NET Hot Reload, y potentes editores para XAML, C #, Razor y CSS, entre otros. Con XAML Live Preview y Live Visual Tree, puede obtener una vista previa, alinear, inspeccionar la interfaz de usuario y editarla durante la depuración. La nueva experiencia de proyecto único de .NET MAUI ahora incluye páginas de propiedades de proyecto para una experiencia de edición visual para configurar las aplicaciones con segmentación multiplataforma.

En Mac, hoy puede cargar soluciones MAUI de .NET de un solo proyecto y varios proyectos para depurar con una nueva y hermosa experiencia nativa de Visual Studio 2022 para Mac. Otras características para mejorar su productividad desarrollando aplicaciones MAUI de .NET se enviarán en versiones preliminares posteriores.

Se recomienda comenzar a actualizar las bibliotecas a .NET MAUI y crear nuevos proyectos de .NET MAUI hoy mismo. Antes de sumergirse de lleno en la conversión de proyectos de Xamarin a .NET MAUI, revisemos nuestras dependencias, el estado de la compatibilidad de Visual Studio con .NET MAUI y los problemas conocidos publicados para identificar el momento adecuado para la transición. Es importante tener en cuenta que Xamarin seguirá siendo compatible con la directiva de ciclo de vida , que establece 2 años desde la última versión principal.

Recursos

Referencia

Introducing .NET MAUI – One Codebase, Many Platforms – .NET Blog (microsoft.com)