LiveXaml vs HotReload

Thiago Bertuzzi
Jul 2 · 6 min read

Fala galera,

Tudo beleza?

Se você é um desenvolvedor mobile sabe que criar telas é uma grande parte do processo de Desenvolvimento de seus apps.

Então aproveitando mais um Tweet do Andrei Misiukevich :

Eu vou falar da Minha experiencia com o LiveXaml e o HotReload.

Quem trabalha com Xamarin.Forms desenvolve suas telas com o famoso Xaml (eXtensible Application Markup Language) a linguagem de marcação baseada em Xml.

Ficar criando a tela e executar o aplicativo toda hora pode tomar um tempo precioso do processo. Mesmo que hoje tenhamos ajuda do Preview no VisualStudio (Se não conhece veja as novidades do VisualStudio 2019 / 8 clicando aqui ) , ainda não é a ferramenta ideal que tanto queremos.

Enquanto aguardamos a Microsoft nos presentear com um Preview mais completo, existem duas ferramentas muito legais que podem facilitar nossa vida : LiveXaml e o HotReload.

Antes vale a pena citar que alem do Preview existem ferramentas como Gorilla Player e Xamarin Live Player. Mas a minha experiencia com elas não foi das melhores, então prefiro nem colocar esses 2 na comparação :) .

LiveXaml

Há muito tempo em uma galáxia muito , muito distante.. eita, texto errado. "Rollback" … Há muito tempo atras quando eu comecei com Xamarin, uma coisa que me incomodava pouco mais incomodava, era o fato de criar a tela e precisar ficar rodando o App toda vez para ver se o Layout estava correto.

Isso era trabalhoso para C… Ate tentei utilizar o Gorilla player na época, mas sinceramente eu tive tantos problemas com ele (talvez por não entender como ele funcionava e a configuração complexa) que eu desisti na época ..

Foi então que eu conheci o LiveXaml e minha vida mudou completamente.

Como existia um período de testes eu acabei utilizando um pouco e depois acabei comprando !!! Sim o LiveXaml é pago , e não é barato.. ainda mais se você mora no brasil e o Dólar (na época que escrevo esse artigo ) esta mais de 4 reais !!

O LiveXaml custa 240$ (921 R$) Licença permanente ou você pode pagar a licença mensal de 24$ (92,19 R$).

Sim é salgado, mas quando eu precisei na época foi o único que me atendeu, e como eu estava fazendo apps a todo vapor, se pagou :)

Configurando e utilizando o LiveXaml

Utilizar o LiveXaml é muito simples, basta instalar um template no VisualStudio. Existe um template para o VisualStudio do Windows e um para o VisualStudio do Mac.

Em seguida ao executar o projeto você vai se deparar com a tela de licença, basta clicar no trial de 5 dias, ou inserir o código. Caso tenha comprado :

Perfeito, agora existem duas formas de continuar.

Você pode adicionar o pacote Nuget do LiveXaml em todos os seus projetos :

Ou simplesmente fazer isso pelo template instalado :

Facil não ?

Agora basta executar o projeto e você pode ficar alterando a interface como quiser , ao salvar o Xaml o LiveXaml vai replicar em tempo real :

Facil facil !

O LiveXaml possui suporte a custom renders, effects, componentes de terceiros, native views, ContentViews, animações e etc…

Realmente foi meu companheiro por um bom tempo.. Eu digo, foi pois chegou um novo amigo …

HotReload

No começo do ano no MVPConf ,falando com meu amigo Mvp o Mahmoud ( Mud ;) ) ele me perguntou se eu tinha visto a nova versão do HotReload. Eu ja tinha testado a antiga a muito tempo atras, mas não gostava de como eram feitas as configurações. Eu disse a ele que iria testar para ver qual como seria sua perfomance e funcionalidade perto do LiveXaml que eu utilizava a muito tempo.

E então a Surpresa !! CARAMBA, FUNCIONA BEM PRA C…

Se o LiveXaml é pago seu "concorrente" HotReload é free e Opensource :O !!! Sim é isso que você leu, uma solução semelhante e de graça!

O HotReload foi feito pelo Andrei Misiukevich o mesmo criador de diversos controles que eu ja fiz artigos aqui no meu Medium.

Configurando e utilizando o HotReload

Da mesma forma que o LiveXaml para utilizar o HotReload precisamos instalar um template no VisualStudio do Windows ou para Visual studio do Mac .. o Curioso é que diferente do LiveXaml o HotReload oferece suporte para o Jetbrains Rider e você pode instalar o template clicando aqui

Após a instalação assim que você abrir um projeto Xamarin.Forms você vera a opção para habilitar o HotReload :

E no VisualStudio do Windows :

Perfeito!

Agora precisamos adicionar o pacote nuget Xamarin.HotReload em todos os projetos :

Em seguida você vai precisar de uma configuração a mais que o LiveXaml, no seu App.Xaml.cs você precisa habilitar o Reloader :

Pronto agora vamos executar o projeto :

Tem mais!!!

Se você reparar acima o HotReload permite fazer isso com o Projeto , sem o mesmo estar em execução

Muito louco não?

O HotReload identifica os emuladores de forma Automatica , mas podem acontecer alguns erros.. No próprio repositório do projeto existe a resolução para a maioria deles , e você pode ver clicando aqui.

O HotReload assim como o LiveXaml ,possui suporte a custom renders, effects, componentes de terceiros, native views, ContentViews, animações e etc…

OK ! Hora de Comparar.

LiveXaml vs HotReload

Não vou me estender sobre erros e configurações , pois este é um artigo comparativo, então vou fazer apenas as configurações básicas dos dois e explicar alguns pontos.

O HotReload leva uma enorme vantagem no preço! É gratuito !!

Os dois permitem utilizar os Emuladores de forma simultânea, porem com o LiveXaml trabalha com o Projeto em execução, você precisa abrir um app em um Emulador e executar o projeto no outro.

Os dois exibem notificações de Erros, mas nesse ponto você precisa estar com HotReload em execução.

E no Mundo Real ? Porque com NewProject é facil hahahaha

Vou abrir um projeto meu com uma interface que parece simples, mas carrega diversos controles customizados (custom renderes e etc ) e vamos ver com os dois se comportam:

HotReload :

LiveXaml :

Em Resumo os dois funcionam muito bem , mas por ser gratuito e funcionar muito bem, hoje eu Recomendo o HotReload :)

Deixo aqui tambem 2 Artigos sensacionais do Meu Amigo Ione, comparando outras ferramentas de UI para Xamarin forms :

Quer ver outros artigos sobre Xamarin ? Clique aqui.

Espero ter ajudado!

Aquele abraço!

Thiago Bertuzzi

Written by

Microsoft MVP,Gamer, Desenvolvedor e apaixonado por tecnologia!