Apesar de trabalhar com Xamarin desde a época em que se chamava MonoTouch, nos últimos 2 anos eu praticamente só tenho trabalhado em projetos Xamarin.Forms, sempre fazendo as telas com XAML, e pra mim, sem sombra de dúvidas, a pior parte de trabalhar com Xamarin.Forms é fazer ajustes finos nas telas, todo o processo leva muito tempo: escrever código, recompilar, refazer o deploy. Nesse quesito quase todas as outras plataformas estão à frente do Xamarin.Forms.
Testei várias ferramentas que prometem solucionar isso: Gorilla Player, Xamarin Previewer, Xamarin Live Player, entre outros. Todos eles possuem alguma limitação que o torna impraticável em cenários do mundo real, que não sejam apenas demoware. Até que eu decidi testar o LiveXAML por um tempo, e posso dizer que finalmente encontrei uma ferramenta perfeita para mexer com XAML no Xamarin.Forms.
Vantagens do LiveXAML
Eu testei o LiveXAML em um projeto real, na época com mais de 15 XAMLs, utilizando Prism, custom renderers, converters, content views, styles, MVVM e tudo que o Xamarin.Forms me dá direito. A experiência foi incrível, o LiveXAML simplesmente funciona, e eu senti minha produtividade dar um salto enorme. Estimo que para cada tela complexa que levaria 1 dia pra ser feita, eu estava conseguindo deixá-la exatamente de acordo com a especificação do time de Design em 1 hora. Deixar a tela pixel-perfect não era mais um problema.
A grande sacada do LiveXAML é que ele só roda quando sua aplicação está sendo debugada. Mas por que isso é tão importante? A maioria das outra soluções que testei têm suas limitações justamente porque o código não é executado, e sim interpretado, com isso surgem vários problemas: converters não funcionam, componentes customizados não são renderizados, detalhes de customização não aparecem corretamente. Ao executar seu código o LiveXAML soluciona automaticamente todos esses problemas.
O LiveXAML é capaz de exibir instantaneamente o seu XAML pegando qualquer binding feito no C#, numa ViewModel, isso significa que ele automaticamente soluciona outro problema dos seus concorrentes: ele é capaz de renderizar ListViews e outras estruturas de dados corretamente. Se o seu código carrega essas informações de um banco de dados, não tem problema, afinal, é o seu código sendo executado de fato. Veja no exemplo abaixo a experiência de editar uma estrutura complexa com o LiveXAML.
Outra grande vantagem do LiveXAML é que para utilizá-lo você só precisa fazer duas coisas:
- Instalar a extensão na sua IDE. Ele funciona para Windows ou para Mac.
- Instalar o NuGet package LiveXAML
E é só isso! Nada de sujar seu código com instruções para o carregamento.
Exemplos
O LiveXAML não atualiza apenas o XAML aberto e fica “preso” nele, ele é capaz de atualizar qualquer XAML que influencie na sua tela. No exemplo abaixo estou enxergando a tela MainPage mas estou atualizando um estilo global que está declarado no arquivo App.xaml, e tudo funciona como esperado.
Outro recurso interessante, é que assim que eu altero o XAML, o LiveXAML automaticamente renderiza a tela de novo, inclusive forçando meus converters a serem recalculados.
Repare que no exemplo abaixo eu tinha errado o nome da property FirstLogin, e por isso, o switch de “Manter logado” estava aparecendo. Quando eu arrumo o nome da property, eu bato num breakpoint no meu converter, pois ele está sendo recalculado, e consequentemente o XAML é atualizado corretamente: escondendo o switch.
Conclusão
O LiveXAML não demonstrou nenhuma limitação até o momento, a ferramenta está sempre sendo atualizada para melhorar performance e corrigir bugs, além disso, ela funcionou muito bem comigo, tanto no Mac quanto no Windows.
Com LiveXAML, quem trabalha com Xamarin.Forms finalmente terá a produtividade que outras plataformas de desenvolvimento mobile oferecem.
O ponto que pode ser o problema dependendo do seu cenário é que o LiveXAML é pago, mas tem um trial pra você poder testar. Depois de testar eu tive certeza de que ele vale cada centavo que ganhei em produtividade. Faça um trial e veja o que acha, levando em conta o tempo gasto fazendo telas.
Imagem usada no post: Pexels
(Cross-post de: http://high5devs.com/2017/12/livexaml-desenvolvendo-telas-para-xamarin-forms-jeito-certo/)
Mahmoud Ali
Desenvolvedor de Software na Lambda3, Microsoft MVP, amante de um bom café ☕️ e uma boa cerveja 🍺.