Inertia.js y sus ventajas para los desarrolladores de Laravel

Inertia.js te permite crear aplicaciones de una sola página sin la necesidad de construir una API. No está ligado a Laravel o a Vue pero ofrece un adaptador para estos dos frameworks. Inertia no depende de ninguna tecnología, pero es muy parecida en su uso a Laravel, por lo que developers expertos en esta última tienen a Inertia.js entre sus favoritas.

Inertia no es un framework, ni es un reemplazo de tus frameworks existentes del lado del servidor o del lado del cliente. Más bien, está diseñado para funcionar con ellos. Piensa en Inertia como un pegamento que conecta los dos. Inertia hace esto a través de adaptadores.

Cómo utilizar Inertia en Laravel

Como un nuevo enfoque para la creación de aplicaciones web clásicas impulsadas por servidores, así están definiendo los developers a Inertia. La biblioteca le permite a sus usuarios renderizar componentes Vue de un solo archivo desde el backend de Laravel.

Esto permite crear aplicaciones de una sola página, SPA por sus siglas en inglés, totalmente renderizadas del lado del cliente sin la alta complejidad que se asocia con este tipo de páginas en la actualidad.

Inertia funciona como una aplicación clásica renderizada del lado del servidor: los controladores, las operaciones de la base de datos y las vistas se escriben como antes, y los componentes de la página de JavaScript ahora reemplazan las vistas. En el caso de Laravel, Inertia usa autenticaciones existentes, no requiere el desarrollo de toda la API y las vistas de hoja se reemplazan con componentes de JavaScript.

Ventajas y desventajas de Inertia

Entre las ventajas que ofrece Inertia a los usuarios de Laravel, están:

• Las rutas de la aplicación están todas contenidas en un archivo solitario.
• Inertia elimina por completo la complejidad del enrutamiento por el lado del cliente.
• Es posible configurarla con React.

Entre las desventajas, presenta:

• El desarrollador que vaya a utilizar Inertia debe tener conocimientos tanto de PHP como de Vue.
• Si la intención es crear una aplicación para Android o iOS, se debe volver a crear la API de backend.
• Tiene una usabilidad muy limitada sin Vuex

Laravel Breeze también ofrece una implementación de interfaz Inertia.js impulsada por Vue o React. Para usar una stack de Inertia, especifica Vue o React como tu stack deseada al ejecutar el comando breeze:install Artisan:

php artisan breeze:install vue

// Or...

php artisan breeze:install react

npm install
npm run dev
php artisan migrate

¿A quién está dirigido Inertia.js?

En su página web, Inertia.js explica que esta plataforma fue diseñada para equipos de desarrollo "que normalmente construyen aplicaciones renderizadas del lado del servidor utilizando marcos como Laravel, Ruby on Rails o Django. Crean controladores, obtienen datos de la base de datos (a través de un ORM) y representan vistas".

"Inertia le permite crear una aplicación de una sola página completamente basada en JavaScript sin toda esta complejidad adicional", agregaron en el artículo.

Continuaron explicando: "Inertia funciona mucho más como una aplicación renderizada clásica del lado del servidor. Creas controladores, obtienes datos de la base de datos (a través de tu ORM) y renderizas vistas. Excepto que las vistas aquí son componentes de página de JavaScript. Lo que significa que obtiene todo el poder de una aplicación del lado del cliente y la experiencia SPA, pero no necesita crear una API".

Cómo funciona Inertia.js

- Crea aplicaciones como siempre lo ha hecho con el marco web del lado del servidor de su elección. 

- Utiliza la funcionalidad existente de su marco para el enrutamiento, los controladores, el middleware, la autenticación, la autorización, la obtención de datos y más.

- En lugar de utilizar la representación del lado del servidor (por ejemplo, plantillas Blade o ERB), las vistas son componentes de página de JavaScript. Esto le permite construir todo su front-end usando React, Vue o Svelte.

- Inertia es esencialmente una biblioteca de enrutamiento del lado del cliente. Le permite realizar visitas a la página sin forzar una recarga completa de la página. 

Inertia.js vs LiveWire: ¿Cuál es mejor?

LiveWire es un framework full-stack para Laravel que a menudo es comparado con Inertia.js, que simplifica la creación de interfaces dinámicas sin abandonar el confort de Laravel.

Pero, entre Inertia.js y LiveWire, ¿cuál es la mejor opción? El portal JavaScript in Plain English ofrece una explicacion:

"Inertia.js se basa en gran medida en JavaScript, el desarrollador deja de escribir componentes blade y todo el código pasa a JavaScript. Livewire le permite escribir componentes sin escribir ningún código javascript. Mientras trabajan con LiveWire, los desarrolladores se ocupan del código PHP y la sintaxis blade, mientras que Inertia.js le brinda opciones para usar Vue o React como un marco de interfaz", detalló Arslan Alí, el autor del artículo.

"Desde una perspectiva de rendimiento, LiveWire renderiza todo en el servidor, lo que mejora el tiempo de pintura del primer contenido, también es una gran ventaja para el SEO. Inertia.js usa javascript para cargar contenido, pero su rendimiento es mucho mejor que el de otros marcos SPA, ya que los datos ya están integrados en la respuesta. Inertia.js también es compatible con la representación del lado del servidor, lo que permite hacer SEO para el sitio", agregó.

Y el experto enfatizó: "Inertia.js brinda un buen punto de partida para crear una aplicación de una sola página sin escribir API separadas, sin biblioteca Axios para llamar a las API, sin la molestia de obtener respuestas y analizarlas. Es muy natural que los desarrolladores continúen desarrollando aplicaciones con cambios mínimos en las aplicaciones. Si está buscando cambiar su aplicación existente a una apariencia moderna sin tener que reescribir todo el código, Inertia.js es la herramienta adecuada para usted".
 

Los developers en Rootstack han utilizado Laravel para dar solución a varios problemas tecnológicos de nuestros clientes regionales e internacionales. Si quieres pertecener a un equipo multicultural y enfocado en crear las tecnologías del presente y futuro, aplica aquí y déjanos conocer tu talento.

Te recomendamos en video