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:
@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:
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:
@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
