Flujo de comunicación entre usuarios, frontend y backend

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)

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 😋
.

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

Esto puede ayudar a algunos a entenderlo mejor 😉

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.

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.

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.

Total admiración por el profe juandc , me hubiera gustado empezar a aprender antes, pero nunca es tarde y aqui estoy, algún día espero poder dar una clase de tecnología en Platzi

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

• https://fakeapi.platzi.com/
• https://platzi.com/blog/la-api-para-nunca-parar-de-aprender-news/

*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

Sin miedo al éxito, lo que importa es la información.

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.

SSR y SPA

Server-side rendering es una aplicacion la cual renderiza el HTML, CSS y JS en el servidor. Una aplicacion que hace esto es WIKIPEDIA.

• Punto positivo:

  • Mejor indexacion. Por que? Porque desde el servidor le das la data ya establecida a los robots de google.
  • Velocidad instantanea a la hora de acceder a la pag, porque esta ya se renderizo en el servidor!

• Punto negativo:

  • Cuando la info se actualiza, se elimna la pgina y se trae TOOODA de nuevo desde el servidor, por lo tanto, no es posble hacer una red social porque no hay manera de trabajar con datos dinamicos.
  • No influye en los resultados de bsuqueda la indexacion(no del todo)
  • SSR es mas cosoto en termino de recursos del servidor.

Single page application es una aplicacion la cual carga TOOODO el JS desde el inicio, y una vez que queremos actualizar los datos, llamamos al servidor(con la api) y le pedimos solo la informacion necesaria.

• Punto negativo: Mucho peso a la hora de cargar la aplicacion al inicio, ya que esta se renderiza en la pc de la persona y no en el servidor como server side rendeinr
• Punto positivo: Luego es muy rapida porque solo trae la informacion relevante del servidor.
• Es posible hacer una red social. ya que se trabajn justamente con datos dinamicos trayendo nuevos datos.

ISOMORFISMO

Aplicacaciones que necesitan usar server side rendering para tener una indexacion perfecta pero a su vez ser rapidas para tener informacion nueva al instante utilizando single page application son:

• Airbnb ⇒ Indexa con ssr, y actualiza info con SPA
• Linkedind, Twitter ⇒ Lo mismo

DUDAS?

Aunque no lo creas, mercadolibre no usa SSR, ya que en su app hay MUCHOS PRODUCTOS y no quieren matar a sus servidor renderizando la informacion constantemente.

Yo pensé que Juan era super teso y sabía escribir al reves (mirrored). Pero luego vi su camiseta.

Les comparto el diagrama sobre el flujo de comunicación entre usuarios, frontend y backend.

Toda web profesional tiene Backend y Frontend.

Me gusta el estilo Jimmy Page del profe. Cada día lo quiero más

Excelente clase, aprendimos a diferenciar una SPA y SSR

Explicación magistral

• Server Side Rendering (SSR) es el flujo de comunicación entre frontend y backend (servidor), el usuario a través de un navegador web hace una petición a un servidor y este devuelve una respuesta en html (carga completa de una página web)
• Single Page Application (SPA) es el flujo de comunicación entre frontend y backend que se da gracias a JS, con el cual podemos manipular el DOM sin tener que cargar la página completa, el usuario hace una petición al backend (API) a través de una API REST, la API consulta a una base de datos y obtiene una respuesta, esta regresa en formato JSON y es insertada al html modificando el DOM.

Dejo esta imagen para ayudar a entender lo que es una API: 🐝

Sin ánimos de ofender, la intro a la clase es muy molesta.

Hice estos gráficos para entender mejor, espero que estén bien hechos.

Que manera tan buena de explicar, me encanto!!
En resumen:
el usuario entra a internet y hace una peticion al servidor de la pagina a la que entro, digamos facebook
alli, el html se carga una sola vez y cada vez que el usuario haga alguna opcion, con javascript podemos estar atentos a que acciones realiza y como actuar, digamos que , le dio “me gusta” a una foto, alli javascript se conecta con el backend y registra dicha accion, el backend devuelve la inf en json y javascript la transforma en html , de ahi , el usuario vera su “me gusta” en la publicacion
Ahora digamos que el usuario quiere ver los comentarios de una foto en especifico, hace la solicitud en el html "comentarios"
Javascript lo registra y hace la solicitud al backend
El backend busca en su base de datos los comentarios en dicha publicacion y dice "si, si hay comentarios, y son estos"
los devuelve en formato json al javascript quien se encarga de transmitir la inf en html de nuevo al usuario
Por el html cargar una sola vez, hace ver como que la pagina es mas rapida en vez de estar recargando todo cada vez que se hace alguna peticion
Para mas info sobre esto de “cargar una sola vez” les recomiendo investiguen sobre el SPA = Single Page Application
esta carga un solo HTML y a traves de javascript se actualiza con las peticiones que se hacen

Mi navegador favorito for ever es FIREFOX! 🔥🦊

De las mejores clases.

Me gusta la manera que enseña y mas cuando se emociona

Que excelente manera de explicar! Me queda mucho mas claro ahora!

Que buena explicación!!

Me encanta esta pizarra, acompañado de la explicación de JuanDC es increíble.

Excelente curso, me está gustando!, es una de las mejores explicaciones que he visto gracias @juandc

Me encanto el tablero

Y yo que creia entender como funcionaban las API… excelente clase!

Excelente explicación

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 😄

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.

Que excelente explicación. 😃

muy buena explicacion

Peligro ⚠🔥

Este curso está desactualizado, por lo que al usar la API igual que en los videos muchas veces tendremos errores. La API ha sufrido algunas actualizaciones y ya no se usa igual. Toca ir a la documentación y solucionar los problemas nosotros mismos. 😬😥

Súper la explicación,vale la suscripción, en unos minutos ,al grano!!!

**EPico **

Comunicación entre usuarios, frontend y backend
Todas las páginas web tienen frontend y backend. También usuarios que deben interactuar con la página web para obtener info. En el front recibimos las interacciones y lo traducimos a consultas al backend para que las devuelva al front end y se las devuelva a los usuarios en formato de HTML.

Ahora con JAvascript la solicitud se hace a JS en vez de convertirlo a una petición al servidor, se carga una vez el html, luego se carga el js y se encarga de por medio de API Rest preguntar al backend, luego esta info se devuelve a JS quien lo inserta al HTML. Esto hace la página más rápida.

agreguen esta clase antes , antes del curso de asincronismo. soluciona muchas dudas q mis compañeros publicaron

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