HotReload: uma ferramenta gratuita para desenvolvimento de UI em XAML
Tags: interfaces, xamarinforms, xaml, xamarin
Published: 2019-06-03 23:37:52

<!-- wp:paragraph -->
<p>Há um tempo escrevi um post chamado <a rel="noreferrer noopener" aria-label="Xamarin.Forms e UI – Qual ferramenta é mais produtiva? (opens in a new tab)" href="https://www.ionixjunior.com.br/xamarin-forms-e-ui-qual-ferramenta-e-mais-produtiva/" target="_blank">Xamarin.Forms e UI – Qual ferramenta é mais produtiva?</a>. Neste post, criei um comparativo entre as principais ferramentas existentes naquele momento para facilitar o desenvolvimento de apps com <strong>Xamarin.Forms</strong> usando <strong>XAML</strong>. Agora surgiu uma nova ferramenta chamada <strong>HotReload</strong>. Vamos dar uma conferida nela e compará-la junto com as demais ferramentas?</p>
<!-- /wp:paragraph -->

<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:paragraph -->
<p>Acho que uma das coisas mais fantásticas no <strong>HotReload</strong> é o fato dele ser <strong>open source</strong>! Sim, você pode conferir o <a rel="noreferrer noopener" aria-label="projeto no Github (opens in a new tab)" href="https://github.com/AndreiMisiukevich/HotReload" target="_blank">projeto no Github</a> e quem sabe até auxiliar o pessoal lá. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Não vou realizar uma introdução detalhada sobre o <strong>HotReload</strong>, pois o <a rel="noreferrer noopener" aria-label="Mahmoud Ali (opens in a new tab)" href="https://github.com/akamud" target="_blank">Mahmoud Ali</a> já fez. <a rel="noreferrer noopener" aria-label="excelente review (opens in a new tab)" href="http://high5devs.com/2019/04/hotreload-desenvolvendo-telas-mais-rapido-para-xamarin-forms-de-maneira-gratuita/" target="_blank">Aqui está o review</a> 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á!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Custo</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Essa ferramenta é gratuita! Sim, agora podemos contar com uma solução gratuita para o desenvolvimento de interfaces usando <strong>XAML</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Suporte a custom renders, effects, componente de terceiros, native views, ContentViews, animações e design time data</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Em todos esses estes quesitos o <strong>HotReload</strong> funcionou perfeitamente. Nenhum problema considerável encontrado nesses testes.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Suporte a ResourceDictionary</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>A ferramenta dá suporte ao <strong>ResourceDictionary</strong>, mas com uma ressalva. Se a tela que estamos alterando possuir um <strong>ResourceDictionary</strong> e realizamos alterações nele, nenhum problema ocorre. Entretanto, caso realizarmos alterações no <strong>ResourceDictionary</strong> 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 <em>reload</em> em ação, adicionei um novo estilo ao <strong>ResourceDictionary</strong> e tentei referenciá-lo na página. Daí a tela ficou em branco e nada mais funcionou. Mas calma, já tem até um <a href="https://github.com/AndreiMisiukevich/HotReload/issues/64">issue</a> aberto para isso e logo deverá ser resolvido.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Suporte a múltiplos dispositivos simultaneamente</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Sim, com o <strong>HotReload</strong> 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 <a rel="noreferrer noopener" href="https://github.com/akamud" target="_blank">Mahmoud Ali</a> já fez um post super detalhado explicando tudo isso e, inclusive, até criou um script para facilitar toda essa configuração.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Update: 22/06/19</strong>: 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 ;)</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Notificações de erros</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>O <strong>HotReload</strong> 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 <strong>XAML</strong> :) 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.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Fatos interessantes</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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 <em>issue</em> que referenciei. Em breve, isso deve ser superado e poderemos contar com uma ferramenta ainda melhor.</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
<h2>Considerações e tabela comparativa</h2>
<!-- /wp:heading -->

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

<!-- wp:paragraph -->
<p>Abaixo a tabela comparativa das ferramentas de <strong>UI</strong> (agora com o <strong>HotReload</strong> incluído):</p>
<!-- /wp:paragraph -->

<!-- wp:html -->
![Tabela com comparativo entre as ferramentas](https://www.ionixjunior.com.br/wp-content/uploads/2019/06/comparativo_ferramentas_ui_xaml_v2.png)
<!-- /wp:html -->

<!-- wp:paragraph -->
<p>Por hoje é isso. Valeu, galera. Um abraço!</p>
<!-- /wp:paragraph -->