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?
O Jetpack Compose é um framework Android utilizado para criar interfaces de forma declarativa com APIs em Kotlin. Surgiu para suprir uma demanda de longa data dos desenvolvedores: uma maneira moderna e eficiente para desenvolver a camada de UI em aplicações Android.
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?
Pensando em Compose:
Assim como em React Native, Flutter e Swift UI, o Compose utiliza a abordagem de UI declarativa de composição de componentes, isto é, a hierarquia de componentes é redesenhada automaticamente quando o seu estado interno é modificado.
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...
O desenvolvimento em Compose é bem atrativo, logo é importante considerar também a realização de testes — parte essencial do ciclo de desenvolvimento.
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.
Como arquitetar um app em Compose?
A arquitetura em Compose é construída assumindo que a UI é imutável, ou seja, depois de desenhada não há como atualizá-la. O que pode ser controlado é o estado da UI, que sinaliza quais partes da UI devem ser redesenhadas quando ele é alterado.
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
A maior vantagem do compose sob o nativo é, sem sombra de dúvidas, o Design, ou melhor, a facilidade de construir UIs robustas com elementos simples.
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?
O JetPack Compose é a aposta do Google para os próximos anos do desenvolvimento de UI em Android. Com a promessa de melhorar a experiência de desenvolvedores e desenvolvedoras com maior produtividade e menos código, é importante se atentar à evolução do mais novo 'queridinho' da gigante de tecnologia.
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.
