La web nació en el lejano 1992 y se ha convertido en la tecnología más revolucionaria del mundo después de internet. Tanto así que es común que la gente confunda internet con web o crea que son sinónimos. La web es un sistema distribuido de documentos HTML que pueden consumirse a través de un navegador web conectado a internet usando el protocolo http.
La web usa una arquitectura cliente / servidor: el cliente hace una petición a un recurso y el servidor responde. Por ejemplo, si escribes https://ed.team en tu navegador, el cliente solicitará la información al servidor, el cual consultará si tienes los permisos necesarios y de ser así te entregará el contenido de esa url.
Por la poca potencia de las computadoras clientes, durante muchos años ser desarrollador web era casi lo mismo a ser backend hoy en día. El concepto de frontend como tal no existía. CSS era demasiado joven y JavaScript era considerado un lenguaje de juguete y no uno profesional.
Si quieres saber qué significa términos como frontend o backend en el desarrollo web, revisa el siguiente video:
HTML5 cambió todo dándole muchísimo poder a HTML y su API, llegó la versión 3 de CSS (la que vino después de la 2 porque como tal nunca se llamó CSS 3) y cada vez más desarrolladores se preocuparon por lo que pasaba en el frontend. En esos tiempos jQuery era el rey de la web porque se encargaba de simplificar JavaScript, de pelearse con los navegadores para que tu código funcione sin problemas en todos. En aquellos tiempos era una completa locura atreverse a escribir JavaScript sin jQuery.
Sin embargo, la web siguió avanzando, tecnologías como CSS, JavaScript y las API web avanzaban a un ritmo vertiginoso, los navegadores lanzaban una o a veces dos versiones nuevas cada mes (Firefox tuvo que cambiar su ritmo de lanzamientos para no quedarse atrás). Se masificó el cloud computing y las aplicaciones web. Entonces el navegador web se convirtió en la aplicación más utilizada, practicamente un mini sistema operativo donde corrían aplicaciones que antes solo habíamos visto en escritorio. Hoy tenemos versiones de Office, Photoshop, juegos con gráficos 3D, videoconferencias y aplicaciones monstruosas como Facebook o Google Maps o corriendo desde el navegador, sin instalar nada adicional, ni siquiera extensiones o plugins.
Entonces se populariza el concepto de SPA (Single Page Application), una aplicación web que para cambiar de vista no recarga la ventana, sino que a través de un proceso de routing modifica la interfaz y la asocia a una URL diferente, todo sin salir de la página actual. Para que las aplicaciones web funcionen como reales aplicaciones no podiamos esperar que la página recargue por cada click. No parecería una aplicación sino una antigua página web. Tecnologías como AngularJS, Ember o Meteor estuvieron a la cabeza de este momento, adaptando el modelo MVC (modelo, vista controlador) al frontend.
¿Qué es MVC?
Es una arquitectura de software que permite organizar las partes de una aplicación de la siguiente manera:
- Modelo. Los datos de la aplicacion y el acceso a ellos
- Vista. La interfaz con la que interactúa el usuario con los datos entregados por el modelo.
- Controlador. La lógica de negocio, lo que debe hacer la aplicación. El controlador es una especie de puente entre la vista y el modelo.
Es el usuario quien al interactuar con la vista desencadena las acciones del controlador.
El enfoque de React.js
Para los ingenieros de Facebook que crearon React, pintar los datos de la vista era su problema más complejo. Una aplicación gigante como Facebook actualiza su vista y sus datos a un ritmo muy veloz. Y modificar el DOM es la tarea más pesada para el navegador. Pintar elementos en la pantalla requiere varios procesos por detrás (de hecho, mostrar algo en la pantalla es solo el último de ellos).
DOM (Document Object Model) Es la estructura interna de un documento HTML. Es como un árbol que se ramifica por cada uno de los elementos del documento (nodos). La labor del navegador es interpretar el DOM a partir del código HTML, JavaScript y CSS y dibujarlo en pantalla. Cada cambio en el DOM implica hacer nuevos cálculos para reinterpretar el nuevo estado.
Además, aunque ha sido un estándar de la industria mantener separados HTML, CSS y JavaScript, a mayor escala era un lío mantener la estructura de una app con un elemento HTML que tiene una lógica en un archivo JavaScript que está en otra carpeta y unos estilos CSS que estan en otra carpeta diferente. Escalar requeria pensar diferente y desafiar los paradigmas. Y eso fue React.js, un cambio de paradigma.
El lanzamiento de React.js
En 2013, Pete Hunt presentó React como solo la vista (V) en el modelo MVC en el JSConf EU en una charla titulada: "React: Repensando las buenas prácticas". En esencia React proponía:
- Construir componentes, no templates porque la lógica esta inevitablemente unida al marcado del elemento.
- Los componentes son bloques cohesionados de piezas de UI reutilizables.
- No más two way data binding (enfoque de AngularJS) sino cambiar cada componente en cada actualización
- Virtual DOM para optimizar las actualizaciones del DOM
- JSX para escribir el marcado dentro de JavaScript con una sintaxis sencilla en que incluso los diseñadores web puedan contribuir porque es casi idéntico a HTML.
Aquí puedes ver el video de la presentación (en inglés):
Componentes, desafiando los paradigmas
En el desarrollo web siempre se había mantenido el paradigma de que HTML es estructura, CSS es presentación y JavaScript comportamiento. Y por tal motivo debían mantenerse separados en ubicaciones o archivos diferentes. React decidió romper ese paradigma y juntar HTML, CSS y JavaScript en un solo paquete llamado Componente (no confundir con Web Component). De esa manera en lugar de tener una aplicación gigantesca como un jinga en que al mover algo comprometes todo lo demás, ahora puedes tener todos los elementos de la interfaz con una lógica propia que al juntarlos pueden construir algo más grande comunicándolos a través del Estado de la
Cualquier programador JavaScript sabe que crear elementos en el DOM y modificarlos no es algo revolucionario. Siempre se estuvo haciendo y de hecho eso era lo que hacía jQuery. Entonces, además de los componentes, ¿qué de interesante traía React? JSX y Virtual DOM.
JSX
JSX es una forma de escribir HTML en JavaScript con una sintaxis muy parecida a HTML que luego es transformada en la compilación. Cuando se presentó fue amada y odiada por igual. ¿HTML en JavaScript? ¡Que abominación! ¿XML en JavaScript (parecía XML 😅)?
Sin embargo, la comunidad terminó aceptando que JSX les ahorraba mucho tiempo en la creación de componentes y hacía el desarrollo mucho más natural.
Ejemplo:
render() {
return (
<div className="App">
<span>Clicks: {this.state.counter}</span>
<button onClick={this.add}>Click me!</button>
</div>
)
}
Virtual DOM
El otro concepto nuevo fue el Virtual DOM. Como dije, interpretar y pintar el DOM en pantalla es una de las tareas más costosas para el navegador, por lo que el equipo de desarrollo creo el Virtual DOM, una representación del DOM guardada en memoria que no requiere ser pintada en pantalla por el navegador. Cada vez que hay un cambio en la interfaz, React compara el virtual DOM con el DOM real para identificar únicamente las partes que deben cambiar en pantalla y solamente modificar esas partes. Podría ser algo tan sencillo como que al dar like en un botón el contador aumente en uno. De esa manera se ahorran muchos recursos.
Estado
Piensa en el estado como una fotografía del momento de tu aplicación (de los datos y de la interfaz): cada vez que algo cambie, el estado cambiará y eso debe reflejarse en la vista. El estado puede ser de dos tipos:
- Estado del componente. Cada componente tiene su propio estado que no es compartido con otros, a excepción de sus componentes hijos.
- Estado global de la aplicación. La información del estado de todos los componentes, por medio de la cual estos pueden comunicarse.
Ejemplos muy sencillos de cambio de estado:
- Un botón de like que aumenta en uno al pulsarlo (pero no aumentará al pulsarlo nuevamente)
- Haber iniciado sesión o no.
- Agregar un elemento al carrito de compras
- Enviar un comentario en un foro o chat
Ahora, pensemos más detenidamente en el ejemplo del carrito. Si agrego un producto al carrito, el carrito debe reflejar ese producto como una unidad más con su precio pero el producto en sí mismo debe marcarse como "agregado al carrito" para que no se agregue más de una vez por error. Es decir, ambos componentes (el producto y el carrito) aunque tienen su propio estado, deben estar sincronizados de alguna manera a través del estado global.
Para eso React utiliza herramientas como Redux, Mobx o Context API que permiten que los componentes se suscriban a él para aplicar los cambios que correspondan cuando este cambie.
React en el backend
Una gran ventaja de React es su versatilidad pues además del frontend, puede usarse en el backend y para crear aplicaciones móviles (React Native). Aunque su uso "por defecto" es crear SPA (frontend) y dejarle al navegador el trabajo de la interpretación del código, esto trae problemas de posicionamiento puesto que los motores de búsqueda, como Google, leen HTML y una SPA no tiene HTML (sí tiene pero es apenas un div vacío) ya que todo es generado dinámicamente por JavaScript. Aunque Google ha empezado a interpretar JavaScript, podemos usar React.js en el backend que será interpretado como si fuera un motor de plantillas. De esa manera, es el servidor con Node.js quien interpreta React y entrega al navegador HTML, CSS y JavaScript como en un sitio web tradicional.
El sitio web de EDteam usa Next.js para interpretar React en el servidor y entregar al cliente un sitio que se siente natural, que aprovecha el posicionamiento en Google pero también la filosofía de componentes de React.
¿Vale la pena usar un producto de Facebook?
Probablemente te preguntes qué tan confiable puede ser usar un producto de Facebook en tus desarrollos considerando los escándolos en los que se ha vuelto metida la compañía. Es una preocupación válida pero te explicaré porque no es un problema y más bien es una ventaja:
- React.js es Open Source, cualquier programador puede revisar su código y contribuir a él. Lo que impide que haya código espia o de rastreo escondido.
- React.js es una libreria creada por los ingenieros de Facebook, sin ninguna relación con la política comercial de la empresa.
- React.js fue creada para solucionar los problemas de mantener aplicaciones gigantes como Facebook e Instagram. Si les funciona a ellos, por supuesto que te funcionará a ti.
En 2017 Facebook cambió la licencia de React a BSD con patentes, despertando miedo o preocupación de la comunidad porque en esencia esta nueva licencia decía que si tu competías con algún producto de Facebook ellos podrían demandarte o quitarte la licencia de React. Es decir, si desarrollas una aplicación para pedir comida con React y un día Facebook decide entrar a ese sector, estás en problemas.
La comunidad reaccionó abandonando React y pasando a otras alternativas (la más famosa Preact), lo que hizo a Facebook retroceder y poner React bajo la licencia MIT que es la que usa hasta ahora.
Aprende React en EDteam
Si ya te quedo claro que React.js es una excelente herramienta para el desarrollo web y quieres acceder al enorme catálogo de oportunidades laborales con React, te invitamos a nuestra nueva especialidad de cuatro cursos que te llevará desde cero hasta crear tu primer aplicación. Los cursos serán los siguientes:
- React.js Desde CeroPrograma tus aplicaciones web con la librería frontend que usa Facebook e Instagram.
- Rutas y APIs con React.jsAprende a integrar React.js con librerías de terceros para ampliar sus características.
- Manejo del estado con React.jsAprende a manejar un estado global para toda tu aplicación para controlar el estado de los componentes
- Taller: Desarrollo de una plataforma de cursos con React.jsAprende a crear tu propia aplicación de cursos con React.js y basada en la experiencia de EDteam.