Lleva tus bases al siguiente nivel
Si has llegado hasta este punto significa que ya tienes una base básica de Angular y quieres aprender conceptos más avanzados para convertirte en un auténtico experto de este framework.
En este artículo veremos una serie de puntos que pueden ser interesantes para seguir aprendiendo este framework.
NGRX
De todos los apartados que vamos a ver en este artículo este es el más esencial,todo el mundo debería saber NGRX ya que es fundamental en aplicaciones webs grandes y complejas.
NGRX es la librería que aplica el patrón Redux muy de moda en este tipo de frameworks para el desarrollo web. Se trata de una librería que sirve para centralizar el estado de una aplicación web.
Esto del estado lo tienes que ver como una forma de tener en un solo sitio una serie de datos e información que van a usar los componentes. Piensa en una web muy grande hecha con Angular. Si necesitas los mismos datos en distintos sitios de la web lo más común es usar servicios, pero, al final todo llega a ser demasiado lioso y además pierdes el control de los datos.
Con NGRX tienes el estado de la aplicación en un solo lugar llamado store. El store es inmutable, eso quiere decir que los estados son solo de lectura y cada vez que quieras modificar uno tienes que devolver un objeto nuevo. Además para cambiar este estado hay que usar funciones puras llamadas acciones.
- 🏪 Store: Contiene el estado global de la aplicación. Inmutable
- 🔨 Reducers: Devuelven un nuevo estado accediendo al store. Funciones puras.
- 👷 Actions: Hacen uso de los reducers. Normalmente tienen un tipo y un payload.
- 🔎 Selectors: Se usan desde los componentes para seleccionar una parte del estado.
Imagina que tienes en tu web un sistema de login de usuarios. Puedes usar el store para guardar dentro el usuario que está logueado en el sistema. Lo bueno de esto es que usando los selectores dentro del componente puedes tener el usuario logueado en los componentes que necesites.
Además, si desde un componente utilizas un action para crear un nuevo estado cambiando el usuario logueado, desde los otros componentes lo tendrás actualizado sin tener que hacer nada.
Si te fijas en el gráfico de arriba, también aparecen los "effects". Los effects se encargan de controlar los "side effects" de fuentes externas, es decir, normalmente se usan en peticiones HTTP y en sockets. Estos effects pueden ser síncronos o asíncronos.
Schematics
Esta es una característica de Angular CLI. Se trata de una herramienta para generar código con una estructura. Es una especie de scaffolding de código pero más complejo porque también permite editar código existente e incluir lógica.
Lo bueno de los schematics es que puedes crear los tuyos propios e incluso compartirlos en forma de librería para que otros los puedan usar.
Imagina que quieres añadir un sistema de login a tu aplicación web. Una solución es crearlo tu mismo y modificar tu proyecto manualmente.
Otra forma maś cómoda es un usar un shematic que añada un sistema de login. Al instalarse leerá tu proyecto y hará los ajustes necesarios (creando archivos y modificando los existentes) de tal forma que no tengas que cambiar tú manualmente el código.
Como hemos dicho, lo mejor de los schematics es que puedes crear los tuyos propios. Esto permite que puedas crear tu propio conjunto de ficheros y utilidades instalables en cualquiera de tus proyectos. Por ejemplo, yo tengo creado para mis poryectos un schematic para poder generar en cualquier proyecto un archivo que me recoja los errores de forma global en todas las peticiones a las APIS para llevar al usuario a la página de error, y todo eso siendo instalable con un solo comando.
PWA
¿Alguna vez al entrar en una web desde el móvil te ha salido un cartel diciendo que puedes instalar esa web? Eso es porque es una web PWA.
Esto de las PWA es un concepto relativamente nuevo, pero cada vez lo están adoptando más webs. Para ciertos casos es muy recomendable que la web sea PWA y además implementarlo no es demasiado complejo.
Que una web sea PWA realmente lo que significa es que la web puede ser utilizada de forma offline, por eso interesa especialmente en aplicaciones web. Para conseguir esto se hace uso de los service workers que lo que hacen es "cachear" la web para que se pueda abrir sin conexión.
Al estar toda la web cacheada los tiempos de carga son casi nulos, esto permite que pueda ser instalada como una aplicación más del sistema. Cada vez más sistemas operativos y navegadores dan esta opción.
Otra ventaja muy interesante de las aplicaciones PWA es que facilitan el uso de las notificaciones push. Las notificaciones push se trata de una forma de generar una notificación en el dispositivo del usuario de forma nativa. Lo bueno de las notificaciones push es que se pueden enviar en tiempo real desde el servidor aunque la aplicación web no se esté ejecutando.
Internacionalización con i18n
Internacionalización consiste en crear una web multilenguaje. Como en todos los frameworks, en Angular también existen sistemas para montar esta lógica sin que lo tengas que hacer todo a mano.
Lo que se suele hacer es tener un archivo JSON por cada lenguaje (es.json, en.json, de.json, it.json...) con cada uno de las cadenas de texto en cada uno de los lenguajes.
Lo que consigues con i18n es acceder a estas cadenas de texto dependiendo del lenguaje configurado en la aplicación web.
Esto es lo básico pero se pueden hacer más cosas como gestionar las cadenas de texto en singular/plural de tal forma que no tengas que tener la misma dos veces. También puedes insertar variables dentro de la cadena pera que no tengas que crear varias para una frase e incluso puedes tener textos por defecto por si no se encuentra la cadena dentro de los locales.
Testing
Si tienes un proyecto grande es esencial tener una buena suite de tests para poder probar la aplicación sin tener que hacerlo manualmente.
Los tests permiten tener la seguridad de que el código va a funcionar y asi evitamos posibles bugs a futuros. Los tests se suelen combinar con la integración continua para que siempre se hagan pruebas antes de realizar despliegues de la web.
Hay varios tipos de tests:
Tests Unitarios: Consiste en probar unidades pequeñas. Lo suyo es testear componentes o pequeñas partes de los componentes de forma aislada. Puedes echar un ojo a Testing unitario en Angular con Jasmine.
Tests de Integración: Consiste en probar el conjunto de la aplicación asegurando la correcta comunicación entre los distintos elementos de la aplicación. Por ejemplo, en Angular observando cómo se comunican los servicios con la API y con los componentes. Lo más usado en Angular es Karma, que añade a los tests el motor de renderización de los nevegadores.
Tests End to End (E2E): Consiste en probar toda la aplicación simulando la acción de un usuario, es decir, por ejemplo para desarrollo web, mediante herramientas automáticas, abrimos el navegador y navegamos y usamos la página como lo haría un usuario normal. En esta parte lo más usado es Protractor.
Decoradores
Si has usado Angular, aunque sea de forma básica, has tenido que usar decoradores, lo que pasa es que no te has dado cuenta. Cuando declaras un servicio inyectable con @Service o creas un componente con @Component realmente lo que estás haciendo es usar decoradores.
Al principio no le veía el sentido a usar estos decoradores, no les encontraba el uso, pero con el paso del tiempo, me dí cuenta de que crear decoradores tiene mucho potencial y no solo me refiero a controladores para usar en Angular.
Si, has leído bien, puedes crear tus propios controladores. Creando tus propios decoradores vas a agilizar mucho el desarrollo de aplicaciones de Angular porque los vas a definir una sola vez y los vas a poder reutilizar en muchos sitios.
Los decoradores no son más que funciones que se ejecutan cuando Angular llama al decorador. La función puede recibir como parámetro la clase que se ha decorado (si es un decorador de clase), el atributo o parámetro o el método si es un decorador de método.
Lo bueno es que además se pueden crear decoradores de varios tipos: de clase, de métodos y de propiedades por lo que se adaptan bien a cualquier proyecto.
Animaciones
Las animaciones son cada vez más importantes. Además de añadir dinamismo a las webs, hacen que las transicciones entre páginas o estados no sean tan abruptas y sea más suaves.
Aunque puedes crear tus propias animaciones con CSS, o incluso tus propios componentes con Animaciones, Angular tiene una forma nativa de crear animaciones. Además de poder crearlas, ofrece un montón de formas de poder controlarlas y gestionarlas.
Por ejemplo, puedes crear múltiples animaciones sobre una lista de tal forma que cada animación se vaya escalonando una detrás de la otra. También puedes controlar la finalización de la animación para poder ejecutar cosas a continuación.
En definitiva, en la mayoría de casos no vas a echar en falta un sistema de animaciones como el de greenshock.
Conclusiones
Espero que te haya gustado esta lista y sobre todo que te haya servido para orientarte o darte ideas sobre qué seguir aprendiendo de este fantástico framework.
Esta lista no sigue ningún orden en particular y es mi visión personal, lo que yo opino.
También puedes mirar el artículo sobre Técnicas de optimización para Angular en el que explico algunos consejitos para que Angular vaya un poco más rápido.