Diferencia entre revisiones de «Usuario:ManuelRomero/Laravel/JetstreamInertia»

De WikiEducator
Saltar a: navegación, buscar
(Página creada con «https://inertiajs.com/ ===Qué es Inertia==== *Una librería para construir una aplicación web gestionada desde el servidor. Se le conoce como '''''modern monolith'''''. S...»)
 
Línea 1: Línea 1:
 
https://inertiajs.com/
 
https://inertiajs.com/
===Qué es Inertia====
+
===Qué es Inertia===
 
*Una librería para construir una aplicación web gestionada desde el servidor. Se le conoce como '''''modern monolith'''''. Se puede usar además de con Laravel con otras herramientas (DJango, Rail, Ruby,...)
 
*Una librería para construir una aplicación web gestionada desde el servidor. Se le conoce como '''''modern monolith'''''. Se puede usar además de con Laravel con otras herramientas (DJango, Rail, Ruby,...)
 
*Inertia le permite crear una aplicación de una sola página completamente basada en JavaScript sin complejidad adicional.
 
*Inertia le permite crear una aplicación de una sola página completamente basada en JavaScript sin complejidad adicional.
Línea 7: Línea 7:
 
#Obtienes datos de la base de datos (a través de tu ORM)
 
#Obtienes datos de la base de datos (a través de tu ORM)
 
#Renderizas vistas.que '''''son componentes de página de JavaScript'''''.
 
#Renderizas vistas.que '''''son componentes de página de JavaScript'''''.
===Cómo trabaja====
+
===Cómo trabaja===
 
*Trabajando con Inertia, vamos a usar el framework del servidor como siempre. En nuestro caso seguimos usando laravel con sus controladores, rutas, authetificadores , ...
 
*Trabajando con Inertia, vamos a usar el framework del servidor como siempre. En nuestro caso seguimos usando laravel con sus controladores, rutas, authetificadores , ...
 
*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 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.
 +
Para ver una página sin necesidad de realizar la carga completa, usamos  '''''el componente <inertia-link>'''''.
 +
*También se puede realizar una llamada usando '''''Inertia.visit()'''''
 +
*Cuando tenemos una ancla con la envoltura <inertia-link>, se produce una solicitud XHR al servidor.
 +
{{MRM_Actividad|XMLHttpRequest (XHR) es un objeto especial de Javascript que permite realizar peticiones HTTP asíncronas (AJAX) de forma nativa desde Javascript.}}
 +
*Cuando Inertia realiza una visita XHR, el servidor detecta que se trata de una visita Inertia y, en lugar de devolver una respuesta HTML completa, devuelve una respuesta JSON con el nombre del componente de la página JavaScript y los datos (props).
 +
===El protocolo===
 +
*Lo primero que ocurre en una aplicacion inertia es que se solicita una página html completa nomal
 +
 +
*Esta página tendrá los elementos js y css. El div principal será el punto de montaje de la aplicación  y contendrá un elemento especial <data-page> cuyo valor es  un json que codifica un '''''page object''''' para la página inicial.
 +
Inertia utiliza esta información para iniciar el lado del cliente y mostrar el componente de página inicial.
 +
 +
<source lang=html5>
 +
<html>
 +
<head>
 +
    <title>My app</title>
 +
    <link href="/css/app.css" rel="stylesheet">
 +
    <script src="/js/app.js" defer></script>
 +
</head>
 +
<body>
 +
 +
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
 +
 +
</body>
 +
</html>
 +
</source>

Revisión de 03:40 17 jun 2021

https://inertiajs.com/

Qué es Inertia

  • Una librería para construir una aplicación web gestionada desde el servidor. Se le conoce como modern monolith. Se puede usar además de con Laravel con otras herramientas (DJango, Rail, Ruby,...)
  • Inertia le permite crear una aplicación de una sola página completamente basada en JavaScript sin complejidad adicional.
  • Inertia funciona mucho más como una aplicación clásica renderizada del lado del servidor:
  1. Creas controladores
  2. Obtienes datos de la base de datos (a través de tu ORM)
  3. Renderizas vistas.que son componentes de página de JavaScript.

Cómo trabaja

  • Trabajando con Inertia, vamos a usar el framework del servidor como siempre. En nuestro caso seguimos usando laravel con sus controladores, rutas, authetificadores , ...
  • 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.

Para ver una página sin necesidad de realizar la carga completa, usamos el componente <inertia-link>.

  • También se puede realizar una llamada usando Inertia.visit()
  • Cuando tenemos una ancla con la envoltura <inertia-link>, se produce una solicitud XHR al servidor.


Icon activity.jpg
Actividad
XMLHttpRequest (XHR) es un objeto especial de Javascript que permite realizar peticiones HTTP asíncronas (AJAX) de forma nativa desde Javascript.


  • Cuando Inertia realiza una visita XHR, el servidor detecta que se trata de una visita Inertia y, en lugar de devolver una respuesta HTML completa, devuelve una respuesta JSON con el nombre del componente de la página JavaScript y los datos (props).

El protocolo

  • Lo primero que ocurre en una aplicacion inertia es que se solicita una página html completa nomal
  • Esta página tendrá los elementos js y css. El div principal será el punto de montaje de la aplicación y contendrá un elemento especial <data-page> cuyo valor es un json que codifica un page object para la página inicial.

Inertia utiliza esta información para iniciar el lado del cliente y mostrar el componente de página inicial.

<html>
<head>
    <title>My app</title>
    <link href="/css/app.css" rel="stylesheet">
    <script src="/js/app.js" defer></script>
</head>
<body>
 
<div id="app" data-page='{"component":"Event","props":{"event":{"id":80,"title":"Birthday party","start_date":"2019-06-02","description":"Come out and celebrate Jonathan&apos;s 36th birthday party!"}},"url":"/events/80","version":"c32b8e4965f418ad16eaebba1d4e960f"}'></div>
 
</body>
</html>