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

Blog