Afinal, o que é Jetpack Compose?

Vamos entender a nova aposta do Google

Desde o primeiro anúncio, feito na Google IO 2019, o Compose está sendo uma promessa do Google. Mas por que um framework tão recente, que ainda está em versão beta, vem recebendo tamanha atenção, tanto da Jetbrains — empresa que desenvolve a linguagem Kotlin — quanto do Google?

Neste post vamos fazer um overview de como as coisas funcionam no mundo do Compose — baseado nos estudos e práticas do Projeto de Pesquisa e Desenvolvimento da Concrete — e entender melhor o que tende a ser o futuro do Android.

O que é? Quais são os grandes benefícios?

A principal vantagem do desenvolvimento em Jetpack é que o fluxo de criar a UI é intuitivo e acelerado, com muito menos código do que com o XML. O framework ainda permite a interoperabilidade com o framework nativo do Android, ou seja, o Compose pode ser adotado no nativo assim como componentes do nativo podem ser usados no Compose.

Além dos benefícios do Compose sob o nativo, existem ferramentas que facilitam o processo de desenvolvimento e um editor inteligente que melhora ainda mais a experiência do desenvolvedor. Olha alguns exemplos:

  • Composable Preview: por meio de uma anotação de @Preview em uma função @Composable, na aba Split e/ou design do Android Studio, é possível visualizar o componente criado;
  • Modo Iterativo: nessa ferramenta, é possível interagir com a visualização no próprio Android Studio e testar diferentes funcionalidades, como alterar o estado de um radiobutton, sem a necessidade de um emulador;
  • Deploy Preview: nesta funcionalidade é possível rodar um @Preview — clicando no ícone do emulador na opção ‘Run’ — diretamente no emulador o que permite, além de uma simulação mais verossímil, utilizar as permissões e o contexto geral da aplicação.

Mas afinal, como ele funciona?

No Android Nativo, como é o processo?
No XML, a visualização aparece como uma árvore de widgets de UI e, a medida em que o estado da aplicação muda, é necessário atualizar a hierarquia percorrendo o estado interno dos widgets.

No entanto, nos últimos anos, vários frameworks de UI começaram a adotar o modelo de UI declarativa. Segundo a própria documentação do Compose “a técnica consiste em gerar de forma conceitual toda a tela do zero novamente e aplicar apenas as mudanças necessárias”, o que evita a complexidade de atualizar manualmente uma hierarquia de visualizações com estado.

Gerar uma tela inteira novamente tem alto custo de tempo, recursos computacionais e uso da bateria. Para otimizar o processo, o Jetpack redesenha partes da UI para serem desenhadas em um momento específico.

1, 2, testando...

Para testar a UI, é necessário definir funções que podem ser compostas, ou seja, que não têm um ID ou uma descrição do conteúdo, e que emitem a UI. Já em testes de API, se você já usou a lib Espresso vai reparar que no Compose a semântica é bem parecida.

Exemplo de teste em Compose

Como arquitetar um app em Compose?

Logo, a arquitetura considera que os dados fluem para baixo e os eventos para cima como na imagem a seguir:

Este comportamento é conhecido como fluxo de dados unidirecional

  • Evento: parte da UI gera um evento e o passa para camadas superiores que controlam o estado;
  • Estado de atualização: um manipulador de eventos pode alterar o estado;
  • Estado de exibição: o detentor do estado transmite o estado para camadas inferiores e atualiza a UI.

Seguir esse padrão no Compose tem como vantagens os testes — que podem ser feitos facilmente de maneira isolada -, o encapsulamento de estados que como só pode ser atualizado em um lugar evita a criação de bugs por inconsistência, e todas as atualizações de estado são refletidas imediatamente na UI pelo uso de detentores de estado observáveis, como LiveData.

O maior ganho do Jetpack Compose: o Design

Os elementos de layout padrão existem e são a base para quase todas as telas que serão construídas. São eles:

  • Column: utilizado para colocar itens na vertical;
  • Row: usado para colocar itens na horizontal;
  • Box: agrupa elementos um dentro do outro;

Além dos elementos padrões, existem os Modificadores, que permitem mudar o tamanho, o layout e o comportamento do elemento, adicionar informações relacionadas à acessibilidade, receber interações do usuário e tornar um item clicável, rolável, arrastável ou redimensionável.

Assim como outros itens, a criação de listas se dá de uma maneira simples com LazyColumn (lista na vertical) ou de um LazyRow (lista na horizontal). Algumas funções de listas mais comuns, como com cabeçalho fixo ou grade de imagens, estão sendo desenvolvidas mas neste momento ainda estão em versões instáveis.

As animações são essenciais para proporcionar uma experiência ainda melhor ao usuário, e o Compose oferece diversas APIs avançadas que facilitam a implementação delas. São divididas em animações de alto nível, como Animated Visibility e animateContentSize; e animações de baixo nível como animate*AsState e Animatable.

Para desenvolver UI em Jetpack precisamos dos requisitos mínimos:

  • Android Studio Beta ou Canary;
  • Kotlin 1.5.10;
  • Roda em devices Android 5.0 (Api level 21) ou superior;

Por ser criado em Kotlin, o Jetpack pode ser utilizado com Java e tem acesso às APIs do Android e do Jetpack.

Mas e o futuro do Compose?

E aí, ficou curioso para explorar o JetPack Compose? Acesse os conteúdos que o Google vem desenvolvendo para a comunidade acompanhar o desenvolvimento! Aqui temos alguns exemplos:

Tem alguma dúvida ou tem algo a compartilhar? Use os campos de comentários! E se você quiser fazer parte de um time que está sempre ligado nas novidades, é só dar uma olhada aqui e se candidatar a uma de nossas vagas. Vamos aprender juntos! Até a próxima.

Digital Product Dev

Nós desenvolvemos produtos digitais com inovação, agilidade…

Digital Product Dev

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.

Digital Product Dev

Nós desenvolvemos produtos digitais com inovação, agilidade e excelentes práticas, para que o mercado brasileiro e latino-americano acompanhe a velocidade do mercado digital mundial.