Smart e Dumb Components no Flutter: Guia Prático.

Introdução

Em desenvolvimento de software, especialmente em frameworks Javascript como React, Vue e Angular, os conceitos de Smart Components e Dumb Components são fundamentais para a criação de interfaces de usuário mais organizadas, reutilizáveis e eficientes. Mas o que são esses conceitos?

Para ilustrar, vamos imaginar que sua aplicação é um apiário (conjunto de colmeias) e que objetivo da sua aplicação é justamente a produção de mel.

Smart Components

No nosso apiário as abelhas rainhas são os Smart Components. Elas são responsáveis por tomar decisões importantes dentro de cada colmeia. Elas fazem o seu controle, determinam a produção de novas abelhas e organizam as tarefas das abelhas operárias. Elas têm uma visão completa do funcionamento de sua colmeia e gerenciam as operações para garantir que tudo funcione sem problemas. As abelhas rainhas:

• Têm muita responsabilidade.
• Tomam decisões complexas.
• Gerenciam a comunicação entre diferentes partes da colmeia.
• Sabem quais tarefas estão sendo executadas e quando precisam ser concluídas.

O papel principal de um Smart Component é gerenciar o estado e a lógica da aplicação ou de parte dela. Isso significa que ele controla como obter as informações, como exibir e como essas informações mudam ao longo do tempo.

Em resumo, Smart Components são a parte ativa e inteligente de uma aplicação. Eles são os responsáveis por fazer com que as coisas aconteçam, respondendo às interações do usuário e às mudanças nos dados.

Um exemplo prático e bem básico utilizando Flutter é a própria tela de contagem de clicks:

class CounterApp extends StatefulWidget { @override _CounterAppState createState() => _CounterAppState();
} class _CounterAppState extends State<CounterApp> { int _counter = 0; void _incrementCounter() { setState(() { _counter++; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Contador'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Você pressionou o botão $_counter vezes', ), ElevatedButton( onPressed: _incrementCounter, child: Text('Contar'), ), ], ), ), ); }
}

Neste exemplo, o CounterApp é um Smart Component. Ele gerencia o estado do contador _counter, define a lógica para incrementar o contador _incrementCounter e renderiza a interface do usuário.

Dumb Component

Já as abelhas operárias do nosso apiário são os Dumb Components. Elas têm tarefas mais simples e específicas, como coletam néctar, produzem mel e cuidam das larvas.

Apesar da tradução para o português ser “burro”, o “dumb” trás a ideia de que esses componentes são mais simples e sem nenhuma regra de negócio, assim como as operárias. Elas não precisam entender o funcionamento completo do apiário ou sequer da colmeia, elas apenas fazem bem suas tarefas com base nas instruções que recebem das abelhas rainhas. As abelhas operárias:

• Têm responsabilidade limitada.
• Realizam tarefas específicas e repetitivas.
• Não tomam decisões complexas.
• Dependem das instruções das abelhas rainhas.

Um exemplo disso em Flutter seria um botão customizável que recebe uma cor, um texto e uma função a ser executada ao ser pressionado. Esse botão não sabe o que a função faz, apenas a executa quando necessário:

class CustomButton extends StatelessWidget { final Color color; final String text; final VoidCallback onPressed; const CustomButton({ super.key, required this.color, required this.text, required this.onPressed, }); @override Widget build(BuildContext context) { return ElevatedButton( style: ElevatedButton.styleFrom( primary: color, ), onPressed: onPressed, child: Text(text), ); }
}

O uso desse botão, dentro de uma aplicação seria:

class MyHomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Minha Página'), ), body: Center( child: CustomButton( color: Colors.blue, text: 'Clique aqui', onPressed: () { // Lógica a ser executada quando o botão for pressionado print('Botão pressionado!'); }, ), ), ); }
}

Neste exemplo demonstra como criar um componente simples e reutilizável em Flutter, focando apenas na apresentação visual.

E porque usar?

Usar esses conceitos trás diversas vantagens, além de estar alinhada com conceitos do SOLID e do Clean. Como por exemplo:

• Separação de responsabilidades: Facilita a compreensão e a manutenção do código;
• Reutilização: Dumb Components podem ser usados em diversos lugares;
• Teste: Facilita a criação de testes unitários, pois os componentes são mais isolados;
• Melhora a performance: Ao separar a lógica da apresentação, é possível otimizar a renderização e alocação de memória;

Conclusão

Ao longo desta conversa, exploramos a fundo os conceitos de Smart e Dumb Components e como eles se relacionam com os princípios SOLID e Clean Code.

• Smart Components são os “cérebros” da aplicação, responsáveis por gerenciar o estado, tomar decisões e coordenar outras partes do sistema.
• Dumb Components são os “operários” da aplicação, focados em exibir informações na tela de forma clara e concisa.

A analogia com as abelhas e a colmeia é uma forma interessante de visualizar essa divisão de responsabilidades. Cada abelha tem um papel específico, e todas trabalham juntas para o bem da colmeia e do apiario. Da mesma forma, cada componente em uma aplicação tem uma função específica, e todos trabalham juntos para criar uma experiência de usuário coesa.

Em conclusão, a utilização de Smart e Dumb Components é uma prática recomendada para o desenvolvimento de aplicações modernas. Ao entender os princípios por trás dessa abordagem, você será capaz de criar software mais robusto, escalável e fácil de manter.

E ai? Quais outros tópicos você quer ver por aqui? Você concorda, discorda? Deixe seu comentário!

Referência Bibliográfica:

Componentes React: Dumb vs Smart, NCB{code}. Disponível em: https://www.tautorn.com.br/docs/react/dumb-e-smart-components Acesso em 29 de julho de 2024.

Smart e Dumb Components: Maximizando a Eficiência do Desenvolvimento Front-End, ADSON MARTINS. Disponível em: https://medium.com/@adson.martins982/smart-e-dumb-components-maximizando-a-efici%C3%AAncia-do-desenvolvimento-front-end-817acd6f36f1. Acesso em 29 de julho de 2024.

Dumb e Smart Components, TAUTORN. Disponível em: https://www.tautorn.com.br/docs/react/dumb-e-smart-components. Acesso em 29 de julho de 2024.

Foto de Annie Spratt na Unsplash