Livewire vs Inertia.js

En el mundo del desarrollo web, una pregunta recurrente entre los desarrolladores de Laravel es: "¿Debería aprender y utilizar Livewire o Inertia.js?" La respuesta a esta pregunta puede variar según las necesidades individuales, pero en este artículo, vamos a comparar estas dos herramientas y proporcionar un contexto que te ayudará a tomar una decisión informada.

Antecedentes: Resolviendo el problema de las SPA

En los últimos años, las aplicaciones de una sola página (SPA) se han vuelto populares. Estas aplicaciones cargan JavaScript y activos una vez, y luego los enlaces en la página no recargan la página completa, sino solo partes específicas. Esto mejora la experiencia del usuario, pero la creación de SPA puede ser un proceso complicado, ya que implica gestionar tanto el front-end como el back-end, además de abordar desafíos como el enrutamiento y la seguridad. Para simplificar este proceso, surgieron Livewire e Inertia.js casi al mismo tiempo, y ambos ganaron popularidad rápidamente.

Livewire e Inertia tienen un objetivo común: simplificar la creación de SPAs. Sin embargo, lo hacen de manera diferente. Livewire está diseñado principalmente para desarrolladores de Laravel que desean centrarse en el back-end sin preocuparse por JavaScript. Por otro lado, Inertia se dirige a desarrolladores familiarizados con Vue o React que desean simplificar su flujo de trabajo sin necesidad de crear una API separada o lidiar con enrutamiento y gestión de estados.

La diferencia principal entre Livewire e Inertia radica en el público al que se dirigen. Incluso sus URL reflejan esta distinción:

• laravel-livewire.com ("laravel" en la URL)
• inertiajs.com ("js" en la URL)

Simplicidad: Livewire, la elección de los desarrolladores de Back-End

Si eres un desarrollador de back-end que necesita crear rápidamente un proyecto con elementos dinámicos en la página, Livewire es probablemente la mejor opción para ti. Livewire te permite seguir trabajando dentro del entorno familiar de Laravel, donde continúas escribiendo código en PHP y creando archivos Blade. Esto significa que, para los desarrolladores de Laravel, adoptar Livewire generalmente es más rápido que trabajar con Inertia.

Por otro lado, Inertia requiere conocimientos de front-end, como Vue o React. Por lo tanto, se considera más complejo y demanda un conjunto de habilidades más amplio.

Comparación de Pasos de Configuración

Configurar Livewire implica:

1. Instalar el paquete Livewire a través de Composer.
2. Agregar 2 directivas Blade en el diseño principal.

Configurar Inertia Vue implica:

1. Instalar el paquete Inertia a través de Composer.
2. Agregar 2 directivas Blade en el diseño principal.
3. Configurar el middleware Inertia.
4. Instalar adaptadores de cliente: "npm install @inertiajs/inertia @inertiajs/inertia-vue3".
5. Actualizar el archivo "resources/js/app.js" con el método createInertiaApp().

Como puedes ver, Inertia implica más pasos de configuración, y debes estar familiarizado con la configuración de Vue en un proyecto Laravel, lo que puede ser más complejo.

Desarrollo de Componentes en Livewire e Inertia

Para crear un nuevo componente en Livewire, sigues estos pasos:

1. Crea un componente Livewire con Artisan.
2. Completa la clase del componente Livewire y su archivo Blade con la lógica.
3. Llama al componente Livewire con @livewire o <livewire>.
4. Construye un sistema de navegación/ruteo entre componentes.

Para crear un nuevo componente en Inertia, sigues estos pasos:

1. Crea un componente Vue.js con lógica y plantilla visual.
2. Llama al componente de Inertia con Inertia::render().
3. Construye un sistema de navegación/ruteo entre componentes.

En términos de esfuerzo, ambos enfoques requieren un trabajo similar, aunque Livewire ofrece un comando Artisan para crear componentes, lo que agiliza el proceso. Sin embargo, muchos desarrolladores de Laravel consideran que trabajar dentro de la estructura de clase/Blade de Laravel es más rápido y cómodo.

Si eres un desarrollador full-stack con experiencia en Vue.js o React, es probable que Inertia sea una elección natural.

Rendimiento

Una crítica típica de Livewire es que realiza demasiadas solicitudes al servidor, especialmente si los desarrolladores no tienen cuidado con wire:model. De hecho, puede hacer demasiadas solicitudes sin necesidad de eso.

Es similar a la crítica de Eloquent: los desarrolladores con menos experiencia tienden a pasar por alto el rendimiento porque "simplemente funciona" y dejan el código con potencialmente cientos de consultas SQL no optimizadas ejecutadas bajo el capó de Eloquent.

E incluso la carga útil de las solicitudes y resultados de Laravel es mayor: Livewire descarga el HTML completo para el bloque o el componente, mientras que Inertia trata con JSON como resultado.

Entonces, en términos de rendimiento, el comportamiento de Inertia predeterminado es probablemente una mejor manera. Pero, en la mayoría de los casos, sus usuarios no lo notarían visualmente, especialmente en proyectos más pequeños. Además, con Livewire, puede optimizar muchas cosas para mejorar el rendimiento.

SEO: Livewire es mejor. En teoria.

Seré honesto contigo: no creo que debas confiar en el SEO con aplicaciones de una sola página. Si su página es muy dinámica, con muchas partes móviles, se parece más a una aplicación que a un sitio web. Diablos, incluso se llaman "APLICACIONES de una sola página". En mi experiencia, los SPA se crean principalmente para administrar datos, generalmente protegidos por el mecanismo de autenticación, por lo que las personas hacen clic para realizar acciones y no para obtener un sitio web rastreable.

Dicho esto, puede haber un proyecto que necesite tanto un comportamiento dinámico como resultados de SEO. Para eso, es mejor tener una representación del lado del servidor, que luego es mejor rastreable por los motores de búsqueda.

Livewire tiene una representación del lado del servidor de forma predeterminada y descarga HTML completo que Google y otros rastreadores pueden leer. Entonces, lo mismo que he mencionado anteriormente como un problema de rendimiento, se convierte en una ventaja en términos de SEO.

Inertia trabaja por defecto con el renderizado del lado del cliente: así que cada llamada al servidor devuelve JSON que es analizado "mágicamente" en el navegador. Así, los motores de búsqueda tienen más dificultades para leer correctamente el contenido de la página. Dicho esto, en enero de 2022, Inertia lanzó la funcionalidad de renderizado del lado del servidor. Sin embargo, puede requerir un esfuerzo adicional para configurarla: entrega la petición a un servicio Node.js separado para que pueda renderizar la página y devolver el HTML renderizado al navegador cuando haya terminado.

Todos esos pensamientos sobre SEO son casi teóricos. Es imposible saber de antemano cómo un motor de búsqueda en particular rastreará y leerá el contenido de su sitio web. La gente dice que Google mejoró mucho en la lectura de sitios web dinámicos basados ​​en JavaScript a lo largo de los años, pero cada caso es bastante individual.

Oportunidades profesionales: todo el mundo quiere desarrolladores full-stack

Hasta ahora, parece que si eres un desarrollador de Laravel con una experiencia mínima en el front-end, puedes comenzar a usar Livewire y crear proyectos increíbles. Eso es cierto, pero limita sus oportunidades laborales para el futuro.

Si intenta buscar trabajos relacionados con Livewire en sitios de trabajo o tableros independientes, casi no hay ninguno. Principalmente, porque Livewire se considera una pequeña herramienta adicional además de Laravel, con un caso de uso bastante limitado.

Sin embargo, Inertia se basa en marcos JavaScript fundamentalmente populares como Vue o React. Y tampoco encontrará muchos trabajos que mencionen específicamente a Inertia, pero se vería obligado a saltar fuera de la zona de confort de Laravel a un mundo full-stack, lo que a su vez le abriría un mar de oportunidades: en estos días, todas las empresas quiere contratar desarrolladores full-stack.

Por lo tanto, desde ese punto de vista, Livewire es excelente si usted es un trabajador independiente, completamente responsable de sus decisiones tecnológicas, y/o construye proyectos típicamente pequeños con solo un comportamiento dinámico. Pero, si trabaja en una empresa más grande que necesita apostar fuerte en alguna tecnología, lo más probable es que elijan React/Vue como la base del código front-end.

Taylor & comunidad: ¿Por qué no ambos?

Finalmente, echemos un vistazo a lo que otras personas tienen que decir.

Como opinión de un "experto imparcial", hablemos del kit de inicio de Laravel Jetstream que se lanzó con Laravel 8. Taylor Otwell quería ofrecer una nueva versión del modelo con tecnología Auth para la web moderna y, para los elementos dinámicos, tenía que elegir entre Livewire e Inertia.

Escuchemos lo que Taylor dijo sobre la elección : "Me gustan tanto Livewire como Inertia. Mientras construía Jetstream, estaba tan indeciso sobre cuál elegir, que decidí incluirlos a ambos. Se sentía bastante arriesgado porque tenía que tomar en mantener dos juegos de front-end, pero sentí que ambos son grandes proyectos, hechos por miembros de la comunidad de Laravel".

E incluso cuando hice una encuesta en mi Twitter con 1.854 votos, Livewire e Inertia obtuvieron la misma audiencia: 39% cada uno, con un 21% que optó por "Ambos, depende del proyecto".

Entonces, la respuesta definitiva a la pregunta "Livewire o Inertia" es que es su elección personal. Principalmente, depende de su experiencia con Vue/React. Si es ninguno/mínimo, entonces Livewire es tu amigo.

Artículo traducido del blog de Laravel New