Squad Front

Appearance

Programação Reativa e UI Orientada a Estado ​

Nossa arquitetura abraça o paradigma da Programação Reativa, onde a interface do usuário (UI) não manipula o DOM diretamente, mas sim "reage" a mudanças no estado e fluxos de dados contínuos.

O Conceito de Fluxos (Streams) ​

Diferente da programação imperativa (onde você diz "mude a cor do botão agora"), na reativa nós definimos: "a cor do botão depende do status da conexão".

Em nosso sistema, os fluxos reativos vêm de diversas fontes:

  1. Mudanças na Store: Via Selectors do Redux.
  2. Eventos de Domínio: Via barramento de eventos.
  3. Sinalização em Tempo Real: Via WebSockets (ex: sinal de batimento cardíaco ou posição na fila).
  4. Máquinas de Estado: Transições de status no XState.

UI como Função do Estado: UI = f(State) ​

Seguimos o princípio de que a interface deve ser uma representação visual pura do estado atual.

text
[Ação do Usuário] -> [Dispatcher/Saga] -> [Update State] -> [UI Reage Automaticamente]

Exemplo: Reatividade em Teleconsulta ​

Quando o sinal de internet do paciente oscila:

  1. O Core/WebSockets detecta a perda de pacotes.
  2. Uma Action é disparada informando a queda de qualidade.
  3. O estado da SessionMachine transita para RECONECTANDO.
  4. A UI, que está "ouvindo" essa máquina, automaticamente exibe um overlay de "Instabilidade de conexão" e desabilita o chat.
  5. Tudo isso sem o desenvolvedor precisar escrever lógica de "esconder/mostrar" manualmente em cada componente.

Vantagens para o Ecossistema Médico ​

1. Baixa Carga Cognitiva ​

O desenvolvedor foca em como o estado deve mudar e não em como a UI deve parecer após cada pequena mudança. Isso reduz bugs de interface "travada" ou em estados inconsistentes.

2. Resiliência a Eventos Assíncronos ​

Sistemas de saúde são inerentemente assíncronos (exames que demoram a carregar, sinais vitais que chegam a cada segundo). A programação reativa permite lidar com essa enxurrada de dados de forma organizada e performática.

3. Desacoplamento Total ​

O componente que exibe a fila de espera não sabe quem atualizou a fila (se foi um WebSocket, um polling de API ou uma ação manual). Ele apenas reage ao fato de que a lista na Store mudou.

Ferramentas e Padrões Reativos Utilizados ​

  • React Hooks (useSelector, useMachine): Pontos de entrada para a reatividade nos componentes.
  • Redux-Saga: Gerencia fluxos reativos complexos de efeitos colaterais.
  • Event Bus: Permite que domínios reajam a eventos uns dos outros de forma desacoplada.

A programação reativa transforma a interface em um sistema dinâmico e vivo, capaz de refletir a realidade clínica em tempo real com precisão e fluidez.