‫Instructor: En la
‫lección anterior, mientras hablaba sobre el
‫front-end y el back-end, mencioné sitios web o aplicaciones
‫simples, estáticos y dinámicos, un par
‫de veces pero sin definir realmente qué son.
‫Entonces, en este video, quería aclarar estas cosas y
‫también hablar sobre las API para llevar
‫todos estos conceptos al panorama general del
‫desarrollo web back-end en general.
‫Entonces, comencemos hablando de sitios
‫web estáticos versus dinámicos.
‫Entonces, un sitio web estático, o un sitio
‫web simple como lo llamé
‫en el último video, es cuando un desarrollador
‫carga los archivos finales listos para ser servidos de un sitio web en el servidor web.
‫Estos archivos generalmente contienen HTML, CSS,
‫JavaScript, imágenes y más, y como dije, estos son
‫los archivos exactos que el servidor enviará más tarde
‫al navegador cuando se solicite el sitio web.
‫El navegador tomará estos
‫archivos y los mostrará como están.
‫Esto significa que no se realiza ningún trabajo en el
‫servidor, no hay código de back-end y tampoco hay ninguna
‫aplicación en ejecución.
‫¿Okey?
‫Entonces, es solo un servidor web estático que sirve archivos
‫estáticos, exactamente como mencioné en el último video.
‫Ahora, podría pensar, espere, cuando
‫hay JavaScript en
‫la página, generalmente hay efectos dinámicos,
‫como animaciones y esas cosas, ¿verdad?
‫Bueno, esa dinámica a la que te refieres
‫es una dinámica diferente.
‫Es solo en el contexto del desarrollo de front-end.
‫En el contexto del navegador, la dinámica no tiene nada que
‫ver con los efectos en una página o las cosas que se
‫mueven, sino con la forma en que se generan los sitios web en los servidores.
‫¿Okey?
‫Por lo tanto, los sitios web dinámicos son diferentes de los sitios
‫web estáticos porque generalmente se crean en
‫el servidor cada vez que ingresa una nueva solicitud.
‫Entonces, como vimos en
‫el último video, los sitios web dinámicos generalmente contienen una
‫base de datos, luego también hay una
‫aplicación en ejecución, como un Node. js, que obtiene datos de la
‫base de datos y luego, junto con una plantilla predefinida,
‫crea cada página que el usuario solicita de forma dinámica en función
‫de los datos que provienen de la base de datos.
‫Por lo tanto, cada vez que
‫un navegador solicita una página, esa página se crea como archivos HTML, CSS y
‫JavaScript, que luego se enviarán de vuelta al navegador.
‫Todo este proceso a veces se denomina
‫renderización del lado del servidor.
‫Entonces, nuevamente, es por eso que se llama dinámico, porque
‫el sitio web puede cambiar todo el tiempo de acuerdo con
‫el contenido que está en la base
‫de datos o las acciones del usuario en el sitio.
‫Por ejemplo, si inició sesión en Twitter, se
‫le mostrará una página completamente diferente
‫a la que tenía cuando se desconectó, ¿verdad?
‫Y también le mostrará una página diferente mañana de
‫la que tenía hoy porque hay nuevos tweets, por lo que
‫hay nuevos datos en la base de datos.
‫Y de eso se tratan los sitios web dinámicos.
‫Ahora, si tú, por ejemplo, vas a Jonas. io, y
‫debería, por cierto, siempre
‫verá el mismo contenido, el mismo
‫sitio web, sin importar cuándo lo visite
‫o qué haga allí.
‫Entonces, eso significa que es una página estática, ¿de acuerdo?
‫¿Tiene sentido esta diferencia?
‫Ahora, a veces usamos el término sitios web dinámicos
‫y, a veces, el término
‫aplicación web, pero son casi lo mismo.
‫Por lo general, cuando las personas se
‫refieren a aplicaciones web, se refieren a un sitio
‫web dinámico con alguna funcionalidad como iniciar sesión,
‫crear perfiles de usuario, buscar cosas y cosas así en general.
‫Los sitios web son, por ejemplo, algo así como un blog de WordPress.
‫Todavía se generan dinámicamente, pero
‫realmente no podemos hacer nada más que leerlos, ¿verdad?
‫Y tradicionalmente, los sitios web estáticos y dinámicos eran los únicos dos
‫tipos de sitios web, pero en los últimos años,
‫gracias a lo poderosos que se han
‫vuelto los navegadores del lado del cliente, vemos cada vez
‫más sitios web que están, básicamente, basados en API.
‫Entonces, aprendamos cómo funcionan y cómo
‫podemos usar Node. js para alimentarlos.
‫Mantengamos los sitios web dinámicos aquí en
‫la diapositiva para que podamos comparar mejor los dos.
‫Entonces, al igual que con los sitios web dinámicos, tenemos
‫una base de datos aquí y tenemos una aplicación que obtiene
‫datos de la base de datos cada
‫vez que un cliente realiza una solicitud, por lo que, en ese sentido, un
‫sitio web impulsado por API es bastante similar a un
‫sitio web dinámico. sitio web.
‫Entonces, ambos funcionan dinámicamente.
‫Ahora, la gran diferencia aquí es que con una
‫API, solo enviamos los datos al navegador, generalmente
‫en formato de datos JSON,
‫y no a todo el sitio web.
‫Entonces, nuevamente, solo los datos se envían al cliente y
‫no el sitio web listo para ser mostrado.
‫Entonces, sin HTML, sin CSS, solo los datos JSON, ¿de acuerdo?
‫Entonces, al construir sitios web con
‫API, siempre existen estos dos
‫pasos, construir una API y luego consumir la API
‫en el lado del cliente, y por cierto,
‫API significa interfaz de programación de aplicaciones, y en un
‫nivel muy alto, es básicamente una pieza de
‫software que puede ser utilizada por otra pieza de
‫software para, básicamente, permitir que las aplicaciones se comuniquen entre sí.
‫Y hablaremos un poco más profundamente
‫sobre lo que es realmente una API una vez que comencemos a construir una.
‫De todos modos, ahora sobre el lado del cliente que acabo de mencionar.
‫Entonces, aquí es donde el sitio web se ensambla
‫realmente conectando los datos que recibimos en algún
‫tipo de plantillas, generalmente usando algún marco de interfaz de
‫usuario elegante como React, Angular o Vue.
‫No voy a entrar en
‫detalles aquí porque eso sería para un curso de
‫front-end, pero en términos muy generales, así es como funciona.
‫Entonces, ves que al construir un sitio web con API,
‫la fase de construcción del sitio web
‫se movió desde el back-end hasta el front-end, ¿verdad?
‫O también podemos decir que se movió del servidor al cliente.
‫Es por eso que muchas
‫veces verá sitios web dinámicos que se denominan renderizados del lado
‫del servidor porque en realidad están construidos en el servidor.
‫Por otro lado, los sitios web basados en API
‫a menudo se denominan renderizados del lado del cliente, lo que tiene sentido, ¿verdad?
‫Entonces, para nosotros, los desarrolladores
‫de back-end, en realidad es mucho más fácil simplemente crear una
‫API y dejar que la gente del front-end cree un sitio, ¿verdad?
‫Y, de hecho, Node es una herramienta absolutamente perfecta para
‫construir API, y se usa muy comúnmente para eso, pero por
‫supuesto, también es perfectamente adecuado
‫para construir un sitio web renderizado dinámico del lado del servidor.
‫Entonces, en este curso, haremos ambas versiones, comenzando con
‫la API, y al final del curso, también
‫construiremos un sitio web renderizado usando exactamente los mismos datos.
‫Elegí hacer ambas cosas porque creo que es extremadamente importante que sepas
‫cómo construir tanto una API como un sitio web renderizado
‫del lado del servidor.
‫Y ahora, solo para terminar
‫este video, quería mencionar rápidamente que las
‫API que creamos con Node, o en realidad, cualquier otro lenguaje, pueden,
‫por supuesto, ser consumidas
‫por otros clientes además del navegador, lo cual es
‫una gran ventaja de construir una API en lugar de
‫un sitio web renderizado del lado del servidor.
‫Entonces, digamos que construimos
‫una API de ejemplo en jonas. io / api / myCourseData.
‫Entonces, cada vez que ingresemos a esa URL, el servidor enviará datos sobre
‫los cursos de
‫desarrollo web que estoy impartiendo actualmente.
‫Ahora, hasta ahora solo hablamos de solicitudes
‫provenientes de navegadores web, pero también podríamos solicitar y luego
‫consumir exactamente los mismos datos JSON en
‫una aplicación nativa de iOS o una aplicación de Android,
‫o incluso en aplicaciones de escritorio para Mac
‫o para computadoras con Windows.
‫Las posibilidades son realmente infinitas cuando creamos una API porque simplemente
‫tenemos una fuente de datos, que luego
‫se puede solicitar y usar en cualquier lugar, no
‫solo en los navegadores.
‫Ese es el problema cuando creamos un sitio
‫web dinámico normal.
‫Devolvemos archivos HTML, CSS y JavaScript,
‫y solo los navegadores pueden entenderlos realmente, por
‫lo que estamos atrapados en esa única plataforma.
‫Y eso puede no ser un
‫problema en muchos casos, pero para productos complejos que
‫requieren muchas aplicaciones y luego sitios web y
‫aplicaciones web, por lo general, siempre se necesita una API.
‫Entonces, en este ejemplo sobre Jonas. io, podría crear esta API
‫y luego crear un sitio web con API y algunas
‫aplicaciones y obtener mis datos sobre todos
‫estos clientes de una sola fuente, ¿de acuerdo?
‫Y algunas personas o equipos ni siquiera tienen ningún
‫cliente propio y simplemente venden el acceso a
‫su API a terceros
‫que luego consumirán estas API y no las suyas.
‫Por lo tanto, hay empresas enteras construidas
‫en torno a esta filosofía de simplemente vender una API
‫a otros desarrolladores o empresas.
‫De todos modos, espero que con esta diapositiva final, el concepto,
‫la razón y, en cierto modo, la filosofía detrás
‫de la creación de API se hayan vuelto muy claros para ustedes.
‫Entonces, sigamos adelante.