UnidirectionalDataFlow + JetpackCompose = ❤️
Olá! Lucas Wottrich aqui :)
Hoje vamos conversar um pouco sobre o design pattern Unidirectional Data Flow (UDF) e como ele se deu bem com um carinha que nós, desenvolvedores android, estamos ficando cada dia mais apaixonados: O JetpackCompose.
Dessa vez não temos projeto de exemplo, por ser um papo mais informal sobre o assunto do que de fato algo mais prático.
O que é importante saber para entender o artigo:
- Ter uma noção básica de Jetpack Compose
🚡 UnidirectionalDataFlow (UDF)
Explicar literalmente o que o unidirectional data flow vai fazer ele parecer muito simples, o que ele não deixa de ser, então traduzindo ele temos: um fluxo de dados unidirecional, ou seja, um fluxo de dados que segue apenas uma direção.
Pra não pensarmos que um UDF é uma linha reta, podemos desenhar/arquitetar ele de diversas formas possíveis, como essas de exemplo:
Calm down! 🙇
Se você não conhece nada sobre esse design pattern essa imagem acima pode parecer um pouco confusa, mas não se preocupe conforme você for lendo o artigo ela vai começar a fazer sentido!
🔬Porque usar Unidirectional Data Flow?
Esse design pattern começou a ficar muito famoso na programação funcional reativa por transformar os states da tela em situações tão previsíveis quando os próprios ciclos da aplicação.
Quando acontece qualquer evento na camada da UI sabemos que existe um estado que está pronto para responder a esse evento. Isso nos da controle de situações sensíveis que podem acontecer no código.
Vamos ver um exemplo! 👷
Imagine que temos uma tela. Quando entramos nessa tela o estado inicial dela é State.InitialState, mas a UI ainda não sabe disso, então precisamos avisar para ela qual estado ela deve mostrar:
Nesse momento conseguimos ver uma das ideais do UDF, manter o State tão previsível quando os próprios ciclos da aplicação. Então o State.InitialState representa fielmente o que temos na tela: UI.InitialState.
Agora vamos imaginar mais um pouco! 💭
A tela está em seu estado inicial e o usuário faz alguma ação(evento) que dispara uma requisição, vamos chamar esse evento de Event.FetchData. Nesse momento esse evento vai em direção ao nosso State para avisar que devemos tomar alguma ação pois a UI não pode mais ser a mesma!
A primeira reação ao carregar uma nova requisição é apresentar um loading, então o State prontamente notifica a tela que ela deve representar um novo estado chamado State.LoadingState, enquanto não temos uma resposta da requisição:
Assim que a requisição retornar temos um novo estado para apresentar na tela, que vamos chamar de State.SuccessState:
Em todo esse processo o State continuou mostrando fielmente o que estava sendo apresentado na tela. Caso houvesse algum erro ou bug nesse processo saberíamos exatamente onde procurar.
Como podemos ver esse design pattern pode ser utilizado em qualquer arquitetura que quisermos, basta termos um controle de Events e States que trocam informações em um fluxo unidirecional.
💡 Então porque é recomendado utilizar UDF com Compose?
No Compose a UI é imutável, ou seja, ela não pode ser atualizada depois de ser desenhada uma primeira vez. Mas o que pode ser mudado é o estado da UI.
Cada vez que o estado da UI muda, o Compose recria as partes da árvore da UI que mudaram.
Isso ficou conhecido no Compose como Recomposition.
Por causa disso as funções Composable aceitam estados e conseguem expor eventos.
Vamos ver um exemplo! 👷
Vamos pensar em um botão com dois estados: Normal e Loading.
No compose podemos escrever ele assim:
Se olharmos para os parâmetros conseguimos ver claramente que uma função Composable representa algo parecido com o design pattern Unidirectional Data Flow, onde temos um State para trocar a UI e um Event para a ação do usuário.
Se botarmos ambos lado a lado:
Os dois simplesmente se completam! ❤️
Por esse motivo é recomendado utilizar esse design pattern quando for desenvolver com JetpackCompose.
🍥 Conclusão
Com esse artigo conseguimos entender o porquê de tanta gente estar falando sobre Unidirectional Data Flow com nosso queridinho do momento: JetpackCompose.
🎉 Obrigado!!
Chegamos no fim desse artigo, muito obrigado por ter separado esse tempo do seu dia para ler :)
Se você gostou e acha que mereço o seu 👏(clap), por favor, sinta-se a vontade. ❤️
Tenha um bom resto de dia!
Até a próxima.
👋Agradecimentos
Agradecimentos ao Pablo Baldez, Felipe Castilhos e Roque Buarque por ajudarem na revisão e sugestões para o artigo
