(Débito Técnico Outsystems ⭕️ ) Architecture Dashboard CSS Inline 🤬

Oi seus lindos 👋🏻, tive o privilégio de participar de algumas lives na Trusted com James e com uma moça simpática da NTT que gosta muito de frontend.

Na Live chegamos a falar do famoso CSS Inline o terror das coisas que não fazem os seu layout funcionar direito, que você nem sabe de onde vem.

Então como resolver esse debito técnico ? o James falou de uma nova funcionalidade que o Outsystems possui e que poucas pessoas falam, pois ela é um easter egg escondido.

Na verdade eu cheguei a usar ela em um projeto que não tinha theme nenhum, que era um chatbot, foi assim que consegui achar um pouco de organização no CAOS. Então vamos lá !!

Trabalho de 🐒 inho ( Mode ON )

Primeiro antes de xingar o coleguinha do lado, vamos agradecer a Outsystems que facilitou nossa vida com funcionalidades bastante uteis. Então vamos a ela :

Primeiro acesse o Widget Tree e clique em um elemento qualquer para selecionar a aba de Styles :

Nada de novo até aqui, contudo rola um pouco mais para baixo jovem gafanhoto e veras que nem tudo na vida está perdido.

Como podem ver existe um botão mágico (que na minha opinião deveria ser da cor vermelha para chamar um pouco de atenção ) que se chama Save change to reusable class.

Mentirahhhhhh, juro powww, clica nele se tu tiver a mesma situação acima e veja a mágica acontecer.

Como podem ver o Outsystems pergunta o nome da classe que deseja criar e adiciona no seu theme a classe e suas equivalências.

Duas estratégias possíveis

Agora que já sabemos o truque fica fácil, agora temos duas opções disponíveis na mesa, uma com Architecture Dashboard e outra sem.

Opção 1 (Architecture Dash):

Melhor cenário possível, aqui você abre o report do seu app e procura o débito técnico CSS inline na categoria performance e vai de modo cirúrgico em cada tela.

Opção 2 (Sem Architecture Dash):

Aqui como diria na minha terra “Só lamento”, você tera que ir screen por screen widget por widget olhando quem tá com style preenchido não esquecendo de olhar na opção properties, porque também é possível adicionar a tag style lá.

Pois é, foi assim que eu fiz, levei cerca de um dia todo para revisar uma aplicação, mas no final deu tudo certo.

Conclusão

Você sabia que até programando existe hábitos, sim , eles são chamados de boas práticas ou como Uncle Bob gostou de chamar Clean Code.

São pequenas coisas que fazemos durante nosso desenvolvimento que custara horas / dias / meses de refatoração.

Então não deixe que o GO Hourse seja o guia, existe momentos para isso, mas também existe momentos para olhar para trás e corrigir com mais calma para evitar bolas de neve.

Eiiiii me ajuda ai vai !? deixa uma palminhaaaa 👋🏻 e clica em seguir para mais conteúdos legais.