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!

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade