No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Flujo de comunicaci贸n entre usuarios, frontend y backend

2/20
Recursos

Aportes 53

Preguntas 6

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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鈥ng]

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 鈥渋nvisible鈥, 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)

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

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.

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

Toda web profesional tiene Backend y Frontend.

Sin miedo al 茅xito, lo que importa es la informaci贸n.

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

Excelente clase, aprendimos a diferenciar una SPA y SSR

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

Explicaci贸n magistral

jejeje este sujeto tiene chispa, me gusto mucho esta clase, estuve muy atento a su clase, estos son los profe que debe tener platzi, con chispa, y mucha sencilles para explucar la cosas, alli esta el secrete ojala el ceo Freddy reclute mas gente como esta tendria mas gente aqui aprendiendo.

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 鈥渕e 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 鈥渕e 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 鈥渃argar 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

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

Me encanto el tablero

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

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

Excelente explicaci贸n

este clase me exploto la cabeza, me ayuda a unir todos los conceptos que estaban por ahi

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. 馃槂

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

si mi sitio tiene archivos tipo videos o musica estos archivos se alojan en la base de datos?

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

estar铆a genial ver a este hombre dando el curso de asincronismo!!!