Plantearse qué framework vamos a utilizar en nuestros proyectos no es cosa pequeña. Es una decisión crítica.
Las opciones disponibles son muchas, algunos dirían que demasiadas, y podemos vernos abocados a una especie de caza del tesoro entre una pléyade de herramientas que consume tiempo y recursos.
El presente artículo pretende exponer, a mi juicio, cuáles podrían ser los elementos a tener presentes en el caso de que estemos considerando darle una oportunidad a Angular 2+
No hay orden ni implícito ni explícito en los diez puntos que siguen. Se trata simplemente de una enumeración de características que son importantes, en mi opinión .
Espero que lo encontréis útil.
¿Cuáles son las claves de Angular 2+?
1.- Soporte
Para emplear una herramienta y su ecosistema en proyectos reales, es esencial contar a medio plazo (al menos) tanto con su presencia en el mercado como con su actualización frecuente.
La herramienta en cuestión debe tener un timeline hasta el presente y una fuerte proyección hacia el futuro.
Angular está soportado por Google, y se actualiza con una revisión más o menos mayor cada seis meses. Por ello, parece razonable plantearse su uso en nuestras aplicaciones Web
2.- Entorno
La calidad, potencia y sencillez de las herramientas de desarrollo empleadas por los programadores es fundamental.
Clave para no reinventar la rueda, clave para reducir los tiempos de puesta en produccióny clave para automatizar todas aquellas tareas que no requieran lo que mejor sabemos hacer: pensar.
Angular está provisto de un “tooling” extremadamente potente, flexible y personalizable, basado en Node.js, npm, yarn, un generador de programas y algún editor que entienda la sintaxis y estructura de una aplicación Angular.
En relación con esto último, uno de los más empleados es el Visual Studio Code de… Microsoft (!!!). ¡Ojo! No es el Visual Studio, y sí, es gratis.
3.- TypeScript
Las frameworks modernas diseñadas para la creación de aplicaciones Web descansan cada vez con mayor fuerza en JavaScript (JS).
Angular no es una excepción.
Sin embargo, no es sencillo crear una aplicación completa en JS, como a menudo sucede en los lenguajes llamados dinámicos, los cuales adolecen de un sistema de tipos fuerte (JS, Groovy, Clojure, etc.) y proporcionan a cambiouna extraordinaria flexibilidad y grado de interacción que puede ayudar a acortar considerablemente los tiempos de desarrollo.
Además, en el caso de JS, hay que considerar que existen varias versiones, de manera que algunas características no están disponibles en todas ellas.
La solución de Angular gira alrededor de TypeScript, el cual exhibe todas las funcionalidades que esperamos en JS, aportando dos elementos esenciales: una implementación completa de la orientación a objetos clásica y un sistema de tipos fuerte.
Además, el compilador de TypeScript produce como salida código JS estándar que cualquier navegador puede entender, con el valor añadido de que la versión de JS correspondiente al código generado por TypeScript la decidimos nosotros por configuración.
Conceptualmente, el compilador es en realidad un transpilador.
Por tanto, podemos olvidarnos de un viejo problema que todos los desarrolladores de JS conocen, y tal vez han sufrido: mi código JS no se ejecuta en todos los navegadores.
4.- Paso a producción
Crucial, como todos sabéis.
Angular incorpora mecanismos automáticos de optimización que pueden describirse brevemente al menos en dos categorías:
a) Conseguir que lo que escribimos pese menos, ocupe menos memoria, mejorando los tiempos de carga de la aplicación en el navegador del usuario final
b) Examinar el código que hemos escrito y sus dependencias de librerías de terceros para tratar de eliminar todo aquello que no se use(Tree Shaking).
5.- Angular “fuera del navegador”
La respuesta de Angular al asunto de optimizaciones SEO (Search Engine
Optimization). Dicho de forma sencilla, facilitar que los indexadores encuentren nuestra web.
Para ello, nuestras páginas deben residir en el servidor, pero Angular por defecto lo lleva todo al cliente, con lo cual los indexadores se quedan en ayunas por completo. Malas noticias.
Así que Angular “fuera del navegador” proporciona un mecanismo razonablemente automático por el cual nuestras páginas también están presentes en el servidor.
Muy buenas noticias.
6.- Arquitectura
Angular está perfectamente engranado con una arquitectura muy precisa que podemos seguir de forma sistemática para crear aplicaciones. La noción clave es el módulo.
En un módulo guardamos otros elementos que conforman la aplicación, y podemos precargarlos o adquirirlos bajo demanda.
Además, Angular sigue una noción estándar en arquitectura lógica: la separación en capas.
Así, por ejemplo, los componentes son los encargados de gestionar la interfaz de usuario,y se comunican con los servicios, responsables de la lógica de negocio y el intercambio de datos con servidores remotos mediante un mecanismo implementado automáticamente con Angular: la inyección de dependencias.
7.- Intercambio de datos con otras aplicaciones
Angular es una solución completa para el lado cliente, esto es, no se ocupa de la implementación del lado servidor, pero sí resuelve la comunicación con el mismo.
Existen básicamente dos maneras de hacer esto, pero en ambas subyace la misma idea: un API que por debajo usa AJAX y funciona de forma asíncrona, de manera que las operaciones a través de la red (lentas) no bloqueen la interfaz de usuario, por ejemplo.
8.- Programación Reactiva
El software que fabricamos hoy cada vez está más profundamente imbricado con la concurrencia y el procesamiento paralelo.
Una de las formas de hacer frente a esta realidad que está ganando cada vez más peso es la Programación Reactiva.
En el caso de Angular, esto se materializa en el uso de algunos artefactos típicos de esta aproximación: las promesas, los observables y lo que podríamos llamar operadores de transformación funcional
A través de una biblioteca de apoyo,Angular nos permite diseñar según esta estrategia, e incluso unas cuantas de sus propias APIs (punto 7) nos entregan observables como resultado.
9.- Extender HTML
Hay muchas maneras de enriquecer una aplicación Web. Una de ellas, apoyado por Angular, es el uso extensivo de TypeScript (JavaScript).
El otro es la creación de artefactos que se comportan como extensiones del lenguaje HTML: etiquetas y atributos (las directivasde Angular). Algunos que también extienden el HTML necesitan de una sintaxis específica de Angular: los tubos (pipes)
10.- Aplicaciones de una sóla página
Una aplicación tradicional (en el buen sentido de la palabra) suele traerse las páginas Web necesarias del servidor remoto, bajo demanda, en función de la lógica de la propia aplicación y/o las acciones explícitas del usuario final. Esta estrategia tiene el potencial inconveniente de que hacemos esperar al usuario.
Angular opina que nuestro usuario debe esperar lo menos posible, y que la interfaz gráfica de una aplicación Angular debe estar viva, y responder instantáneamente a la lógica del programa y/o a lo que haga el usuario final.
Angular por defecto carga todas las páginas (convenientemente optimizadas) en el navegador y las va mostrando bajo demanda, pero sin descargarlas del servidor, con lo que el tiempo de espera disminuye espectacularmente.
Tenemos una aplicación de una sola página (SPA) y el mecanismo que usa Angular para conseguirlo es básicamente sus APIs de enrutamiento y navegación.
Conclusión
Si todo lo visto hasta aquí ha despertado tu interés por ANGULAR, te invitamos a que des un paso más y adquiera las competencias para desarrollar una aplicación con Angular desde cero.
Te proponemos una formación acorde a tu nivel de conocimientos:
– Angular 2+
– Angular Avanzado.
Tú eliges.
Un saludo.
