Las 5 claves de Angular desde la ng-conf

Ha pasado ya un mes desde que se celebró la ng-conf 2016, la primera y más relevante conferencia mundial sobre Angular. Una vez digerido todo lo que aprendimos en este evento, a continuación compartimos  nuestras reflexiones y conclusiones.

1. Angular ya no es un framework: es una plataforma

 Realmente esto no es nuevo para el equipo de GFT. Si nos hubieran preguntado hace 3 meses habríamos respondido lo mismo. Entonces, ¿por qué hago referencia a este concepto? Porque Brat Green lo mencionó en la keynote de apertura y porque se le dio mucha importancia durante el evento.

Angular.js comenzó siendo un framework y fue creciendo progresivamente hasta convertirse en lo que es a día de hoy: un ecosistema inmenso que te ofrece todo lo que necesitas para el desarrollo de sistemas de grado corporativo.

Con Angular2, el equipo de Angular ha querido ir más allá. No ha dejado que pasara mucho tiempo para alcanzar el mismo nivel. De lo contrario, aun siendo Angular2 un framework brillante, todo el mundo hubiera seguido usando Angular.js por los aceleradores, herramientas, soluciones de test, etc.

Aquí aún faltan algunas herramientas, como Codalyzer, que permite hacer validaciones automáticas contra la guía de estilos oficial de Angular2. Esta guía está disponible de manera oficial y es muy completa.

Videos que recomendamos:

Inmersión profunda en Angular 2

Angular CLI (Interfaz de línea de comandos)

Codalyzer para validar las buenas prácticas en Angular 2 automáticamente

2. Angular2 refuerza el desarrollo de Apps para plataformas móviles con javascript

Angular.js no se centraba en las aplicaciones móviles. Con Ionic, el proyecto que se apoya en Angular.js y Apache Cordova, todo ha cambiado. La idea era proporcionar una plataforma de desarrollo de aplicaciones híbridas con frontal web y acceso a las capacidades nativas del dispositivo. ¡Y ha sido todo un éxito!

Pero el equipo de Angular no ha querido detenerse aquí. Los cambios estructurales de Angular2 permiten optimizar el rendimiento de las aplicaciones móviles tradicionales (híbridas) y crear apps con Angular2 que son totalmente nativas.

Comienza la Guerra de las App: actualmente los mayores rivales en esta contienda son Ionic 2, NativeScript y ReactNative.

 Ionic2

Ionic2, junto con Angular2, eleva las soluciones híbridas a un nuevo nivel. Se basa en los mismos principios pero mejora las soluciones en todos los aspectos. En GFT tenemos larga experiencia con Ionic y ya estamos trabajando con Ionic2.

NativeScript

Ofrece acceso a toda la capa nativa desde Angular de forma transparente. Proporciona módulos que nos permiten olvidarnos de si estamos en iOS, Android y, próximamente, en Windows 10 y nos permite escribir vistas nativas en HTML. De este modo, obtenemos aplicaciones con interfaz de usuario nativo y acceso a toda la API del sistema operativo móvil desde un código js/Angular.

En GFT hemos estado trabajando con el equipo de NativeScript desde el año pasado, ejecutando pruebas de concepto con sus versiones beta. Ya hemos podido ver las nuevas soluciones disponibles gracias a esta tecnología. Además, presentamos nuestra primera aplicación – diseñada en el Laboratorio de Banca Digital – en ng-conf frente a cientos de desarrolladores.

Estas dos aproximaciones encajan perfectamente con la visión de GFT respecto a la reutilización de habilidades, tecnologías e incluso códigos entre los múltiples frontales para crear soluciones multicanales, ofreciendo una experiencia que sea lo más consistente y homogénea posible.

NativeScript with Angular2 shows how code reuse could be done: Video

3. Progressive web Apps con Angular2 gracias al mobile toolkit

Las aplicaciones web progresivas son una propuesta impulsada por Google para extender las capacidades de los navegadores, de modo que se puedan crear webs para móvil que acerquen la experiencia a las Apps instaladas.

Esto permite solucionar el problema de tener que instalar una nueva app para cada cosa. Si buscas algo en internet y una web te ofrece una buena experiencia de usuario, conforme la vas usando puedes decidir si quieres instalar su app para tener funciones adicionales.

Pero ¿cómo se consigue? Accedes a una PWA desde el navegador y te da la opción de “anclarla” en tu dispositivo. De este modo, en futuros accesos te aparecerá un icono, como tendrías para una aplicación normal. Al abrirla desde aquí, el navegador no se muestra como tal y sólo se visualiza el contenido de la página.

Hasta aquí pensaremos que son marcadores con esteroides, pero el punto clave es que la aplicación se ha cacheado en local, permitiendo que funcione más rápidamente y que se pueda utilizar incluso en modo offline.

Para lograrlo, el principal componente son los Service Workers, que debe soportar el navegador del dispositivo y que gestionarán, bajo control del desarrollador, el cacheo de la app y sus comunicaciones.

Si lo usas junto con otras tecnologías como Angular Universal, te permitirá llevar a otro nivel la experiencia de la web en el móvil. Ahora tiene soporte en los principales navegadores (menos en safari) dando cobertura en móviles Android. video

4. Angular Universal

Angular Universal nos permite crear aplicaciones Angular2 que son ‘renderizadas’ por el servidor para un primer envío de contenidos al navegador y que continúan trabajando en el navegador como lo harían las aplicaciones Angular2.

Así, conseguimos una primera carga de página mucho más rápida y evitamos el efecto de página en blanco. El servidor permite visualizar la estructura de la página con el mínimo contenido necesario, para luego completarlo con elementos más pesados.

Gracias a ello,mejoramos el soporte para SEO y solucionamos el problema que tienen muchas aplicaciones JS con los motores e indexadores.

Design patters on using Angular2 Universal: video

5. Angular 2 + Firebase para una arquitectura sin servidor (Serverless architecture)

Google está apostando muy fuerte por Firebase como solución de almacenamiento de colecciones de datos dentro de su plataforma Cloud. Sus funcionalidades siguen creciendo, por ejemplo, con soporte para notificaciones. Su nivel de integración con Angular2 es fantástico – como no podía ser de otro modo.

He incluido Firebase como último elemento en nuestra lista porque es un ejemplo muy representativo de la arquitectura de aplicaciones sin servidor “serverless architecture”.

Es una tendencia que podría cambiar la forma en la que conocemos la arquitectura de aplicaciones actuales. Soluciones cloud como Auth0 para la autenticación, Firebase para el almacenamiento de preferencias (por ejemplo) y una o varias Open API de terceros nos permitirían crear aplicaciones que no tendrían su propio servidor.

Firebase
Angular Firebase and Async Data patterns: video