Dar una buena acogida.
Entonces, este video representa un hito bastante importante en esta clase.
Estamos pasando de tecnologías puramente de vanguardia a nuestra primera experiencia de desarrollo web y de respaldo.
Así que vamos a seguir usando todo lo que hemos aprendido.
Es G-mail CSSA javascript pero vamos a aprender algunas nuevas tecnologías que nos ayudan
a hacer aplicaciones web completas.
Por supuesto, antes de que comencemos a escribir un código, tenemos algunas otras cosas de las que debemos ocuparnos.
Comenzaremos revisando cómo funciona Internet.
Entonces vamos a hablar de estática vs. sitios dinámicos y donde el front-end encaja y dónde
se encuentra y se ajusta y en su mayoría hablaremos más en profundidad sobre el respaldo específico y las tecnologías con las
que vamos a trabajar.
De acuerdo, comencemos con la versión de 60 segundos de cómo funciona Internet.
Cuando vamos a un euro aquí para ver los cursos de punto com, hay algunas cosas que ocurren detrás de escena.
Lo primero es que nuestra computadora necesita averiguar a qué dirección IP enviar una solicitud.
Por lo tanto, nos lleva a usted R-OH leer para entrar, obtener la dirección IP correcta, que es el único localizador para
usted y para mí servidor.
Entonces, una vez que tengamos esa dirección IP, se enviará una solicitud de TTP para Nueva Era.
Entonces, se envía una solicitud a esa dirección IP y no es solo una solicitud en blanco.
Tiene un montón de información.
Hablaremos más sobre los detalles específicos que están en esa solicitud en el próximo video.
Pero la versión corta es que tiene cosas como su propia dirección IP en el momento en que la
envía a ese tipo de solicitud.
Y lo más importante es la página específica que está solicitando.
Entonces, en este caso, estamos solicitando la página del curso.
Entonces, eso está codificado en la solicitud que se envía junto a mí y recibe esa solicitud y se da cuenta de qué
hacer.
Y luego responde con algo.
Entonces, si pedimos cursos de Slash, el servidor de Tomy descubrirá qué necesita ir en la página
del curso.
Así que supongo que va a una base de datos y toma un montón de cursos
e imágenes los compila en este archivo largo HTL con algo de éxito y algo de javascript, y finalmente
me lo devuelve a mi computadora con respuesta HTP y luego se vuelve a un navegador cuyo trabajo es renderizar la página.
Entonces, así es como se ve el contenido real antes de que nuestro navegador se encargue de él y
lo represente como humano.
Esto es lo que la computadora ve solo el éxito de HMO en javascript.
Para resumir todo eso cuando voy a una URL y presiono Enter, lo primero que ocurre es
que necesitamos encontrar la dirección IP para ese dominio y luego enviamos una solicitud HTP solicitando una página en particular a esa
dirección IP y luego al servidor. recibe esa solicitud.
Se da cuenta de qué hacer con qué responder.
Y luego responde de nuevo con H. METRO. SS en javascript.
Lo siguiente que quiero discutir es la diferencia entre páginas web estáticas y dinámicas.
Hablamos de esto también en uno de los primeros videos sobre cómo funciona Internet.
Quiero hacer una recapitulación rápida porque es importante para la discusión de back-end que estamos a punto de tener.
Así que hay dos tipos diferentes de sitios web: páginas estáticas y páginas dinámicas. Las páginas web dinámicas son sitios
que se compilan en el lado del servidor donde el servidor está uniendo o construyendo una página
web antes de que se envíe como respuesta.
Todo lo que hemos escrito hasta ahora ha sido estático.
Entonces, incluso algo como esto, no parece que sea estático porque hay contenido dinámico.
Obtenemos colores aleatorios todo el tiempo y es un juego.
No parece tan estático como el ejemplo de la página web del restaurante que utilicé en el video anterior
sobre este tema, pero todavía es estático porque es el mismo HMO C Ss en javascript.
Cada vez.
Sí, se ve diferente porque tenemos algunos colores aleatorios, pero son las mismas piezas fundamentales
cada vez que abrimos el navegador en un sitio web dinámico.
Podríamos tener diferentes javascript o diferentes C Ss diferentes para cada equipo que se envía de vuelta
cada vez.
Entonces, cuando vamos a algo como Reddit, por ejemplo, y actualizo la página, puedo obtener diferentes contenidos
aquí.
Y, de hecho, cada vez que estás fresco la página obtiene contenido nuevo y hay una base de
datos que está compilando cosas.
Hay algunos códigos que comprueban si está conectado y si ha iniciado sesión, entonces no le mostrará un formulario
aquí, pero le mostrará un botón para cerrar la sesión.
Y si no está conectado, muestra un formulario y muestra que inicia sesión o que ingresa los botones.
la misma H G M L C S en javascript que me enviaron cada vez que el servidor realmente está decidiendo qué devolver.
Así que esta página web no es exactamente
Al construir una página web antes de que me la envíe frente a este sitio, tiene el mismo
contenido exacto cada vez.
OK, así que vamos a centrarnos un poco más en el back-end ahora.
Entonces este diagrama es de una pila genérica y la pila es un término que se usa para referirse a todas las
tecnologías que usa una aplicación web en particular.
Entonces H. T. Melchior dice que en JavaScript siempre son casi siempre parte de una pila en
las grandes aplicaciones web de lujo.
Técnicamente podríamos tener un sitio web que no tenga éxito.
Sería horrible.
Podríamos tener un sitio web que no tenga ningún javascript del lado del cliente y simplemente
no sería muy interactivo.
Pero aún podemos hacer un sitio web perfectamente bueno como lo hicimos con el sitio original de portafolio
de fotografía de cada equipo de Eliseus, pero la mayoría de las aplicaciones web como he mencionado tienen HDMI dice elsea y
Javascript que se está enviando al back-end es donde vemos una muchas más variantes.
podemos escribir o volver y usar Ruby o Python o Skala o Java o javascript o THP.
Así que hay diferentes idiomas en los que podemos escribir el código del lado del servidor y
Hay tantas opciones allí.
Hay todo tipo de bases de datos diferentes por ahí.
Publicar post-crisis y secuela en mi también y Mongo y hay tantas opciones.
Entonces, el término pila se refiere a las elecciones particulares que los desarrolladores hicieron y qué
tecnologías exactas usan.
Es una pregunta muy común para los desarrolladores preguntarse unos a otros.
¿Cuál es tu stack en esa empresa o qué stack estás utilizando en este proyecto específico?
Así que aquí hay un ejemplo de la vida real de la pila de Reddit.
Estas son algunas de las tecnologías que Reddit usa en su sitio web.
Entonces, el sitio está escrito en Python usando un marco llamado matraz.
Se basa en un servidor motor X y utiliza postscripts como su base de datos.
De hecho, hay un sitio web dedicado a compartir diferentes pilas de empresas llamadas Stack share.
Así que lo tengo abierto aquí y esta es la página de Reddit sobre la textura y podemos ver todas las diferentes
tecnologías que utilizan.
Y la genética Python post gresse Amazon S3.
Y te dice a continuación un poco sobre para qué se usan.
No se sienta abrumado por la cantidad de íconos que hay.
¿Cuántos nombres y todas estas categorías diferentes y todos estos términos diferentes?
Ese no es el foco aquí.
Todo lo que quiero mostrarle es que diferentes sitios web usan diferentes tecnologías.
Así que hagamos clic en las pilas y podemos echar un vistazo a algunas otras pilas de la compañía.
Por ejemplo, air B y B pueden ver que FBN B usa raíles y Ruby que usan mi lote de Esky para
javascript Java.
Usan un montón de diferentes tecnologías.
Regresemos a nuestras diapositivas aquí.
Otra cosa que quiero mencionar es que esta línea azul aquí denota el límite entre el
extremo posterior y el frontal.
Entonces discutimos cómo un servidor dinámico construye un sitio dinámico en el back-end.
Así que aquí, en esta parte del diagrama, es donde entra la parte dinámica del sitio.
en rojo, es el caso que averigua si un usuario está conectado si necesitamos mostrar un formulario, qué agregar
para agregar a la página qué imágenes poner si necesitamos tener un registro y botón de bloqueo o un botón de cerrar sesión.
Así que esta es toda la lógica escrita en Python
Todo eso se hace en la parte posterior y en esta parte del diagrama y luego envía de vuelta
h tim L C S S y Javascript.
Así que aquí está la pila que vamos a aprender.
Vamos a usar el nodo j.
Sí.
Así que todavía escribiremos javascript pero lo escribiremos en el back-end.
Vamos a usar un marco llamado Express y también vamos a usar Mangu DBI como nuestra base de datos.
Y luego, por supuesto, también tendremos h t m l c s s y Javascript tal como lo hemos estado usando
en las últimas unidades.
Entonces, en este momento del curso, puede considerarse un desarrollador de front-end o un desarrollador front-end en
formación, donde hemos cubierto todo lo que necesita saber para comenzar a utilizar el
front-end de sitios web.
Ahora comenzaremos a hablar sobre el desarrollo web y una vez que los juntemos hacia el final del curso,
escriba el código del lado del servidor con Express A. J. como Mongo D-B, tenemos acceso
de usuario pero también estamos escribiendo javascript de cliente o de cliente.
H Tim L y C Ss.
Eso es lo que llamaríamos desarrollo web completo.
El término desarrollo web de pila completa se refiere a escribir código en todas las partes de la pila, el extremo posterior
y el frontal.
Aquí hay un diagrama de algunas de las funcionalidades que podemos implementar en la cesta.
Reddit como ejemplo. De nuevo puedes ver que tenemos funciones como verificar si el usuario ha iniciado sesión registrarse un
usuario agregar una nueva publicación a la base de datos crear un nuevo comentario eliminar una publicación de la base de datos ordenar
y clasificar las publicaciones un nuevo sub Reddit agrega un suscriptor al boletín y lo guarda en la base de datos.
Y esto es usando
Y el más importante, por supuesto, es averiguar qué evalúa cada equipo en javascript para enviar de vuelta
al usuario, que luego se envía de vuelta.
Cruzando esta línea azul donde ahora vamos a la parte delantera que H. METRO. S. Assassins y Javascript me
son devueltos y luego veo esto en mi navegador.
Tengo un diagrama más aquí que también habla de front-end versus back-end, pero está formateado de
forma ligeramente diferente.
Este diagrama muestra la secuencia de eventos entre front end y back y en el transcurso de algunas cargas de página.
Así que en la parte delantera si voy a leerlo punto com y actualizar.
Estoy enviando una solicitud para la página de inicio de Reddit y luego va a leerla.
Esa solicitud llega a su servidor y el servidor ve que estoy pidiendo la página de inicio.
Así que hay una lógica del lado del servidor que toma la publicación superior de la base de datos y hace
todo el tiempo LNC SS y javascript que veo aquí y luego me lo envía y luego lo veo en mi navegador.
El siguiente paso es que podría escribir algo en un cuadro de búsqueda como perros, lo que haré ahora
escriba aquí y presione enter.
enter, esta vez se envía una nueva solicitud al servidor de Reddit diciendo que estoy buscando perros.
Y cuando presiono
Entonces el servidor tiene una lógica que toma mis términos de búsqueda y encuentra todas las publicaciones que coinciden con ese
término en la base de datos y luego me da una evaluación de sexo masculino en javascript para la página de resultados
del perro y luego me lo envía de vuelta .
Y luego mi navegador lo renderiza y veo que esta es una versión muy simplificada, obviamente.
Hay muchas más cosas detrás de escena y Reddit creará nuestra propia versión
de una aplicación muy similar para leerla.
Una vez que aprendamos más sobre Express y conozcamos a J. S. y Mongo DB Y haremos una aplicación de pila completa.