Flujo de comunicación entre usuarios, frontend y backend

2/20
Recursos

Aportes 23

Preguntas 3

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Mis aportes (tomados también de otras clases de platzi)

![Captura de Pantalla 2022-05-03 a la(s) 11.45.04 a.m…png]

Server Side Rendering - SSR

Las SSRs son páginas que necesitan traer diferentes archivos HTML del servidor cada vez que el usuario navega por nuestra aplicación, es decir, casi todas las veces que damos click en un link o botón. Aunque estas páginas tienen un tiempo de carga muy corto, la carga debe repetirse.

Single Page Applications - SPA

Las SPAs son páginas que siempre cargan el mismo archivo HTML. Este, a su vez, carga un archivo gigante de JavaScript con toda la lógica de nuestra apliacación (por ejemplo, usando React.js).

Estas páginas tienen una carga inicial muy lenta, ya que no podremos ver la información importante hasta que termine de cargar el archivo de JavaScript. Pero una vez termina la carga inicial, las SPAs son muy rápidas, incluso al navegar por diferentes secciones de nuestra aplicación.

Como el archivo de JavaScript tiene todo el código de nuestra aplicación, el tiempo de navegación pasa de segundos a milisegundos. No necesitamos hacer más requests al servidor. Pero en mucho casos debemos esperar algunos segundos para que termine la carga inicial y podamos utilizar la aplicación.

(https://static.platzi.com/media/user_upload/Captura de Pantalla 2022-05-03 a la(s) 11.45.04 a.m.-6a9d16bd-e283-4f33-bc86-0017785c215b.jpg)

Flujo de comunicación entre usuarios, frontend y backend

SSR

La representación del lado del servidor se refiere a la capacidad de una aplicación para mostrar la página web en el servidor en lugar de mostrarla en el navegador. Cuando el JavaScript de un sitio web se procesa en el servidor del sitio web, se envía una página completamente procesada al cliente y el paquete de JavaScript del cliente se activa y permite que funcione el marco de la aplicación de una sola página.

SPA (aplicación de una sola página)

Una SPA (aplicación de una sola página) es una implementación de aplicación web que carga solo un único documento web y luego actualiza el contenido del cuerpo de ese documento único a través de las API de JavaScript, como XMLHttpRequest o fetch y se muestra contenido diferente.

Por lo tanto, esto permite a los usuarios usar sitios web sin cargar páginas completamente nuevas desde el servidor, lo que puede generar mejoras en el rendimiento y una experiencia más dinámica, con algunas desventajas como el SEO, se requiere más esfuerzo para mantener el estado, implementar la navegación y lograr un rendimiento significativo. vigilancia.

Al principio de esta ruta aprendemos a crear páginas web y comenzamos haciendolas estáticas dado que sólo utilizamos HTML y CSS. A medida que vamos aprendiendo JavaScript y vamos implementando código de programación, podemos empezar a hacerla interactivas y dinámicas 😋 Es decir que el contenido va cambiando conforme el usuario interactua con nuestra aplicación!
.
¿Cómo las hacemos dinámicas y interactivas? Pues las APIs del DOM que nos permiten escuchar las interacciones del usuario y la API Fetch son herramientas poderosísimas que combinadas nos dan una alternativa al tener que recargar toda la página HTML cada vez que queremos algún recurso (server side rendering)

Aquí un mini video de cómo sería acceder del Home de Platzi al curso de Javascript sin tener que recargar la página de nuevo 😋
.

Me gustó el pizarrón “invisible”, muy buena forma de enseñar.

Feedback: Cuando sea así, usar micrófono inalámbrico. Se baja o sube el volumen de la voz y estorba al escribir.

Esto puede ayudar a algunos a entenderlo mejor 😉

lo que entendi de esta clase! espero que les sirva

👨‍💻 Cuando tenemos una aplicación que recibe el HTML una sola vez, JavaScript se encargara de sobreescribirlo segun la interacción del usuario y los datos recibidos del backend (por medio de la API) y a esto se le llama:

SPA (Single Page Aplication) - Aplicación de una sola pagina.
Y ya que estas aplicaciones solo te regresan una pagina, todo el renderizado sucede en el navegador gracias a JS, a esto se le llama:
Client Side Rendering.

esta gran clase de JuanDC valió una publicación en Linkedin!!!


*Min 6:51 - BD = Base de Datos

(Entiendo que es por que esta escribiendo al revés y se le barrio, me pasa)
Muy buena introducción, muy fácil de entender y mucho mejor que varios docentes de mi universidad.
Saludos

Me gusta la forma en como Juan trata de hacer la explicación lo mas sencilla posible para que todos podamos entender, y además la metodología de como se explicó con ese pizarrón esta increíble.

Me gusto mucho, la manera en la que explico el flujo de comunicación entre el front, el back, los usuarios y las dbs. Nice

Que gran docente eres Juan DC

excelente explicación 🤯
me gustaria ver este recurso en mas clases 😄

Voy a dejar la API de Platzi. Además, el artículo (otras Api)

Excelente explicación!!

Me gusto muchísimo esta clase!
No tengamos miedo de ser demasiado didácticos!
Hay conceptos muy difícil de explicar y esta, puede ser una de las mejores formas.

Excelente clase, ahora entiendo todo.

Esta GENIAL este formato, bastante entendible.

Toda web profesional tiene Backend y Frontend.

Que excelente explicación. 😃

Explicación magistral

Excelente clase, aprendimos a diferenciar una SPA y SSR

Que explicación tan buena, gracias profe Juan David, quedó excelente!