Esta clase pertenece al curso de reclutamiento IT. Partiremos desde la clase anterior. Te aconsejo que hagas el curso de forma secuencial, y en caso de que estés perdido/a, puedes acceder al índice del curso aquí.
En esta clase, aprenderemos sobre todo lo relacionado con React. Y digo todo lo relacionado porque esta librería de JavaScript tiene todo un ecosistema detrás. Una vez hayas leído este artículo, comprenderás mucho mejor React y podrás reclutar mejor este tipo de perfiles. Por supuesto, todo explicado de forma sencilla para IT Recruiters, que no tenéis que tener ni es necesario que tengáis formación técnica en tecnología.
¿Qué es React?
React es una librería de JavaScript que nos permite hacer aplicaciones web en entorno cliente. La diferencia entre librerías y frameworks la abordaremos más adelante (por ahora por simplificar no diferenciaremos entre ellos) pero esta definición de React debería de ser entendible para ti (al menos los conceptos de aplicaciones web y de entorno cliente). En caso de no serlo, vuelve a la clase anterior.
Tanto librerías como frameworks nos dan ciertas funcionalidades que permiten que el desarrollo web sea más rápido y robusto (y con robusto hablo de seguridad, más fáciles de mantener etc.), lo que incide en un menor coste de la aplicación a lo largo de su ciclo de vida. Puedes repasar el ejemplo que ponía en la clase de Angular para comprender esto mejor, ya que no me interesa ponerte otro ejemplo exactamente igual pero con el código de React, simplemente porque quiero que comprendas los conceptos, a ti como IT Recruiter la implementación del código te es indiferente y quiero mantener el curso lo más sencillo posible.
React, a diferencia de Angular, puede escribirse tanto con JavaScript como con TypeScript, siendo una buena práctica cada vez más extendida el escribir el código de React con TypeScript. Puedes repasar sobre las diferencias entre JavaScript y TypeScript aquí. Y, por supuesto, React sirve para construir Single Page Applications (SPA), que si no recuerdas este concepto, puedes repasarlo aquí.
React fue creada por un ingeniero de software de Facebook en torno a 2010, pero su código no se hizo open-source (es decir, abierto a la comunidad, por explicarlo de forma sencilla) hasta 2013. Antes de ello ya se había implementado en el feed de noticias de Facebook en 2011, en Instagram en 2012 etc. El crecimiento de React desde entonces ha sido tremendo. Hablamos de la principal librería con la que se hace frontend en el mundo (a día de hoy, aunque varía por país, por ejemplo en España hay más ofertas de trabajo y más proyectos de Angular que de React), y está mantenida por el gigante Facebook y una importante comunidad de desarrolladores amantes de React. Todo ello unido a su potencia hacen de React una librería muy atractiva para aprender y hacer proyectos IT para programadores de todos los rincones del planeta.
¿Importa mucho la versión de React para reclutar?
En la actualidad, en septiembre de 2021, estamos en la versión 17.0.2, que fue lanzada en marzo de 2021. A diferencia de Angular, aquí no se saca una nueva versión aproximadamente cada 6 meses, sino cuando es estrictamente necesario. Como reclutador, la única distinción importante es que el desarrollador de React tenga experiencia trabajando con hooks y no sólo con clases. Te explico por qué.
El 16 de febrero de 2019, se lanzó la versión 16.8 de React. Esta versión revolucionó React, ya que introducía React Hooks. Básicamente, y por simplificarlo mucho, esto significaba un cambio de paradigma en React.
Pero… ¿qué es un paradigma de programación? Por simplificar, vamos a decir que un paradigma de programación es una filosofía que a su vez se ve reflejada en una forma de programar. Por ejemplo, el fútbol se puede jugar con una filosofía más tiqui-taca, más ofensiva, más defensiva, más al contragolpe… Pues los paradigmas de programación, igual, una filosofía de programación que se ve reflejada en la forma de programar, a fin de hacer el código lo más óptimo y limpio posible.
Pues bien, antes de la versión 16.8, React utilizaba un paradigma de programación basado en clases, basado en la Programación Orientada a Objetos (algo que excede esta clase y que no te voy a explicar aquí, pero sí más adelante en este mismo curso de Reclutamiento IT). Y, a partir de la versión 16.8, React cambió el paradigma de programación, pasando a usar programación funcional. Y estas funciones que usamos en React aplicando programación funcional son los famosos React Hooks.
Dado que ha sido un cambio sustancial en React, y que la forma de programar ha cambiado de forma significativa, yo (y es una opinión personal) no contrataría a nadie con React que no tenga experiencia (al menos, como mínimo, que tenga experiencia haciendo proyectos personales) con React Hooks. ¿Por qué? Porque incluso aunque hayas estado en una empresa trabajando con versiones antiguas de React, si hay un cambio tan grande de la librería y ni siquiera tienes curiosidad para investigar y probar por tu cuenta las nuevas funcionalidades de la misma (y te puedo asegurar que el cambio a React Hooks ha ahorrado mucho código y dolores de cabeza que te daba React con clases-es decir, React usando POO o Programación Orientada a Objetos), teniendo en cuenta que la experiencia del programador usando React Hooks ha mejorado mucho respecto a la que había usando React con clases, el código es más limpio, óptimo y mantenible… Esto me indica una falta de interés tremenda. Siempre habrá excepciones, de personas que por x motivos no hayan podido dar el salto de versiones antiguas de React a las nuevas que ya implementan React Hooks pero… A día de hoy, septiembre de 2021, España, no conozco un solo programador de React que no trabaje React con Hooks, aplicando el paradigma de la programación funcional. Por algo será.
Desde la versión 16.8 de febrero de 2019 dónde hubo este cambio tan grande en React ha habido nuevas versiones, pero en ellas no se implementa ningún cambio gigante que a ti como IT Recruiter deba preocuparte a la hora de reclutar.
Frameworks de componentes de interfaces de usuario
Material UI
Quiero que antes de seguir te revises de la clase anterior lo referido a Angular Material. Pues bien, una vez ya revisado, te puedo contar que Angular Material implementaba para Angular Material Design, que no es más que un lenguaje de diseño desarrollado por Google para su sistema operativo Android, sus aplicaciones web etc. Gracias a Material Design, ya sea en web o móvil, reconoces una aplicación desarrollada por Google al instante.
Pues bien, un framework (o una librería, no quiero hacer distinciones para mantener esto sencillo) de componentes de interfaces de usuario te permite acelerar tremendamente el desarrollo del frontend (aunque tenga inconvenientes como que los clientes siempre suelen querer personalizar dichos componentes, de modo que la persona técnica correspondiente es la que ha de valorar si es más óptimo personalizar los componentes de la librería de interfaces de usuario o desarrollarlos el equipo técnico desde cero) y React no tenía ninguno que permitiera aplicar Material Design que, honestamente, es una normativa de diseño muy elegante y óptima.
Por tanto, un grupo de desarrolladores se pusieron manos a la obra y crearon Material UI, que es la aplicación de Material Design para React. Y, este framework ha sido todo un éxito: usada por más de 1M de programadores, en al menos 180 países y por empresas tan conocidas como Amazon, Netflix, Spotify o la NASA.
Por si quieres curiosear, aquí te dejo el listado de componentes de Material UI, y espero que te haya quedado muy claro para qué sirve este potente framework de componentes de interfaces de usuario para React.
Server Side Rendering con Next.js
Siendo React una librería que nos permite hacer SPA-lo mismo para lo que sirve Angular-era de esperar que sus SPA tuvieran los mismos problemas relacionados con el SEO que Angular. Y, no sólo eso, y es que Angular, al ser un framework, ya te facilita muchas cosas que React al ser una librería no. Y si quieres hacer una aplicación grande y optimizada, te va a tocar tener que configurarlas a mano. Pero… Alguien ya ha pensado la solución para ello.
Vercel, compañía cuyo CEO es Guillermo Rauch, desarrolló Next.js, un potente framework que nos permite hacer Server Side Rendering (renderizar las aplicaciones web desde el servidor, en vez de desde el cliente, que es desde dónde lo hace React de forma natural) para beneficiarnos de esta funcionalidad.
¿Y qué beneficios aporta Next.js? Te permite desplegar aplicaciones de React con Server Side Rendering (SSR) sin tener que configurar nada (ya viene una configuración por defecto con cierto nivel de optimización, aunque es evidente que tú podrás personalizar la configuración para optimizarla más), te soluciona los problemas que las SPA tienen con el SEO, permite un rápido desarrollo de tus aplicaciones web etc.
Como principal contra, podríamos decir que Next.js si quieres hacer proyectos ya con cierto nivel de profesionalidad (en equipo) es de pago (aunque esto también tiene sus ventajas, al saber que siempre tienes a una empresa detrás ofreciendo soporte), lo que hace que muchos equipos de desarrolladores y compañías utilicen otras soluciones de tipo gratuito.
En cualquier caso, Next.js es una gran solución de Server Side Rendering y a día de hoy si queremos hacer SSR con React, es el estándar.
Generando sitios estáticos con Gatsby
Gatsby es un framework de código abierto de React que nos permite generar sitios estáticos. Repasemos: React-igual que Angular o Vue- nos permiten generar SPAs, con Next.js generamos aplicaciones web usando SSR pero… ¿qué nos aporta Gatsby generando sitios estáticos?
Pues bien, en 2015, el ingeniero informático y emprendedor tecnológico Kyle Mathews quería crear aplicaciones web con React aún más rápidas que las que se hacían en aquel momento. Es importante mencionar que Gatsby a día de hoy es una empresa, lo cual significa que adem´ás ofrecen distintos productos orientados al desarrollo de software, servicio técnico etc. lo que le da un importante valor añadido a Gatsby (y, exactamente como con Next.js, que sea una empresa también tiene ciertos contras en temas de coste, por ejemplo).
Y bien, ¿por qué usar Gatsby en vez de Next.js o React a secas? Lo veremos mejor con unos ejemplos, pongamos que queremos visitar una tienda online:
· Uso de React a secas: yo tengo la estructura de mi web (el HTML) y mediante JS/TS se va modificando dicha estructura (lo que veo) a medida que navego por la tienda online. En este caso, el renderizado es en cliente (en mi navegador). Tarda un poco más en cargar-hablamos de unidades de tiempo de segundos/milisegundos- la página al principio (ya que tiene que cargar todos los archivos de JS/TS), pero luego al estar ya todo cargado es muy rápido. Tiene los problemas de SEO antes mencionados.
· Uso de Next.js: te van enviando trozos de la página web a medida que los vas necesitando desde el servidor, y una vez en cliente funcionan como SPA. Es decir: yo estoy en la home de la tienda online, y me lo envía ya renderizada desde el servidor. Cuando navego al apartado productos, de nuevo el servidor lo renderiza y lo envía renderizado al navegador etc. Así se solucionan los problemas de SEO y es más rápido (de inicio), aunque luego evidentemente estas peticiones a servidor tienen su tiempo de carga.
· Uso de Gatsby: Gatsby hace Server Side Rendering a lo bruto. Y con a lo bruto me refiero a que renderiza toda la aplicación web una vez, te la envía a tu navegador y ahí ya se transforma en SPA. Es decir: si yo entro en la home de la tienda online, directamente se me envía renderizada toda la tienda online, de forma que puedo navegar de forma muy rápida por toda la tienda online y también soluciono los problemas de SEO. La carga inicial, pese a renderizar toda la web app de golpe, es rápida, ya que estamos renderizando en servidor (y no en cliente, dónde tarda más).
SEO, tiempo de carga… Todo esto es super importante para que la web posicione arriba en los buscadores, porque, recordemos, cuanto más arriba en Google (o en tu buscador favorito), más posibilidades de que el producto/servicio que ofrezcas en tu web se venda.
Importante, esto no quiere decir que Gatsby sea mejor que Next.js o que Next.js sea mejor que React. Todo dependerá de lo que se necesite en cada proyecto.
También me gustaría puntualizar que Gatsby está añadiendo nuevas características, habiendo sido lanzada el día 17 de septiembre de 2021 la versión beta de Gatsby 4, que incluye entre otras SSR.
En este caso, la explicación era de hilar fino porque ya hemos entrado con las diferencias entre React, Next.js y Gatsby en temas de rendimiento web, pero espero que te haya quedado claro, ya que no era un tema especialmente sencillo.
Testing con React
Tests Unitarios
Para repasar el concepto de test unitario, puedes repasarlo en la clase anterior aquí.
Jest
Jest es un framework de testing creado y mantenido por Facebook que nos permite correr y ejecutar los tests de React, además de, por supuesto, ofrecernos ciertas funciones que nos permitan chequear que los ficheros de nuestros componentes de la aplicación funcionan como nosotros hemos programado que funcione.
Enzyme
Enzyme es una librería de testing para React creada y mantenida por la comunidad. Permite un testing unitario muy exhaustivo pero tiene como problema que ese gran nivel de exhaustividad también facilita que pueda ocurrir que a veces los tests no pasen aunque a nivel funcional la web siga funcionando perfectamente. Y esto puede ser porque hayamos cambiado el nombre con el que seleccionamos una parte de la web, pero no lo hayamos cambiado en el test (explicado en palabras llanas y sencillas). Como contra, no tiene a día de hoy (septiembre de 2021) soporte para la última versión de React (17.0.2, lanzada el 22 de marzo de 2021) y hay que utilizar un adaptador para hacerlo funcionar con esta versión (por ahora los hay no oficiales). Por tanto, es una excelente librería de testing unitario, hay que conocer sus pros y sus contras, y utilizarla en aquellos proyectos en los que el beneficio supere a sus aspectos negativos.
React Testing Library
Esta librería de React, desarrollada por el popular programador de React Kent C. Dodds, es una librería de testing unitario muy ligera que se caracteriza por hacer tests desde el punto de vista del usuario. Es decir: yo quiero comprobar que un módulo de mi aplicación (por ejemplo, el módulo de registro de mi tienda online) funciona de forma adecuada. Con esta librería, a diferencia de cómo ocurría con Enzyme, ya pueden cambiar ciertos aspectos en el código que no importen al usuario, que mientras que esos cambios no afecten al uso de la aplicación desde el punto de vista del usuario, los tests seguirán pasando. Es una librería que está desarrollada para potenciar buenas prácticas de testing.
A día de hoy, y aunque es cierto que Enzyme en algunas ocasiones puede ser útil, el estándar para realizar tests unitarios en React es la combinación de Jest con React Testing Library.
Testing end to end
Si quieres repasar lo que es el testing end to end (e2e), puedes repasarlo aquí. Honestamente, en este caso no hay mucho que añadir a lo ya mencionado en la clase sobre Angular. El estándar es Cypress y, aunque se pueden utilizar de forma minoritaria otras librerías, Cypress es el framework gold standard para testing e2e en frontend actualmente (septiembre de 2021).
Stack MERN
Seguro que como IT Recruiter has escuchado muchas veces el stack MERN y has dicho… pero… ¿qué es MERN? Pues bien, MERN no es otra cosa que usar de forma conjunta distintas tecnologías para hacer una aplicación web en su totalidad (fullstack), tanto la parte backend como la parte frontend.
Con MERN utilizaríamos una base de datos no relacional o no SQL (Mongo DB en este caso), en la parte backend Node.js (JavaScript ejecutándose en entorno servidor) y Express.js es un framework de Node.js (evidentemente, para el backend). La parte frontend, en este caso, se haría con React.
Como comentaba en la clase de Angular, a los amantes de la comunidad JavaScript/TypeScript (JS/TS), el poder hacer el back y el front con el mismo lenguaje de programación (en este caso se puede usar JS o TS, aunque cada vez es una mayor tendencia usar React con TS, ya que es una buena práctica) facilita mucho el desarrollo, da versatilidad a los desarrolladores, ahorra costes etc. Por todo ello, el Stack MERN (igual que MEAN) es muy potente y muy popular.
Librerías populares de React
React Redux
React Redux es una librería para React que sería el equivalente a NgRx para Angular. Lo cierto es que tú como IT Recruiter no necesitas conocer mucho más que lo ya dicho en la clase anterior: que React Redux me permite manejar estados complejos de aplicaciones web desarrolladas con React de la forma más sencilla y mantenible posible.
Índice del Curso
Recuerda que para seguir nuestro curso de Reclutamiento IT sólo tienes que ir al índice y seguir por la clase de tu interés. ¡Feliz aprendizaje!
Si tienes dudas, recuerda que puedes preguntarle a la comunidad con el hashtag #SoySalvajeReclutamientoIT en Twitter y que puedes contactar con nosotros (aunque no me comprometo a responder por falta de tiempo, aunque responderé si puedo) por Twitter, Instagram o por nuestro formulario. Por supuesto, recuerda que si quieres que te ayudemos a crecer como profesional de forma más personalizada, no dudes en consultar nuestros servicios. Y si estás pensando en comprar algún producto relacionado con informática, no dudes en consultar nuestras recomendaciones en la sección Productos. Nos vemos en la siguiente clase.