DEV Community

loading...
Cover image for HotReload: uma ferramenta gratuita para desenvolvimento de UI em XAML

HotReload: uma ferramenta gratuita para desenvolvimento de UI em XAML

ionixjunior profile image Ione Souza Junior Originally published at ionixjunior.com.br Updated on ・4 min read

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?

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):

Tabela com comparativo entre as ferramentas

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

Discussion

pic
Editor guide