"El diseño es el embajador silencioso de tu marca"
- Paul Brand

Novedades en Angular 6

La nueva versión de Angular ya ha sido lanzada, y trae características muy significativas que sin duda alegrarán a muchos, es por ello que este artículo lo voy a dedicar a hablar de las novedades de Angular 6.

Angular CLI

Sin duda lo primero a destacar es que el CLI de Angular, su herramienta de linea de comandos, añade un nuevo comando que nos proporciona una funcionalidad muy útil, la de mantener actualizados los paquetes del proyecto o la propia versión de framework.

Lo podemos usar de esta manera.

ng update <package>

Con ello estamos realizando un análisis sobre el package.json y propondrá las actualizaciones pertinentes. Puedes ver un ejemplo sobre el uso de este comando en la guia oficial de actualización de Angular, ellos ya lo emplean.

No solo eso, las librerías de terceros pueden implementar el uso de schematics para definir cuando y como actualizarlas, realmente son scripts que realizan ciertas tareas como modificar configuraciones o añadir dependencias entre otras cosas, si quieres saber más de schematics (muy interesante) puedes visitar este link.

Este comando no reemplaza a npm ni a yarn ni a un gestor de paquetes tradicional, de hecho se vale de npm para hacer su magia, pero si que nos permite realizar un análisis de nuestras dependencias y realizar transformaciones de código en el proyecto de forma automática.

Otro de los comandos que presentan novedades es el de añadir dependencias al proyecto, lo dicho anteriormente respecto a los gestores de paquetes es válido también aquí, no los sustituye sino que hace uso de ellos para descargarlos.

Y al igual que en el caso anterior tiene como particularidad añadida que ademas de añadirlos va a ejecutar los scripts de schematics en el caso de que los tengan para hacer las operaciones «extras» que mencionábamos.

En este caso el uso sería así.

ng add <package>

Ya tenemos algunos paquetes que hacen uso de él para no solo instalar la paquetería necesaria sino para inicializarse realizando cambios en el código para dar lugar a nuevas funcionalidades sin necesitar de la intervención del desarrollador.

Según la documentación de Google podríamos usar los siguientes (de terceros irán apareciendo cada vez más, o eso se espera).

  • ng add @angular/pwa – Convierta su aplicación en un PWA agregando un manifiesto de aplicación y un Service Worker.
  • ng add @ng-bootstrap/schematics – Agregue ng-bootstrap a su aplicación.
  • ng add @angular/material – Instalar y configurar Angular Material y sus temas, y registrar nuevos componentes de inicio con schematics para crearlos mediante ng generate.
  • ng add @clr/angular@next – Instalar y configurar Clarity desde VMWare
  • ng add @angular/elements – Agregue el polyfill y las dependencias de document-register-element.js para Angular Elements.

Angular Elements

En el último punto hablamos de Angular Elements que precisamente es otra de las grandes novedades de esta versión.

Se trata de la capacidad de crear a partir de componentes de Angular componentes nativos que los navegadores modernos puedan entender pues siguen el estándar de la w3c. Con ello podremos prescindir de iniciar manualmente los componentes de angular cuando estamos recibiéndolos mediante contenido estático.

Angular Material y componentes CDK

Desde esta versión se ha decidido que Material se alinee con Angular, de manera que al publicar una nueva versión ‘major’, en este caso Angular 6, también han sacado Angular Material 6.

Como veis hablamos de Angular Material y de componentes CDK, si no tenéis clara cual es la diferencia es muy sencillo de entender, los componentes CDK (Component Development Kit) son los componentes Angular Material pero sin los estilos visuales de Material.

Se que dicho así puede generar más dudas de las que despeje, pero es bastante simple, el equipo de Angular se dio cuenta de que sus componentes eran estupendos pero en muchos casos la gente no los utilizaba porque el proyecto era para un cliente que ya tenia una guía de estilos propia, o simplemente el diseñador hizo un prototipo completamente distinto y la tarea de modificar todos los estilos era tan grande que pasaban de Angular Material.

Y por culpa de esos casos nace el CDK, que te proporciona los mismos componentes (mismo comportamiento y experiencia de usuario, misma accesibilidad, etc…) pero sin los estilos visuales propios de Material.

Las novedades de Material en su versión 6 son los nuevos componentes:

  1. Tree: Para jerarquizar en vista de árbol el contenido mat-tree.
  2. Badge: Para hacer notificaciones (Son como los badges de Bootstrap) matBadge.
  3. Bottom-Sheet: Para crear un menú desplegable emergente desde la parte inferior de la pantalla MatBottomSheet .

Y una nueva lógica de posicionamiento para la creación de ventanas emergentes, que se ubican de forma inteligente para ser visibles en todo tipo de situación.

Todas estas novedades están disponibles tanto en el CDK como en Material.

Gracias al uso de schematics se han introducido nuevos starters, o lo que es lo mismo, scripts que puedes correr para añadir automáticamente ciertos componentes al proyecto, existen 3:

Material Sidenav, para añadir el conocido panel de navegación lateral de Material. Podemos usar este starter con el siguiente comando:

ng generate @angular/material:material-nav --name=my-nav

 

Material Dashboard, que ya genera una grilla con elementos card para hacer un dashboard estilo Material como por ejemplo el de Google Analytics. Podemos usar este starter con el siguiente comando:

ng generate @angular/material:material-dashboard --name=my-dashboard

 

Material DataTable, que genera una tabla preconfigurada con su fuente de datos y las capacidades adicionales que tenemos en Material ya incluidas como son la paginación o el ordenado. Podemos usar este starter con el siguiente comando:

ng generate @angular/material:material-table --name=my-table

CLI Workspaces

El conocido archivo de configuración del proyecto .angular-cli.json ahora se llama .angular.json.

El nuevo archivo de configuración puede hacer referencia a varios proyectos, todos dentro del mismo espacio de trabajo. Cada uno de esos proyectos puede tener distintos targets y cada target puede tener distintas configuraciones.

Soporte a librerías

Ahora podemos crear nuestras propias librerías. Al igual con el cliente de linea de comandos creábamos servicios, componentes, módulos, pipes… ahora también creamos librerías de esta manera.

Usaremos este comando:

ng generate library <name>

 

Tree-shaking en los providers

Cuando hablamos de Tree-shaking estamos hablando en última instancia de Webpack. El Tree-shaking es un proceso de evaluación de código fuente capaz de decidir qué funciones se utilizan o no en los módulos que importamos.

Si alguna función no se utiliza, esta no se incluye en el bundle final para reducir su peso con código innecesario.

La novedad en esta versión es que ahora esto puede aplicarse a los providers, ahora en vez de que los módulos hagan referencia a los servicios, serán los propios servicios los que referencien a los módulos.

Para entenderlo antes hacíamos esto…

// app.module.ts
@NgModule({
  ...
  providers: [MyService]
})
export class AppModule {}


//my-service.ts
import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  constructor() { }
}

Y ahora lo hacemos así.

//my-service.ts
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class MyService {
  constructor() { }
}

De manera que los servicios solo se incluyen en aquellos módulos donde sean necesarios.

Mejoras en las animaciones

El módulo de animaciones ahora no necesita el polyfill de animaciones web, con ello reducimos del empaquetado su peso, que eran 47kb aproximadamente y además mejora el rendimiento de las animaciones en Safari.

RxJs v6

Angular ha sido actualizado para usar v6 de RxJS que ya está disponible desde hace algún tiempo.

RxJS es un proyecto independiente, que ambos vaya por la versión 6 es casualidad, no es como Material que si está alineado.

Al cambiar de versión puede que parte del código que hayas escrito antes ahora rompa, recuerda que antes usabas la versión 5.x (fueras consciente de ello o no). Si quieres saber más sobre como migrar el RxJs puedes ver su guía oficial de migración.

En cualquier caso Angular tiene un paquete llamado rxjs-compat que sirve para mantener la compatibilidad con versiones anteriores.

Al igual que en el caso de los providers, el nuevo RxJS se ha hecho mas tree-shakeable para que el bundle final solo lleve las funcionalidades que realmente necesites y reduzcas su peso.


A mayores de todo lo dicho también han anunciado que desde la v4 de Angular en adelante todas las versiones son LTS, o lo que es lo mismo que todas van a tener un soporte de 18 meses, con alrededor de 6 meses de desarrollo activo seguidos por 12 meses de correcciones de errores críticas y parches de seguridad.

Toda esta información la he sacado de una entrada del blog oficial de Angular, podéis consultarlo aquí

The following two tabs change content below.
Especialista en diseño web responsive, programador html5, css3, jquery, php y java.

Latest posts by Óscar Lijó (see all)