No desenvolvimento frontend, um dos maiores desafios é oferecer uma experiência de usuário fluida e rápida. Os usuários modernos esperam que os aplicativos respondam imediatamente, sem atrasos ou interrupções. É aqui que o conceito de UI otimista.

O que é UI otimista?

Optimistic UI, ou Optimistic User Interface, é uma técnica de desenvolvimento na qual o aplicativo assume imediatamente o sucesso de uma ação do usuário e atualiza a interface de acordo, mesmo antes de receber a confirmação do servidor.

Vantagens da UI otimista

1. - Melhorar a experiência do usuário: Ao reduzir o tempo de espera percebido, o aplicativo parece mais rápido e responsivo.
2. - Aumenta a interatividade: os usuários podem continuar interagindo com o aplicativo sem interrupções.
3. - Atrito reduzido: Minimiza a frustração do usuário por não ter que esperar a conclusão das ações.

Implementação de UI otimista

Para ilustrar como implementar a UI Optimistic, vamos considerar um exemplo comum: um aplicativo de tarefas onde os usuários podem adicionar e remover itens de uma lista.

Etapa 1: atualização otimista da interface do usuário

Primeiro, atualizamos a IU imediatamente após o usuário realizar uma ação, como adicionar uma nova tarefa.

const addTask = async (newTask) => {
  // Actualización optimista de la UI
  setTasks([...tasks, newTask]);

  try {
    // Enviar la nueva tarea al servidor
    await api.addTask(newTask);
  } catch (error) {
    // Revertir la UI en caso de error
    setTasks(tasks);
    console.error('Error al añadir la tarea:', error);
  }
};

Etapa 2: tratamento de erros

É crucial lidar com possíveis erros do servidor e reverter a UI caso algo dê errado.

const addTask = async (newTask) => {
  const previousTasks = [...tasks];

  // Actualización optimista de la UI
  setTasks([...tasks, newTask]);

  try {
    // Enviar la nueva tarea al servidor
    await api.addTask(newTask);
  } catch (error) {
    // Revertir la UI en caso de error
    setTasks(previousTasks);
    console.error('Error al añadir la tarea:', error);
  }
};

Etapa 3: Sincronização com o servidor

Em alguns casos, pode ser necessário sincronizar o estado da UI com o servidor após realizar várias ações otimistas.

const syncTasksWithServer = async () => {
  try {
    const serverTasks = await api.getTasks();
    setTasks(serverTasks);
  } catch (error) {
    console.error('Error al sincronizar las tareas con el servidor:', error);
  }
};

// Llamada a la función de sincronización en intervalos regulares o en ciertos eventos
useEffect(() => {
  const interval = setInterval(syncTasksWithServer, 60000);
  return () => clearInterval(interval);
}, []);

Casos de uso para UI otimista

A UI otimista é especialmente útil em aplicativos onde a latência do servidor pode afetar a experiência do usuário:

• Aplicativos de mensagens: envie mensagens sem esperar pela confirmação do servidor.
• Sistemas de gerenciamento de conteúdo: edite e publique conteúdo sem atrasos.
• Plataformas de comércio eletrônico: Adicione ou remova produtos do carrinho de compras instantaneamente.

Conclusão

Optimistic UI é uma técnica poderosa que pode transformar a experiência do usuário em seus aplicativos, tornando-os mais rápidos e fluidos. Embora exija tratamento cuidadoso de erros e sincronização, os benefícios superam em muito os desafios.