Angular

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 Angular. Y digo todo lo relacionado porque este framework de JavaScript (como todos los frameworks potentes de JavaScript) tiene todo un ecosistema detrás. Una vez hayas leído este artículo, comprenderás mucho mejor Angular 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 Angular?

Angular es un framework 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 Angular 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. Vamos a ver esto de funcionalidades con un ejemplo mío muy simple, y así vas a comprender muy rápido qué ventajas nos da Angular.

Lo vamos a ver con el sencillo ejemplo de las validaciones. Imaginemos que tenemos el típico formulario en una página web dónde te tienes que registrar. Y te piden que pongas tu email. ¿Cómo sé yo que el usuario va a meter su email y no cualquier otra cosa? Si se me empiezan a acumular datos que no son correctos en mi base de datos (imagínate que mi aplicación web es una tienda online) voy a tener problemas. Pues bien, antes de Angular, para comprobar que un email tenía formato de email y que podía aceptarlo como un email válido del usuario, tenía que hacer un poco de trabajo…

En ese código básicamente le digo al programa que reciba una cadena de texto, y que si tiene formato de email, que devuelva que es correcto y que si no, no. Pero claro, luego esta función (una función en programación es simplemente un trozo de código que recibe unos inputs y devuelve unos outputs, sin más) tiene que ser utilizada. Imagínatelo como una cadena de producción: recibes un cono, una bola de chocolate, y te devuelve un helado. Pues lo mismo.

El caso, que tenías que hacer esto, luego esta función la llamabas (para poder usarla) desde un trozo de código en concreto y bueno… Al final, era un poco engorroso, ¿no? Igual validar si un email era correcto o no te llevaba en torno a 8-10 líneas de código. Y este es un ejemplo muy sencillo, otras cosas eran mucho más engorrosas.

Ahora bien, ¿sabes cómo se hace esto con Angular? Pues como Angular es un framework de JavaScript, y un framework a grosso modo es como una gran caja de herramientas ya listas para usar, y con herramientas me refiero a funcionalidades pues… ¿Qué quiero validar que lo que me pone el usuario es un email y no cualquier otra cosa? Pues sólo tengo que coger la herramienta (mediante una importación que es una simple línea de código) y usarla (que es otra línea de código).

Pues con esto ya lo tendríamos. Ya podríamos discutir a nivel técnico sobre si esta forma de hacerla es mejor o peor, pero a grosso modo, me permite hacer lo que hacía antes con 8-10 líneas de código en sólo 2. Un 75% menos. Ahora comprendes por qué se demandan tanto los frameworks y librerías de JavaScript, ¿verdad?

Pues bien, Angular es un framework de JavaScript que se escribe con TypeScript (para tener una aplicación web de frontend más robusta) que nos permite hacer Single Page Applications (SPA). Es decir: que yo puedo navegar por la aplicación web optimizando los tiempos de carga y sin hacer esperar al usuario prácticamente nada (a diferencia de lo que ocurre con aplicaciones web que no utilizan frameworks ni librerías de JavaScript, que cada vez que cambiabas de sección en la página web recargaba la página, siendo ligeramente molesto para el usuario). Podríamos hablar mucho más sobre una SPA, pero por resumir, todas las aplicaciones web modernas son SPA porque son más rápidas y eficientes que una página web que no utiliza frameworks ni librerías de JavaScript (como norma general).

Angular, además, es un framework de JavaScript desarrollado y mantenido por Google, y es de código abierto. Como puedes imaginar, tener el apoyo de un gigante como Google detrás da mucha confianza. Al ser de código abierto, ha surgido un tremendo ecosistema alrededor de Angular, muchos desarrolladores usándolo etc. Todo ello ha contribuido a su popularización, siendo en la actualidad (agosto de 2021) el framework de frontend más usado en España.

¿Qué diferencia Angular de Angular.js?

Angular.js fue la primera versión de Angular, lanzada por Google en Octubre de 2010. Se programaba con JavaScript y, aunque en su momento fue muy útil, gozó de gran popularidad y todo eso… Angular 2 supuso una ruptura radical con Angular.js, lo que enfadó a muchos programadores especializados en Angular.js que tuvieron prácticamente que aprender un framework nuevo. Angular 2 se programa con TypeScript y tiene una estructura de directorios determinada, todo muy ordenadito, debido a esto es muy fácil pasarse a NestJS (un framework de Node.js, básicamente JavaScript en entorno servidor) y ser capaz de hacer aplicaciones de backend aprendiendo de forma relativamente rápida, ya que muchos conceptos son muy parecidos en Angular y en NestJS.

A mí, personalmente, que sé programar con Angular, Angular.js me parece un auténtico churro a día de hoy. Angular 2 y el resto de versiones son conocidas por los programadores como Angular, mientras que Angular 1 es conocido como Angular.js. Para mí, siendo tú IT Recruiter, la principal diferencia que debes hacer a la hora de reclutar es entre Angular.js y Angular.

¿Importa mucho la versión de Angular para reclutar?

Google lanza una nueva versión de Angular cada 6 meses y en la actualidad, agosto de 2021, la última versión de Angular disponible es Angular 12, que fue lanzada en mayo de 2021. Es cierto que muchas veces te pedirán requisitos como «que tenga experiencia superior a Angular 8«, por ejemplo, pero en realidad cualquier programador que tenga una experiencia con Angular, no le costará aprender de forma rápida las novedades de las nuevas versiones. Lo digo porque muchas veces se descartan candidatos por desconocimiento del mercado. De hecho, las últimas versiones de Angular apenas han tenido mejoras significativas respecto a las últimas, pero Google tiene un compromiso de sacar aproximadamente cada seis meses una nueva versión.

Angular CLI

Es raro que te encuentres esto como requisito para una oferta de Angular, pero por si acaso te lo explico.

Pues bien, esta imagen es de Visual Studio Code, un entorno de desarrollo, dónde yo escribo el código de TypeScript con Angular. Pues bien, en la parte de arriba, dónde hay números y líneas de código, eso es el código, sin más.

En la parte de abajo, que es una consola negra, que yo escribo ng -o serve (la instrucción para iniciar una aplicación web de Angular en mi ordenador y que se ejecute-y que pueda acceder a ella-desde mi navegador web), pues eso es Angular CLI. Simplemente la consola de Angular que me permite desde instalar librerías, iniciar mi aplicación, subir mi código a repositorios como GitHub etc. Resumen: que Angular CLI con unos simples comandos hace mucho más fácil la vida del programador.

Librerías de Componentes de Interfaces de Usuario

Angular Material

Pues bien, una de las características más útiles de cualquier framework de JavaScript, es la posibilidad de hacer el código en componentes. Es decir, imagínate que quiero hacer una tienda online. Puedo hacer un componente que se llame usuario (y pueda reutilizar todas sus funcionalidades en cualquier otra web que realice que necesite usuarios, simplemente copiando y pegando el código), otro que se llame menú etc. El código, de esta forma, es reutilizable y se incrementa mucho la velocidad de desarrollo.

Ahora bien… ¿Qué es Angular Material? Pues es una librería de componentes de interfaces de usuario para nuestro frontend de Angular. Con el ejemplo que te voy a poner lo vas a ver mucho más claro:

Ahí arriba ves un formulario típico para rellenar tus datos personales. Pues ese formulario ya viene listo para usar. Importo (me traigo a mi programa) ese componente de Angular Material, pongo el código como me indica la documentación y listo. Componente hecho y un montón de tiempo ahorrado. Por si quieres curiosear para comprender mejor lo que es un componente de Angular, aquí tienes el listado de componentes de Angular Material completo.

Y, como ejemplo, te dejo esta captura de pantalla de una app que hice yo del curso de Angular de Fernando Herrera en Udemy con Angular Material. Pues las cartas dónde están los superhéroes, los iconos, la barra lateral… todo son componentes de Angular Material, lo cual aceleró muchísimo mi velocidad desarrollando esta aplicación de consulta de superhéroes de Marvel y DC.

El principal problema que yo le veo a Angular Material es que normalmente los clientes quieren que cambies los componentes de Angular Material, para que se diferencien de los componentes del resto de programadores que usan Angular Material y… Muchas veces-especialmente si la diferencia es muy grande- ya te toca a ti valorar si es mejor usar un componente de Angular Material y personalizarlo o crearlo tú desde cero. En cualquier caso, para ti, IT Recruiter, creo que ha quedado muy claro para qué sirve Angular Material y qué es.

PrimeNG

Lo cierto es que tras explicar Angular Material, PrimeNG no requiere una gran explicación. Simplemente es otra librería muy popular de componentes de interfaz de usuario para Angular. Es decir, es exactamente como Material UI, sólo que con componentes distintos (algunos serán los mismos, en otros habrá diferencias) y diseños distintos. Sin más.

Lo cierto es que tanto Angular Material como PrimeNG son muy populares y ya depende de preferencias el uso de uno u otro.

Server Side Rendering con Angular Universal

Angular Universal es una tecnología que permite renderizar las aplicaciones de Angular desde el servidor. Es decir, con Angular «normal» renderizamos las aplicaciones en el entorno cliente, es decir, en el navegador. Al renderizarlas desde el servidor, la aplicación se carga de forma más rápida.

Además, y uno de los motivos por los que el Server-Side Rendering (es decir, realizar el renderizado desde el lado del servidor) es tan importante en la actualidad, es por el SEO. Una SPA como las que puedes desarrollar con Angular presentan ciertos problemas técnicos para el SEO (que para no entrar en detalles técnicos, no voy a entrar en ello por simplificar) que la técnica del Server-Side Rendering (SSR) resuelve.

Realmente, con Angular Universal, lo que se ha pretendido es hacer una web app isomórfica, es decir, que mezcle las ventajas del SSR con las ventajas de la ejecución en entorno cliente de Angular.

Es cierto que aunque no he observado una gran demanda de Angular Universal en la actualidad en España, el SSR es una tendencia en frontend este 2021 y es posible que crezca con el tiempo. Por tanto, aunque no sea la tecnología de Angular que más te van a solicitar, está bien que sepas lo que es para poder reclutarlo con mejor eficiencia.

Testing con Angular

Como cualquier otra web app que vamos a producir para un cliente, es tremendamente importante que haya buenos tests que aseguren que nuestra app funciona de la forma esperada. Aunque ya nos adentraremos en el mundo del testing más adelante, he de decirte que hablamos de test automáticos que nos facilitan mucho la vida. Lo vamos a ver con un ejemplo.

Imagina que hace 5 años un equipo de desarrolladores que ya no están en la empresa hicieron para una aplicación web de contabilidad un módulo de estadística en el que calculan datos en base a unos inputs. Ahora he de modificar ciertas funcionalidades de esta aplicación, pero quiero asegurarme de que sigue funcionando bien, y que si en el futuro otro desarrollador hace unos cambios de mantenimiento en la aplicación, simplemente ejecutando los tests, tenga la certeza de que la app sigue funcionando como se espera. Para ello sirve el testing, para ahorrarnos a los desarrolladores un valioso tiempo.

Pues bien, tras esta breve entrada en el mundo del testing, cualquier desarrollador que se precie ha de manejar tests, y en Angular no iba a ser diferente. Procedo a presentarte las tecnologías que vas a reclutar para el testing en Angular.

Tests Unitarios

Jasmine

Se trata de un framework que me permite realizar pruebas unitarias en JavaScript (en cualquier framework de JavaScript, no sólo en Angular) que destaca por su sencillez. Jasmine nos permite hacer tests unitarios, es decir, comprobar si un módulo de una aplicación funciona como es esperado. ¿A qué me refiero con módulos de una aplicación web? Pues, por ejemplo, en una tienda online, al módulo de Usuarios, el módulo de Ventas, el módulo de Productos… encargándose cada módulo de todo lo que tenga que ver con usuarios/ventas/productos (registro, actualización, borrado, lectura de los mismos por el usuario) etc.

Karma

Karma es una tecnología que nos permite ejecutar los tests en el navegador y además automatizar algunas de las tareas de testing que hayamos creado con frameworks de testeo como Jasmine.

Es importante mencionar que uno de las tecnologías más populares de testing en frontend es Jest, que está creado y mantenido por Facebook. No obstante, aunque se puede usar para testing en Angular, es más popular su uso en testing de otras tecnologías como React, por ejemplo.

También me gustaría mencionar que hay otras tecnologías que te pueden sonar de reclutarlas, como Mocha, por ejemplo, que también sirve para hacer pruebas unitarias con JavaScript en Frontend, pero sin duda alguna está por debajo en popularidad de Jasmine+Karma o de Jest.

Para testing unitario en Angular podríamos decir que el estándar es usar Jasmine y Karma.

Testing end to end: Protractor y Cypress

Los tests end to end (e2e) son aquellos que buscan testear no ya un módulo en concreto de una aplicación (que es lo que harías a grosso modo con tests unitarios) sino testear los workflows y casos de uso más frecuentes de un usuario en una aplicación.

Imaginemos una red social de compartir fotos (como Instagram, por ejemplo). Querremos testear las funcionalidades o casos de uso más importantes como, por ejemplo, que funcione bien el subir una foto, que funcione bien el registro de un usuario etc. Es decir: queremos que todo funcione, pero como mínimo queremos tener un testeo exhaustivo de que todo lo clave de nuestra aplicación funcione. Y para ello, en el ecosistema Angular, tenemos a tecnologías como Protractor o Cypress.

Protractor

Protractor es un framework de pruebas end to end (e2e) que ejecuta los tests de una aplicación web en distintos navegadores, y además interactúa con el programa como lo haría un usuario.

Cypress

Cypress es en la actualidad el framework de testing e2e más popular para testing e2e en frontend. ¿Por qué? Básicamente por su potencia: no sólo realiza testing e2e sino que además también permite la realización de pruebas unitarias, ya que integra Mocha. Digamos que Cypress te ofrece las funcionalidades de Protractor, pero además más funcionalidades, una muy buena documentación, una amplia comunidad etc. Por tanto, hablamos del estándar en testing e2e en frontend y es una tecnología que seguro que estás reclutando muchísimo.

Stack MEAN

Seguro que como IT Recruiter has escuchado muchas veces el stack MEAN y has dicho… pero… ¿qué es MEAN? Pues bien, MEAN 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 MEAN 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 Angular.

Una de las cosas que más nos gusta a los amantes del ecosistema de JavaScript es que desde que tenemos Node.js con sus distintos frameworks, podemos realizar una aplicación web entera (tanto la parte front como la parte back) con un mismo lenguaje de programación (JavaScript o TypeScript, según lo estrictos que queramos ser con el tipado de los datos y lo que nos permita el framework concreto con el que trabajemos), lo que simplifica mucho el desarrollo.

Librerías populares de Angular

RxJS

RxJS es una librería de JavaScript que es muy popular, especialmente en Angular. ¿Qué nos permite esta librería? Pues bien, imaginemos que estamos usando una aplicación web, y esta podría ser una tan popular como WhatsApp. Supongamos que le envío un mensaje de texto (un whatsapp) a mi primo, y otro a un amigo. Es evidente que cuando me contesten los mensajes mi primo y mi amigo quiero poder recibir y leer esa información en tiempo real, ¿verdad? Pues esto es lo que me permite RxJS.

Podríamos entrar en un montón de detalles técnicos, pero realmente tú como IT Recruiter no los vas a necesitar. Simplemente necesitas saber que cualquiera con experiencia en esta librería sabe trabajar con un paradigma de programación (una forma de programar) llamada reactiva que nos permite obtener datos del servidor en tiempo real, de una forma sencilla y facilitando la elaboración de código limpio.

NgRx

NgRx es una librería que nos permite implementar el patrón Redux en Angular. ¿Y qué es el patrón Redux? Pues bien, vamos a verlo con un ejemplo sencillo, obviando complejidades técnicas que tú como IT Recruiter no necesitas saber.

Si yo tengo una aplicación web que es una calculadora, podríamos decir que el estado de mi aplicación (lo que realmente me interesa) es el resultado de las operaciones que haga el usuario. Con lo cual, sólo me interesa un estado que es muy sencillo, lo cual se puede tratar de una forma sencilla con diversas características de Angular, Vanilla JavaScript, React, TypeScript… Lo que queramos utilizar vaya. Para esto no necesito ninguna librería, lo hago de forma fácil con el lenguaje de programación o el framework que esté utilizando y listo.

Ahora bien, ¿qué ocurre si mi aplicación tiene un estado muy complejo? Quizás mi aplicación es una aplicación web como Youtube, dónde el estado de mi aplicación (lo que realmente me interesa, para facilitar la experiencia de usuario) requiere conocer muchas cosas: qué vídeos gustan al usuario, qué vídeos no, qué canales sigue, cuáles son las tendencias del momento, qué vídeos he marcado para ver más tarde etc… Como podemos apreciar, es un estado muy complejo, que necesito que esté actualizado en tiempo real y, además, que pueda manejarse de la forma más sencilla posible.

Pues bien: esto es lo que me ofrece la implementación del patrón Redux en Angular con la librería NgRx: manejar estados complejos de aplicaciones web de la forma más sencilla y mantenible posible, y además utilizando programación reactiva para que el estado esté actualizado en tiempo real.

Í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.