.NET MAUI - Hands On

O MAUI no .NET 6 fez sua primeira aparição pública no Preview 2, lançado em março de 2021, e trouxe a promessa de criar interfaces para várias plataformas a partir de um único projeto. MAUI é a sigla de .NET Multi-platform App UI, ou seja, interface de aplicativos multiplataforma, uma tecnologia da Microsoft para construir apps nativos com C# e XAML.

Neste artigo, você entende de onde o MAUI vem, como preparar o ambiente e como executar o primeiro app de exemplo. Além disso, o texto explica cada comando usado, para que você saiba o que acontece por trás do build.

O que é o MAUI no .NET 6

O .NET MAUI é um framework multiplataforma para criar apps nativos para dispositivos móveis e desktop. Com ele, um mesmo código atende Android, iOS, macOS e Windows.

Segundo a documentação oficial do .NET MAUI, um dos objetivos principais é concentrar o máximo possível da lógica e do layout em uma única base de código. Mesmo assim, o framework permite adicionar código e recursos específicos de cada plataforma quando necessário.

Na arquitetura, o seu código conversa principalmente com a camada de controles e APIs do MAUI. Essa camada, por sua vez, consome diretamente as APIs nativas de cada sistema operacional.

Por isso, o resultado final não é uma página web embutida, e sim um app nativo. Cada plataforma recebe os controles visuais que o próprio sistema oferece.

O MAUI no .NET 6 Preview 2

O MAUI estreou no Preview 2 do .NET 6, em março de 2021. Na época, a Microsoft previa o lançamento final do .NET 6 para novembro de 2021, como uma versão LTS com três anos de suporte.

No anúncio do Preview 2, a equipe destacou a unificação do desenvolvimento móvel com o .NET principal. A ideia central era permitir apps para iOS, Android, Windows e macOS a partir do mesmo código usando o MAUI.

Se você ainda não viu as outras novidades do .NET 6, confira os artigos sobre o .NET 6 Preview 1 e o .NET 6 Preview 2. Neles, mostramos tudo o que de melhor chegou nessas releases.

Vale reforçar, contudo, que esta versão ainda é um preview. Em outras palavras, ela está longe da versão final para produção, então use por sua conta e risco.

O que o Preview 2 entrega

O anúncio oficial do Preview 2 trouxe alguns pontos concretos para o desenvolvimento móvel. Primeiro, um único projeto com multi-targeting já roda em Android, iOS e macOS.

O Windows, por outro lado, ainda dependia da conclusão do WinUI 3 e ficou para um preview futuro. Assim, nesta fase, o suporte cobre as plataformas da Apple e o Android.

Além disso, fontes e imagens podem ficar em um único local da solução. O MAUI então faz esses recursos funcionarem de forma nativa em todas as plataformas de destino.

No Android, as bibliotecas AndroidX passaram a ficar disponíveis para o .NET 6 e viraram a dependência padrão dos apps. Já no iOS, a compilação ahead of time permitiu gerar e implantar apps em aparelhos físicos.

Desenvolvedores Windows também ganharam acesso a simuladores iOS remotos e a hosts de build Mac. Dessa forma, fica mais simples testar apps iOS sem trabalhar o tempo todo em um Mac.

O MAUI no .NET 6 e o Xamarin

A primeira grande mudança é que o MAUI, na verdade, é uma evolução do Xamarin.Forms. Portanto, se você já conhece e usa essa tecnologia, vai se sentir em casa.

A Microsoft descreve o MAUI como a evolução do Xamarin.Forms, estendida do mobile para o desktop. Os controles de interface, inclusive, foram reconstruídos do zero para ganhar desempenho e extensibilidade.

A proposta principal do MAUI no .NET 6 é trazer todo o ecossistema do Xamarin para dentro do .NET, modernizando a forma de usar a tecnologia. Na prática, deixam de existir dois mundos separados entre o .NET tradicional e o Xamarin.

Segundo o anúncio original do MAUI, o Xamarin.Forms receberia uma última versão principal, com suporte mantido até a chegada do .NET 6. Então, o caminho natural para quem usa Xamarin.Forms passa a ser a migração para o MAUI.

Um único projeto para todas as plataformas

No Xamarin, cada plataforma costumava ter seu próprio projeto, como um para Android e outro para iOS. Com o MAUI no .NET 6, essa separação deixa de ser obrigatória.

O MAUI unifica os projetos e melhora ainda mais o compartilhamento de código. De acordo com a documentação, esse projeto único funciona graças ao multi-targeting e aos projetos no estilo SDK.

Entre os benefícios, estão um ponto de entrada único, um manifesto único com título, id e versão do app e arquivos de recursos compartilhados. Ainda assim, você continua com acesso às APIs e ferramentas específicas de cada plataforma.

Do renderer ao handler

Outra diferença importante está na forma de desenhar os controles. Enquanto o Xamarin.Forms usava custom renderers, o MAUI no .NET 6 introduz um conceito chamado handler.

Segundo a documentação, os handlers não criam um elemento pai extra na hierarquia visual. Com isso, a árvore de controles fica menor e o app ganha desempenho.

Os handlers também desacoplam os controles nativos do framework. Dessa forma, estender ou sobrescrever um comportamento fica bem mais simples do que com renderers.

Ferramentas e padrões no MAUI no .NET 6

Um bom exemplo da modernização é que podemos usar o Visual Studio Code para programar os apps. Se você ainda não configurou o editor, veja o artigo sobre instalação e customização do Visual Studio Code.

Além do editor, a linha de comando ganha força, com comandos como dotnet new android para iniciar um projeto. Assim, o fluxo de trabalho fica parecido com o de qualquer outro projeto .NET.

O anúncio original do MAUI também citava o Visual Studio 2019 e o Visual Studio for Mac como ferramentas suportadas. Portanto, você pode escolher o ambiente que preferir.

Quanto aos padrões de interface, o MVVM com XAML continua como cidadão de primeira classe. Ao mesmo tempo, a Microsoft anunciou suporte ao MVU, que permite escrever a interface de forma fluente em C#.

O MVU trabalha com fluxo de dados em uma única direção e gerenciamento de estado explícito. Além disso, a Microsoft planejava integrar o MAUI com a web por meio do Blazor.

Instalando o .NET 6 Preview 2

Para executar as demos do MAUI no .NET 6, você precisa instalar o .NET 6 Preview 2. Ele roda lado a lado com outros SDKs e runtimes do .NET na sua máquina, então não afeta os projetos existentes.

Para os exemplos deste artigo, basta o SDK. Afinal, o SDK já inclui o runtime necessário para executar as aplicações.

Depois da instalação, verifique a versão ativa com o comando abaixo. Se quiser listar todos os SDKs instalados, use a segunda opção:

# Mostra a versão do SDK em uso
dotnet --version

# Lista todos os SDKs instalados na máquina
dotnet --list-sdks

Se a saída mostrar a versão do Preview 2, o ambiente está pronto para a próxima etapa. Caso contrário, confira se a instalação terminou corretamente.

Carregando os workloads

Para compilar os apps do MAUI no .NET 6 para diferentes plataformas, precisamos instalar alguns workloads adicionais. Esse passo depende das plataformas que você quer compilar.

Um workload é um pacote de ferramentas e bibliotecas para uma plataforma específica, como Android ou iOS. Dessa forma, o SDK base fica enxuto e você instala apenas o que vai usar.

No meu caso, como uso um Mac, instalei todos os pacotes listados na página de exemplos do .NET 6 mobile. Nesta versão, eles eram:

  • Android: Microsoft.NET.Workload.Android-11.0.200.148
  • iOS: Microsoft.iOS.Bundle.14.4.100-ci.main.1192
  • Mac Catalyst: Microsoft.MacCatalyst.Bundle.14.3.100-ci.main.337

O workload do Mac Catalyst serve para criar apps que rodam tanto no macOS quanto no iOS com poucos ajustes na interface. Note também que esses nomes de pacotes mudam a cada preview, então sempre consulte a página oficial.

O que é o Mac Catalyst

O Mac Catalyst é uma solução da Apple que leva para o desktop apps iOS construídos com UIKit. Além disso, ele complementa esses apps com APIs do AppKit e da plataforma quando necessário.

No MAUI no .NET 6, os apps para macOS usam justamente o Mac Catalyst. Por isso, o mesmo código que roda no iPhone e no iPad também roda no Mac.

Vale lembrar que compilar apps para iOS e macOS exige um Mac. Já o Android pode ser compilado em Windows, macOS ou Linux.

Seu primeiro app MAUI no .NET 6

Ainda não temos um comando para criar um app MAUI via CLI. Então, precisamos clonar o exemplo direto do repositório oficial no GitHub.

Caso você precise de ajuda com Git e GitHub, leia o artigo sobre Git e GitHub: instalação, configuração e primeiros passos. Nele, mostro como configurar as ferramentas e dar os primeiros passos.

Vamos então clonar o repositório com o comando git clone:

# Clona o repositório oficial de exemplos do .NET 6 mobile
git clone https://github.com/dotnet/net6-mobile-samples.git

Feito isso, abra a pasta clonada no Visual Studio Code. O editor já vem com suporte e pede para instalar algumas extensões adicionais quando o projeto carrega.

# Entra na pasta clonada e abre o Visual Studio Code
cd net6-mobile-samples
code .

A página oficial dos exemplos no GitHub também traz instruções para usar o Visual Studio e o Visual Studio for Mac com o .NET 6. Portanto, consulte essa página caso prefira outra ferramenta.

O que mudou na estrutura dos projetos

O exemplo traz quatro apps: HelloAndroid, HelloiOS, HelloMacCatalyst e o que nos interessa, o HelloMaui. Cada um mostra uma forma diferente de criar apps com o .NET 6.

Se você examinar as três primeiras pastas, verá aplicações dedicadas a uma única plataforma, no estilo do Xamarin tradicional. Porém, a pasta HelloMaui contém, dentro dela, as pastas de Android, iOS e Mac Catalyst.

Isso acontece porque o MAUI no .NET 6 unificou os projetos e já traz tudo integrado. Em resumo, focamos em um único projeto e obtemos como resultado a interface para várias plataformas.

Compilando e executando com o MAUI no .NET 6

Para compilar uma aplicação específica de plataforma, como a do iOS, usamos o dotnet build. Em seguida, adicionamos o target Run para executar o app:

# Compila o projeto dedicado ao iOS
dotnet build HelloiOS

# Compila e executa o app em um simulador disponível
dotnet build HelloiOS -t:Run

O parâmetro -t:Run pede ao MSBuild que execute o target Run depois do build. Na prática, isso inicia o app em um emulador ou simulador disponível no ambiente.

Escolhendo a plataforma com o parâmetro -f

No projeto do MAUI no .NET 6, as coisas mudam um pouco. Além do -t:Run, precisamos especificar a plataforma de destino com o parâmetro -f:

# Executa o mesmo projeto MAUI em cada plataforma
dotnet build HelloMaui -t:Run -f net6.0-android --no-restore
dotnet build HelloMaui -t:Run -f net6.0-ios --no-restore
dotnet build HelloMaui -t:Run -f net6.0-maccatalyst --no-restore

O -f define o target framework, ou seja, para qual plataforma o projeto compila. Como o projeto MAUI usa multi-targeting, ele declara vários frameworks de destino, e o -f escolhe um deles.

No momento, os nomes das plataformas usam o prefixo net6.0-, mas acredito que isso pode mudar com o tempo. Além disso, precisei adicionar --no-restore por conta de um bug que deve ser corrigido nas próximas versões.

O --no-restore pula a restauração de pacotes NuGet durante o build. Por isso, use-o apenas depois de restaurar os pacotes pelo menos uma vez.

Executando o app

Você pode executar os comandos anteriores, um de cada vez, e ver o app do MAUI no .NET 6 em vários dispositivos. Assim, fica claro que o visual é realmente o mesmo em todos eles.

No meu caso, executei no macOS e no simulador do iPad para conferir o resultado. E, de fato, ficou muito bacana.

App de exemplo HelloMaui feito com MAUI no .NET 6 Preview 2 rodando lado a lado no macOS e no simulador do iPad
O mesmo projeto HelloMaui executado no Mac Catalyst e no simulador do iPad.

Claro que se trata de uma versão inicial, e os componentes ainda não estão totalmente polidos. Mesmo assim, já dá para esperar uma boa compatibilidade entre dispositivos no futuro.

Como o MAUI no .NET 6 roda em cada plataforma

Embora o código do MAUI no .NET 6 seja o mesmo, cada plataforma executa o app de um jeito diferente. Entender isso ajuda a interpretar diferenças de desempenho e de tempo de build.

No Android, o C# compila para uma linguagem intermediária, e o JIT a converte em código nativo quando o app inicia. Já no iOS, o app passa por compilação ahead of time direto para código de máquina ARM.

No macOS, por sua vez, o app roda via Mac Catalyst. Por fim, no Windows, o MAUI usa a biblioteca WinUI 3 para criar apps nativos de desktop.

Segundo a documentação, Android, iOS e macOS usam o Mono como ambiente de execução, enquanto o Windows usa o CLR do .NET. Ainda assim, todos compartilham a mesma biblioteca de classes base do .NET.

Cuidados ao testar o MAUI no .NET 6

Testar um preview é ótimo para aprender e dar feedback, mas exige alguns cuidados. Em primeiro lugar, não leve código experimental para produção.

Em segundo lugar, espere mudanças de nomes, comandos e pacotes entre um preview e outro. Os próprios workloads listados aqui, por exemplo, tendem a mudar nas próximas versões.

Além disso, mantenha o SDK estável instalado em paralelo. Dessa forma, seus projetos atuais continuam compilando normalmente enquanto você experimenta o MAUI no .NET 6.

Por fim, acompanhe o repositório oficial e as notas de lançamento. Assim, você descobre rapidamente quando um bug, como o que exigiu o --no-restore, recebe correção.

Conclusão

O MAUI no .NET 6 Preview 2 mostra o primeiro passo concreto da unificação entre Xamarin e .NET. Com um único projeto, conseguimos executar o mesmo app no Android, no iOS e no Mac.

Ainda é cedo e muita coisa vai mudar até novembro de 2021. Mesmo assim, já vale clonar os exemplos, rodar o HelloMaui e acompanhar a evolução da tecnologia de perto.

FAQ

O que significa a sigla MAUI?

MAUI significa .NET Multi-platform App UI. Trata-se do framework da Microsoft para criar apps nativos multiplataforma com C# e XAML.

O MAUI substitui o Xamarin.Forms?

Sim, o MAUI é a evolução do Xamarin.Forms, estendida para o desktop. O Xamarin.Forms teria uma última versão principal com suporte até a chegada do .NET 6.

O Windows já funciona no MAUI do Preview 2?

Ainda não. Nesta fase, o projeto único roda em Android, iOS e macOS, e o Windows depende da conclusão do WinUI 3.

Posso criar um app MAUI pela linha de comando no Preview 2?

Ainda não existe um template de MAUI na CLI nesta versão. Por isso, o caminho é clonar o repositório oficial de exemplos.

Preciso de um Mac para testar o MAUI?

Para compilar apps iOS e macOS, sim. Já o app Android pode ser compilado e executado em outros sistemas operacionais.

Para que serve o parâmetro -f no build?

O -f escolhe o target framework, como net6.0-android ou net6.0-ios. Assim, o mesmo projeto compila para a plataforma desejada.

Glossário

Termo Significado
MAUI .NET Multi-platform App UI, framework para criar apps nativos multiplataforma com C# e XAML
Xamarin.Forms Framework anterior ao MAUI para interfaces móveis multiplataforma com .NET
Preview Versão de pré-lançamento destinada a testes e feedback, sem suporte para produção
Workload Pacote de ferramentas e bibliotecas do SDK para uma plataforma específica
Mac Catalyst Tecnologia da Apple que leva apps iOS feitos com UIKit para o macOS
Target framework Identificador da plataforma de destino de um build, como net6.0-android
Multi-targeting Capacidade de um projeto compilar para vários frameworks de destino
Handler Componente do MAUI que conecta um controle multiplataforma ao controle nativo
Custom renderer Mecanismo do Xamarin.Forms para personalizar a renderização de controles nativos
MVVM Model-View-ViewModel, padrão que separa interface, estado e lógica de apresentação
MVU Model-View-Update, padrão com fluxo de dados em uma direção e interface escrita em código
WinUI 3 Biblioteca de interface nativa do Windows usada pelo MAUI no desktop
AOT Compilação ahead of time, que gera código nativo antes da execução
LTS Long Term Support, versão com suporte estendido

Fontes