¿Livewire o Inertia.js?

Últimamente, he estado recibiendo mucho esta pregunta por parte de los desarrolladores de Laravel: "¿Qué debería aprender/usar: Livewire o Inertia.js?" Y, por supuesto, la respuesta es muy individual, pero vamos a tratar de compararlos y proporcionar más contexto para la decisión.

Historia de fondo: ¿Qué problema resuelve Livewire/Inertia?

En los últimos años se han popularizado las aplicaciones de una sola página (SPA). Se carga el JavaScript y los activos una vez, y luego todos los enlaces de la página no recargan la página completa, sino que recargan sólo ciertas partes. La experiencia del usuario mejoró, pero el problema es que se necesita mucho tiempo para crearlas correctamente. Hay que ocuparse de dos partes separadas: el front-end y el back-end, y luego el enlace entre ellos, incluyendo el enrutamiento, la seguridad, etc. Así que, en algún momento, algunos desarrolladores pensaron en simplificarlo de alguna manera. Así nacieron Livewire e Inertia.js, más o menos al mismo tiempo, y ambos se hicieron bastante populares.

Livewire e Inertia tienen objetivos muy similares: simplificar la creación de SPAs. Sin embargo, lo hacen de manera diferente. Livewire está enfocado a los desarrolladores de Laravel, para que puedan quedarse sólo con el back-end y no lidiar con JavaScript en absoluto. Inertia es para los desarrolladores de Vue o React que quieren simplificar su flujo de trabajo: no crear una API separada, no lidiar con el enrutamiento, la gestión de estados y otros desafíos.

Por lo tanto, el objetivo es similar pero el público es diferente. Incluso se pueden comparar las URL:

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

Simplicidad: Livewire es la zona de confort de un Back-End

Si eres un back-end y necesitas crear un proyecto rápidamente con sólo algunos elementos dinámicos en la página, Livewire es probablemente tu mejor solución. No te saca de la zona de confort de Laravel: más o menos sigues escribiendo código back-end de Laravel, creando clases PHP y archivos Blade. Por lo tanto, para los desarrolladores de Laravel adoptar Livewire es típicamente más rápido que Inertia.

Inertia viene con un prerrequisito: necesitas estar familiarizado con el front-end como Vue o React. Por lo tanto, es por definición más complicado y requiere más conocimientos que Livewire.

Compara la secuencia de acciones.

Configuración de Livewire:

• Instalar el paquete Livewire a través de Composer
• Añadir 2 directivas Blade en el layout principal

Configuración de Inertia Vue:

• Instalar el paquete Inertia a través de Composer
• Añadir 2 directivas Blade en el layout principal
• Configurar el middleware Inertia
• Instalar los adaptadores del lado del cliente: “npm install @inertiajs/inertia @inertiajs/inertia-vue3”
• Actualizar el archivo “resources/js/app.js” con el método createInertiaApp()

Como puedes ver, hay más pasos de preparación con Inertia, y necesitas estar familiarizado con cómo funciona toda la configuración de Vue en el proyecto Laravel, incluyendo el diseño principal, y cosas como id="app", etc.

Ahora, ¿cómo crear un componente Livewire/Inertia?

Nuevo componente de Livewire:

• Cree un componente Livewire con Artisan
• Complete la clase de componente Livewire y su Blade con lógica
• Llame al componente Livewire con @livewireo<livewire>
• Construir un sistema de navegación/ruteo entre componentes

Nuevo componente de Inertia:

• Cree un componente Vue.js con lógica y plantilla visual
• Llame al componente de inercia conInertia::render()
• Construir un sistema de navegación/ruteo entre componentes

Parece que hay más o menos la misma cantidad de trabajo, excepto que Inertia no tiene un comando Artisan para crear su componente.

Pero mentalmente, es mucho menos trabajo para los desarrolladores de Laravel permanecer dentro de la estructura de clase/Blade de Laravel que crear un nuevo archivo Vue con <template>y <script>. Simplemente es más rápido.

Pero si el desarrollador puede llamarse a sí mismo full-stack y trabaja con Vue.js todos los días, entonces es obvio para ellos seguir el camino de Inertia.

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