Por M. Chorbi, experto en Angular en SQUAD
La conferenciangEuropees una de las mayores conferencias europeas dedicadas a Angular. La edición de 2016 se celebró en París del 25 al 26 de octubre y tenía como objetivo presentar las novedadesde Angular 2. El cartel de ponentes era de primer nivel: el equipo central de Angular de Google y expertos en Angular, TypeScript, Ionic, etc.
SQUAD tuvo la oportunidad de asistir a estos dos días de conferencia y, en este artículo, os ofrecemos un resumen de los distintos temas tratados.
Angular 2: ¿qué novedades presenta?
La ponencia principal sobre Angular 2 fue la primera presentación de esta edición de 2016, a cargo del creador de Angular, Miško Hevery.
Tras el éxito cosechado por la primera versión de AngularJS 1.x, el equipo central decidió ofrecer una nueva versión más robusta, optimizada, completa y compatible con múltiples dispositivos. De ahí su decisión, o más bien su necesidad, de reescribir el marco de trabajo y empezar desde cero.
Así, se han mejorado varios aspectos en Angular 2:
- Ofrecer un marco de trabajo diseñado paramúltiples dispositivos: ya se trate de aplicaciones móviles (híbridas con Ionic o nativas), aplicaciones web para ordenador o incluso aplicaciones de escritorio, Angular 2 puede utilizarse.
- Organizar el código por módulos o componentes.
- Mejorar la rendimiento en varios aspectos:
- Reducirel tiempo de renderizado, que ahora escinco veces más rápidogracias al rediseño del marco de trabajo.
- Reducir el tamaño de las aplicaciones Angular con la introducción dela compilación anticipada (AoT)y la carga diferida (cargar solo lo que se necesita).
- Mejorarla rapidezen lageneración de códigoyla detección de cambios: errores detectados durante la compilación gracias al uso deTypeScript (código totalmente tipado), mensajes de error más legibles, incorporación de estados/hooks para controlar la detección de cambios…
- Reducir el consumo de memoria mediante AoT, la optimización de la detección de cambios, el uso de webworkers…
Como se puede ver más arriba, la compilación anticipada (Ahead-of-Time Compilation) aparece varias veces y ha contribuido a mejorar diversos aspectos del rendimiento de Angular 2.
¿En qué consiste exactamente?
Se trata de una nueva etapa del proceso de compilación que se puede ejecutar en una fase previa. Además, permite compilar y analizar nuestro código de Angular 2, incluir las dependencias y todas las plantillas y archivos CSS, y, por último, generar el código que se enviará al navegador.
Con esta compilación sin conexión, el tamaño del código generado y enviado al navegador se ha reducido considerablemente y ya no es necesario enviar el compilador y el analizador sintáctico al navegador, ya que todo se realiza previamente.
Para terminar, Miško Hevery aseguró que la optimización de Angular continuará: siempre hay margen de mejora.
RxJS y los observables
Otro tema que se tratará en esta conferencia es RxJS, la programación reactiva con Angular 2 y los observables.
¿Qué son losObservables? Se puedencomparar con las Promises(que ya conocemos) con gestión asíncrona de datos. Los Observables sonflujosde eventoscon un estado de éxito que devuelve valores, un estado de error y un estado de finalización. Para ello, basta con suscribirse a ese evento y recibir así la información tan pronto como esté disponible. A diferencia de las promesas, no son de un solo uso, sino que seguirán a la escucha hasta que se produzca un evento de finalización.
En Angular 2, los observables se utilizan en varias API reactivas, como Forms, HTTP, AsyncPipe, Router…
Un ejemplo que ilustrael uso de los Observableses elautocompletado.
Figura 1: Ejemplode autocompletado con Observables
En el caso del autocompletado, cada vez que se detecta un cambio de valor, se realiza una llamada para recuperar los resultados, que se mostrarán al usuario tan pronto como estén disponibles gracias a la suscripción.
Además, con el método `switchMap`, si se detecta un nuevo valor antes de que se devuelvan los resultados de una llamada anterior, esta última se cancela y se realiza una nueva llamada con el último valor. Esto no es posible con las Promises.
Enrutador de Angular
Con Angular 2 se ha introducido una nueva versión del enrutador:Angular Router. Al igual que ui-Router, permite gestionar losdistintos estados de la aplicación.
Angular Router admite la carga diferida: justo lo que necesitamos. Utiliza Observables.
ngAnimate
Animaciones definidas en componentes y basadas en estados.Utilizan la API Web Animationsen lugar de basarse en CSS. Esto las hace independientes del DOM.
Por el momento, la API Web Animations solo es compatible con Chrome y Firefox, por lo que lo mismo se aplica a ngAnimate.
La seguridad
¡Un tema ineludible hoy en día! La presentación ha puesto de relievela vulnerabilidad XSS, una falla que puede considerarse el eslabón débil de una aplicación, incluso aunque se hayan implementado protocolos de seguridad y cifrado.
L’équipe Angular s’y intéresse depuis toujours et propose dès la première version un code « Sanitized » : tout code dangereux comme <script> sera ignoré.
Así, por defecto,Angular 2 está protegido contra vulnerabilidades XSS, ya que todos los enlaces están «sanitizados». Se han propuesto métodos para eludir estas medidas de seguridad, con el fin de poder incluir deliberadamente un script o una URL en la aplicación. Se recomienda llamar a estos métodos de elusión lo más cerca posible de la fuente y de su validación, con el fin de garantizar su seguridad a lo largo del tiempo.
Migración a Angular 2
Con el rediseño introducido en esta versión de Angular, no basta con actualizar la versión y realizar unos pocos cambios. La migración de Angular 1.x a Angular 2 requiere más tiempo y supone un coste considerable.
Para facilitar las cosas, el equipo de Angular ha propuesto unmódulo ngUpgradeque permite combinar código de Angular 1.x y de Angular 2 en una misma aplicación. Esto es posible gracias a los sistemas de actualización y retrogradación de los servicios y componentes.
Por lo tanto,no es necesario cambiar todo el código a Angular 2:ambas versiones pueden coexistir en la misma aplicación y la migración se puede llevar a cabo por etapas.
Por lo tanto, Angular 2 se ha mejorado y podemos identificar varias áreas de mejora. De hecho, el equipo de Angular ha rediseñado el marco para ofrecer nuevas funcionalidades y convertir Angular 2 en una plataforma en la que se puedan incluir y utilizar diferentes módulos.
¿Qué hay de los widgets y las herramientas?
Angular CLI
Es unaherramienta muy potenteque permitecrear y configurar un proyecto de Angular 2en muy poco tiempo. Por ejemplo: ¡con solo dos líneas de comando, tu ejemplo HelloWorld ya está listo!
Ya no hace falta pasar horas configurando el proyecto y su entorno; Angular CLI se encarga de ello.
Augury
Es unaherramienta de desarrollopara Angular 2 que se instala como extensión en Chrome. Augury ofrece varias funciones:
- Depuración
- Visualizaciónde la relación entre componentes
- Informaciónsobre los componentes
- Visualizaciónde la jerarquía de dependencias
- Estructura del router
- ¡Y muchas otras funciones!
Angular UI Bootstrap
La nueva versión de Angular UI Bootstrap, que ya estaba disponible para Angular 1.x, se hareescrito en Angular 2para aprovechar las distintas ventajas del marco de trabajo, como la compilación AoT. Organizado por componentes, elcódigo de los widgets de Bootstrapes ahora fácil de leer y comprender.
Todos los widgets se puedenprobarymantener.
Universal
Es unaherramientaque permite realizar elrenderizado del lado del servidor (Server-Side Rendering) en aplicaciones Angular 2. Universal se puede utilizar para todo lo relacionado conel SEO(optimización para motores de búsqueda),la vista previa de enlaces—como la que se muestra en Facebook al compartir un enlace— o, simplemente, para mejorar el tiempo de renderizado de la primera página.
Conclusión
En definitiva,Angular 2es más que un simple marco de trabajo. Se ha convertido en unaplataforma completa con diversas herramientas y widgets,y está adaptada amúltiples dispositivos.
ngEurope también fue una oportunidad para ver ejemplos de proyectos desarrollados con Angular 2 y otros marcos de trabajo (Ionic, Cordova…): una aplicación móvil híbrida presentada por ING Bank, un sitio web de escritorio para reproducir partituras musicales presentado por Tero Parviainen o una aplicación multiplataforma presentada por Christian Weyer y Thorsten Hans.
El equipo principal de Angular sigue trabajando para optimizar y mejorar Angular, así como para introducir novedades. Estaremos atentos a las próximas versiones… Queda por ver si se planteará de nuevo un rediseño.
Para más información, aquí tienes los enlaces a los vídeos y presentaciones compartidos de ngEurope 2016:
- Canal de YouTube – ngEurope
- Presentaciones y enlaces de GitHub
