Alpine.js and Livewire

Esta regla aclara cuándo usar Alpine.js para la interactividad y cuándo usar componentes de Livewire para lógica frontend compleja en vistas Blade.
Alpine.js está pensado para interacciones simples y pequeños fragmentos de comportamiento dinámico directamente en plantillas Blade.

• Usa Alpine.js para alternancias simples de UI, pequeñas animaciones, propiedades reactivas básicas y manejo de eventos que no requiera comunicación con el backend ni estado complejo.
• Evita incrustar cualquiera de los siguientes comportamientos complejos en Alpine.js dentro de plantillas Blade:
  • Temporizadores, intervalos o lógica de reloj.
  • Implementaciones de arrastrar y soltar.
  • Flujos de trabajo de varios pasos o secuencias condicionales.
  • Gestión de estado compleja que involucre múltiples propiedades relacionadas.
  • Lógica de ordenación o clasificación.
  • Estructuras de datos extendidas (arrays, objetos) más allá de indicadores reactivos muy simples.

Livewire debe usarse para lógica de UI compleja, gestión de estado, interacciones con el servidor y flujos de trabajo de usuario de varios pasos.

• Mueve toda la lógica JavaScript sustancial, el comportamiento con estado, los temporizadores, la ordenación y las interacciones de varios pasos impulsadas por eventos fuera de Alpine.js y hacia componentes de Livewire.
• Los componentes de Livewire gestionan la coordinación con el backend, el estado de larga duración, la obtención de datos, la gestión del estado de formularios y las transiciones del flujo de trabajo.

Excepciones de rendimiento:

• Si Livewire provoca una latencia de UI inaceptable para actualizaciones o animaciones muy rápidas, Alpine.js puede usarse con cautela.
• El uso de Alpine.js por motivos de rendimiento debe documentarse explícitamente con comentarios justificados que hagan referencia a esta regla.

Marca las vistas Blade que incrusten código de Alpine.js que implemente:

• Intervalos de temporizador o reloj.
• Reordenación mediante arrastrar y soltar.
• Lógica de ordenación o clasificación.
• Coordinación de múltiples estados que involucre varias propiedades.
• Flujos de trabajo complejos impulsados por eventos.

Cuando se marque, recomienda mover esa lógica a un componente de Livewire. No exijas comentarios de documentación a menos que Alpine.js se use intencionadamente para lógica compleja como una excepción de rendimiento documentada.
Ejemplos:

<!-- Simple Alpine toggle example -->
<div x-data="{ open: false }">
    <button @click="open = !open">Toggle</button>
    <div x-show="open">Content</div>
</div>

// Complex Livewire component example
class TaskTracker extends Livewire\Component
{
    public $activeTask;
    public $timerSeconds = 0;

    public function startTimer() { /* ... */ }
    public function stopTimer() { /* ... */ }

    public function render()
    {
        return view('livewire.task-tracker');
    }
}