Ione Souza Junior

HotReload: uma ferramenta gratuita para desenvolvimento de UI em XAML

03/06/2019 | 4 minutos de leitura | Traduções: en | #xamarin

Há um tempo escrevi um post chamado Xamarin.Forms e UI – Qual ferramenta é mais produtiva?. Neste post, criei um comparativo entre as principais ferramentas existentes naquele momento para facilitar o desenvolvimento de apps com Xamarin.Forms usando XAML. Agora surgiu uma nova ferramenta chamada HotReload. Vamos dar uma conferida nela e compará-la junto com as demais ferramentas?

Aqui está o link do post que comentei acima.

Acho que uma das coisas mais fantásticas no HotReload é o fato dele ser open source! Sim, você pode conferir o projeto no Github e quem sabe até auxiliar o pessoal lá.

Não vou realizar uma introdução detalhada sobre o HotReload, pois o Mahmoud Ali já fez. Aqui está o review que ele fez da ferramenta. Então, você pode conferir isso por lá também. O foco aqui é o comparativo com as demais ferramentas que já havia avaliado no outro post. Bora lá!

Custo

Essa ferramenta é gratuita! Sim, agora podemos contar com uma solução gratuita para o desenvolvimento de interfaces usando XAML.

Suporte a custom renders, effects, componente de terceiros, native views, ContentViews, animações e design time data

Em todos esses estes quesitos o HotReload funcionou perfeitamente. Nenhum problema considerável encontrado nesses testes.

Suporte a ResourceDictionary

A ferramenta dá suporte ao ResourceDictionary, mas com uma ressalva. Se a tela que estamos alterando possuir um ResourceDictionary e realizamos alterações nele, nenhum problema ocorre. Entretanto, caso realizarmos alterações no ResourceDictionary global da aplicação, essas alterações não são imediatamente propagadas para a tela, podendo até fazer com que o app trave. O exemplo que fiz foi bem simples, com o reload em ação, adicionei um novo estilo ao ResourceDictionary e tentei referenciá-lo na página. Daí a tela ficou em branco e nada mais funcionou. Mas calma, já tem até um issue aberto para isso e logo deverá ser resolvido.

EXTRA EXTRA: Informo que o problema citado acima já foi resolvido! 🙂 No momento que eu estava escrevendo este artigo o problema existia, ele recém foi corrigido. A solução do problema chegou com a versão 1.3.0 da biblioteca, então, atualize o pacote NuGet.

Suporte a múltiplos dispositivos simultaneamente

Sim, com o HotReload também temos suporte ao preview em múltiplos dispositivos simultaneamente. No entanto, algumas pequenas configurações devem ser realizadas para que tudo isso funcione conforme esperado. Novamente, o Mahmoud Ali já fez um post super detalhado explicando tudo isso e, inclusive, até criou um script para facilitar toda essa configuração.

Update: 22/06/19: Recentemente foi lançada uma atualização da extensão que faz a descoberta automática dos IPs dos devices. Fantástico! Isso significa menos configuração para iniciar nossos projetos 😉

Notificações de erros

O HotReload mostra sim as notificações dos erros, mas você precisa estar com o app executando no emulador / simulador / device enquanto realiza as alterações no XAML 🙂 Eu não havia percebido isso pois estava testando-o sem executar o app nos devices, por isso não visualizava os erros quando eles aconteciam.

Fatos interessantes

Durante os testes estava realizando alterações em uma página e tudo estava acontecendo conforme o esperado. Alterei a cor de fundo de uma tela e a cor mudou, no entanto, quando removi a cor, a mesma não foi restaurada para a padrão. Um tanto estranho, mas nada muito grave. É algo contornável e até pode ter relação com o problema citado acima no issue que referenciei. Em breve, isso deve ser superado e poderemos contar com uma ferramenta ainda melhor.

Considerações e tabela comparativa

Finalmente a comunidade pode contar com uma solução boa e gratuita. Particularmente falando, ainda gosto muito do LiveXAML por ele ser mais prático (não necessita de quaisquer workarounds), mas estou testando o HotReload e confesso que estou muito impressionado com tudo e bastante motivado, pois por ser um projeto open source, a tendência é acontecer uma evolução muito rápida desta ferramenta.

Abaixo a tabela comparativa das ferramentas de UI (agora com o HotReload incluído):

Características HotReload LiveXAML Gorilla Player XAML Previewer Xamarin Live Player
Preço Gratuito $240 ou $24/mês Gratuito Gratuito Gratuito
Suporte à custom renderers ✅ (com Gorilla SDK) ⚠️ (somente no iOS)
Suporte à effects ✅ (com Gorilla SDK) ⚠️ (somente no iOS)
Suporte à componentes de terceiros ✅ (com Gorilla SDK) -
Suporte à native views -
Suporte à ContentViews -
Suporte à ResourceDictionary -
Suporte à multiplos devices ao mesmo tempo
Notificação de erros

Por hoje é isso. Valeu, galera. Um abraço!