Ahora, antes de comenzar a aprender sobre React,
De hecho, hagámonos una pregunta muy importante.
¿Por qué los frameworks front-end, como React,
¿Existe realmente en primer lugar?
¿Por qué no simplemente utilizar Vanilla JavaScript para crear nuestras aplicaciones?
Bueno, respondamos esa pregunta en esta conferencia.
Y vamos a empezar desde el principio.
revisando cómo se construía el sitio web en el pasado,
cómo hicimos la transición a una nueva forma
y cómo eso conduce al surgimiento de los frameworks front-end.
Entonces, en el pasado, antes de 2010,
Todos los sitios web siempre se representaron en el servidor.
Entonces, en la renderización del lado del servidor
un sitio web básicamente se ensambla en el backend.
Entonces en un servidor web, basado en datos y plantillas.
El código HTML, CSS y JavaScript resultante.
luego se envía al lado del cliente, por lo que al navegador web
que solicitó la página.
El navegador simplemente toma este código.
y básicamente lo pinta en la pantalla.
Y un ejemplo típico de sitios web renderizados del lado del servidor.
son todos sitios web creados con WordPress.
Ahora, el JavaScript que solía incluirse
en estos sitios web fue inicialmente sólo para
agregar algunas dinámicas simples a la página,
como animaciones simples, efectos de desplazamiento,
y otras cosas así.
Y normalmente una biblioteca muy popular.
en ese momento se usaba llamado jQuery para esto
porque hizo que JavaScript funcionara exactamente de la misma manera
en todos los navegadores en aquel entonces.
Sin embargo, con el tiempo, los desarrolladores empezaron a escribir más
y más código JavaScript para ser ejecutado por el navegador,
hasta que en algún momento estos
se convirtieron en aplicaciones web de pleno derecho,
que luego condujo al ascenso
de las llamadas aplicaciones de una sola página.
Estas son básicamente páginas web que se representan
en el cliente, no en el servidor.
Entonces, en el renderizado del lado del cliente, básicamente el trabajo
de renderizar una página web se desplaza
del servidor al cliente.
Y ahora ya no llamamos a estas páginas web
sino aplicaciones web.
Ahora una aplicación web todavía necesita datos, que normalmente vienen
desde el backend en forma de API.
Y seguro que ya has trabajado
con API como esa, ¿verdad?
Entonces la aplicación consume estos datos API.
y muestra una pantalla para cada vista de la aplicación.
Y estas aplicaciones de una sola página esencialmente se sienten como
si estuviera utilizando una aplicación nativa de escritorio o teléfono.
Para que pueda hacer clic en enlaces o enviar formularios
sin que la página se vuelva a cargar.
Así que técnicamente siempre estás en la misma página.
y de ahí el nombre de aplicación de una sola página.
Ahora, justo antes de dejar esta diapositiva,
Quiero mencionar rápidamente que el renderizado del lado del servidor
en realidad está regresando ahora mismo.
Así que poco a poco se está volviendo moderno, otra vez.
impulsado por marcos que se construyen sobre
de marcos de renderizado del lado del cliente modernos
como Next.js, Remix y muchos otros.
Pero en cualquier caso, todavía tenemos que aprender cómo
para crear aplicaciones de una sola página, por supuesto,
pero ¿queremos hacerlo con Vanilla JavaScript?
Bueno, en realidad no, no queremos eso.
porque en realidad hay varios problemas
con el uso de JavaScript vainilla
para construir aplicaciones a gran escala,
como veremos en un momento.
Pero primero, establezcamos ese edificio.
cualquier aplicación front-end realmente tiene que ver con el manejo de datos
y luego mostrar esos datos en una agradable interfaz de usuario.
Eso es básicamente todo lo que hace una aplicación web.
si tú lo piensas.
Entonces recibe datos,
cambia los datos a medida que el usuario usa la aplicación,
y siempre muestra los datos actuales en la pantalla.
Lo que esto significa es que la tarea más importante
de una aplicación de una sola página y realmente de cualquier aplicación
y el sitio web es para mantener la interfaz de usuario
sincronizado con los datos, o en otras palabras, es asegurarse de
que la interfaz de usuario siempre muestre el estado actual de los datos.
Ahora resulta que mostrar los datos correctos
y asegurándose de que se mantenga correcto
con el tiempo es en realidad un problema realmente difícil de resolver.
Y para entender por qué es eso
echemos un vistazo a esta aplicación de Airbnb.
Entonces, en esta interfaz, podemos identificar algunos datos.
Primero, tenemos esta lista de apartamentos,
luego tenemos una barra de búsqueda.
Tenemos algunos datos sobre los filtros que se están aplicando.
Y también tenemos este dato aquí,
que indica si la búsqueda debe actualizarse
a medida que el usuario elimina el mapa.
Y todo esto son datos de los que depende el up, ¿no?
Y, de hecho, en la aplicación Airbnb del mundo real.
hay tantos datos.
Entonces esta lista aquí ni siquiera es toda.
Pero de todos modos, como sabemos, todos estos datos deben estar siempre
mantenido sincronizado con la interfaz de usuario
y también con los demás datos,
porque están todos interconectados.
Por ejemplo, cuando cambiamos los datos sobre la ubicación.
o fechas, entonces la interfaz de usuario debe mostrar esas nuevas fechas
y también es necesario actualizar la lista de apartamentos.
U otro ejemplo, el mapa necesita mostrar la ubicación.
de los apartamentos.
Y por tanto, cuando los apartamentos cambian.
el mapa también debe cambiar.
Y lo mismo debería ocurrir al revés.
Entonces, cuando se mueve el mapa, la lista de apartamentos
debería cambiar también, pero sólo cuando el usuario haya
previamente hizo clic en la casilla de verificación verde.
Entonces estos datos aquí están aún más interconectados.
y puede convertirse en un verdadero desastre.
Ahora, como nota al margen, en una aplicación del mundo real,
A cada uno de estos datos lo llamamos parte de estado.
Entonces, basándome en estos ejemplos, les mostré
Yo diría que sin un marco.
sería prácticamente imposible mantener
esta enorme cantidad de datos sincronizados con esta interfaz de usuario súper compleja.
Pero aún así, quizás te preguntes, ¿por qué?
¿Por qué sería tan difícil construir algo?
¿Te gusta esto con Vanilla JavaScript?
Bueno, todo se reduce a dos grandes aspectos.
La primera es que construir una interfaz compleja
con JavaScript básico solo se requieren grandes cantidades
de recorrido y manipulación DOM directo.
Como en este código aquí, donde tenemos
selección manual de elementos, cambio de clases, recorrido DOM
e incluso manipulación de texto y estilos CSS.
y esto está garantizado que se convertirá en una absoluta pesadilla.
en una aplicación compleja como Airbnb,
porque nuestro código sería extremadamente complejo
y muy difícil de entender, y probablemente simplemente terminemos
con un enorme lío de código de espagueti enredado.
Entonces este es el primer problema.
El segundo gran problema es
que en las aplicaciones típicas de Vanilla JavaScript,
estado como texto simple o números
a menudo simplemente se almacenan directamente en el DOM.
Entonces, directamente en los propios elementos HTML,
en lugar de en un lugar central de la aplicación.
El resultado es que terminamos con muchas partes.
de que la aplicación acceda y cambie ese estado DOM directamente,
lo que hace que el código espagueti sea aún más difícil de entender.
Y lo que es peor, seguramente introducirá muchos errores.
en nuestra aplicación.
Y nadie quiere errores, ¿verdad?
Ahora, por supuesto, podrías intentar resolver estos problemas.
por tu cuenta, pero luego terminarás creando
su propio marco, que muy probablemente
ser mucho peor que todos los marcos bien establecidos
que ya existen.
Entonces, en este punto, también podrías usar
un marco probado en batalla como React.
Ahora bien, ahora que sabemos por qué es tan difícil escribir
una aplicación de una sola página con solo JavaScript,
podemos responder la pregunta fundamental
que preguntamos al principio.
Entonces, ¿por qué existen realmente los frameworks front-end?
Bueno, ya respondimos esa pregunta.
a lo largo de esta conferencia.
Entonces, la gran razón fundamental por la que existen estos marcos es
porque mantener una interfaz de usuario
sincronizar los datos es muy difícil,
y también es mucho trabajo.
Básicamente, marcos como Angular, React o View.
tome este arduo trabajo de sincronizar datos
con la interfaz de usuario lejos de nosotros los desarrolladores.
Entonces resuelven este problema realmente difícil.
para que los desarrolladores podamos centrarnos sólo en los datos
y en la construcción de nuestras propias interfaces de usuario.
Ahora bien, diferentes marcos tienen diferentes enfoques.
para hacer esto, pero todos son similares
en el hecho de que mantienen la interfaz de usuario y los datos sincronizados a lo largo del tiempo.
Ahora, otra cosa extremadamente valiosa que los marcos
nos dan, es el hecho de que básicamente hacen cumplir
una forma correcta de estructurar y escribir código.
Básicamente, los autores de cada uno de estos marcos
se le ocurrió una buena manera de estructurar aplicaciones,
para que otros desarrolladores puedan seguir estos
convenciones también, para construir mejores aplicaciones
Con suerte, con mucho menos código espagueti.
Finalmente, los frameworks brindan a los desarrolladores, y especialmente a los equipos
una forma coherente de crear aplicaciones web.
De esta manera, todos en el equipo aportarán su parte.
de la aplicación con el mismo estilo que todos los demás,
que al final creará
una base de código y un producto más consistentes.
Y ahí tienes,
Esta es la razón por la que el desarrollo web moderno lo es todo.
sobre los marcos de JavaScript.