Minha jornada no Banco Carrefour implementando o Annecy (Android) nosso Design System
A frase é clichê, mas o ano de 2022, pra mim, foi um grande divisor de águas. Em meados de junho recebi uma proposta para iniciar o desenvolvimento do Design System (Android) do Banco Carrefour. Ao aceitar, tive uma das melhores experiências que já vivenciei como desenvolvedor Android e por isso quero compartilhar essa jornada incrível com vocês.
Annecy é o nome do nosso Design System e aqui vou compartilhar as experiências relevantes que tive no banco, e em alguns momentos vou precisar ser um pouco mais técnico, mas com certeza vai valer a pena. Sem mais demoras pegue seu café e aproveite a leitura.
Os desafios da jornada
Migrar para o Jetpack Compose
Cada um terá a vista da montanha que subir. (Ícaro Fonseca)
Desde que me aventurei no mundo de desenvolvimento de apps Android sempre utilizei o famoso .xml para criar componentes e interfaces e como isso era o que de melhor o Android Studio poderia oferecer usei por muito tempo.
Quando cheguei aqui no banco me deparei com o desafio de implementar o Annecy Android utilizando o Jetpack Compose, o que estava totalmente fora da minha área de domínio. E, como a maioria das pessoas reagem diante do desconhecido, isso pra mim foi muito amedrontador. Me questionei várias vezes se essa era a decisão mais correta a ser tomada quando grande parte do mercado ainda utiliza o modo tradicional de desenvolvimento. Depois de uma longa discussão interna decidi me aventurar no desconhecido e desbravar a vista incrível que só pude ter porque me arrisquei a subir essa montanha.
Hoje após 6 meses de experiência posso afirmar que foi a melhor decisão que tomei porque pude comprovar na prática alguns benefícios do Jetpack Compose como agilidade, baixa curva de aprendizagem e flexibilidade para criar e alterar componentes - além do que estamos alinhados as recomendações do Android para criar UI nativas.
Definir a arquitetura do projeto
Uma vez inserido no banco, outro grande desafio foi determinar a arquitetura para criar um Design System que atendesse a 2 marcas diferentes no presente e deixar aberto para poder implementar outras marcas no futuro.
Após diversas tentativas cheguei em um modelo bem interessante e que funcionou muito bem implementando diferentes marcas.
Vamos destrinchar!!!
1- Core DS
Criei o Core DS com o objetivo de ter todas as abstrações reunidas em um só lugar. Nele, inclui todos os Tokens de Design para Cores, Tipografias e Ilustrações. Além disso, criei nele o objeto AnnecyDesignSystem que, por meio do Hilt, iria saber qual marca implementar. Esse objeto será responsável por aplicar todos os estilos, ilustrações e tipografias nos componentes. Este módulo é visível a todos os módulos.
2- Brands
Nos módulos Brands dei a responsabilidade de implementar as abstrações definidas no Core DS com suas respectivas Cores, Tipografias e Ilustrações e expor essas implementações por meio dos módulos do Hilt. Este módulo só conhece o Core DS.
3- Core Components
Neste módulo criei e agrupei todos os componentes com o Jetpack Compose e incluí os ícones, aplicando os tokens por meio do objeto AnnecyDesignSystem. Este módulo também só conhece o Core DS.
Nesse ponto você deve ter se questionado o porquê de deixar os ícones no mesmo módulo dos componentes.
Como os ícones aqui no banco são comuns para todas as marcas e só mudamos o tint color, só preciso de um módulo que tenha conhecimento do objeto AnnecyDesignSystem que é o detentor das cores do tint e ele irá aplica-lás corretamente de acordo com a marca.
Definir o versionamento
Outro desafio importante foi determinar como versionar o Annecy de uma forma segura tendo em vista que teria que criar muitos componentes a cada semana e que neste meio tempo poderiam surgir bugs e melhorias.
A solução que implementei foi baseada no padrão SEMVER (https://semver.org/) com MAJOR, MINOR e PATCH. Sendo que alteramos o MAJOR em quebras de contrato, o MINOR em novas funcionalidades e o PATCH em correções de bugs.
Com isso decidi que a cada sprint (15 dias) iria gerar uma nova versão alterando o MINOR com novos componentes e quando surgisse bugs ou melhorias durante a sprint alteraria o PATCH. Fiz também uma adaptação não alterando o MAJOR porque entendi que quando uma quebra de contrato fosse necessária, faria mais sentido recriar o componente e depreciar o antigo.
Construir componentes acessíveis
Pra finalizar, o maior desafio que encontrei foi o de construir componentes acessíveis. Muitas vezes construímos coisas que acreditamos que são o que a pessoa usuária precisa. Como, por exemplo, eu gosto muito de bolo de chocolate e por isso posso ter a prepotência de acreditar que todo mundo também goste. Mas, sempre vai existir alguém que vai preferir um bolo de abacaxi (o que considero um crime por sinal) “risos”.
Por isso nada melhor do que a pessoa usuária final para definir o que é bom e o que é ruim. Nas minhas experiências anteriores criei muitos componentes com minha régua do bolo de chocolate e cheguei aqui com essa cultura, o que foi um grande erro, mas pra minha sorte aqui no banco temos pessoas usuárias de acessibilidade e QA’s peritas no assunto que me auxiliaram na fase de desenvolvimento dos componentes determinando o que é ou não acessível. Me ajudaram a descontruir a soberba do saber e com muita paciência me ensinaram sobre a importância da acessibilidade e o que realmente é esperado pelas pessoas usuárias que precisam de recursos de acessibilidade.
Pode parecer algo óbvio criar componentes acessíveis para um aplicativo nos dias de hoje, mas tente usar pelo menos 3 aplicativos relevantes no seu celular utilizando tecnologias assistivas, como o talk back com seus olhos fechados: você vai ver o abismo enorme que ainda temos que transpor. Aqui no banco criar componentes acessíveis não é uma opção é um dos pilares que sustentam o negócio e isso gera valor e impacto positivo tanto nos aplicativos do banco quanto na sociedade que se sentirá inclusa e pertencente.
Conclusão
Acredito que ainda terei muitos desafios pela frente como o de tornar público o Annecy, melhorar a estratégia de entregas entre outras coisas que falarei em um post futuro, mas no geral construir tudo isso está sendo uma experiência incrível.
Se você tiver alguma sugestão, feedback ou dúvida, sinta-se à vontade para comentar abaixo ou pode se conectar comigo no linkedin.
