Menu

Angular 7.

angular - October 20, 2018 por Carlos Rojas

Cada 6 meses el equipo de Angular nos trae una versión mayor de Angular y hoy liberaron la version 7

Otra versión de Angular ?

Si. El equipo de Angular hace un tiempo anuncio su plan predictible de lanzamiento de versiones como una forma de ayudar a los equipos grandes y sus empresas con la planeación de actualizaciones y cambios. Puedes ver las notas aquí.

Voy a tener que aprender Angular de nuevo ?

No. Si has estado trabajando con Angular frecuentemente has notado que las versiones 2, 4, 5, 6 son muy parecidas entre ellas a excepción de pequeños cambios que puedes hacer en el momento que necesites. Puedes ayudarte con este pequeño Asistente.

Si cambia cada 6 meses el codigo de mi empresa va a quedar sin Soporte ?

Todas las versiones mayores de Angular tienen LTS (Long Term Support).

Novedades en la versión 7.

La versión 7 de Angular tiene pequeños parches y varias mejoras, estas son:

  • CLI Prompts.

  • Mejoras en el rendimiento.

  • Angular Material y el CDK

  • Mejoras en la accesibilidad.

  • Angular elements.

CLI Prompts.

Ahora cuando usas schematics y sobre todo cuando creas tus propios paquetes, puedes mostrarle a los usuarios mensajes con el atributo x-prompt que ayudaran a tus usuarios a descubrir en tareas comunes como ng-new caracteristicas como routing. Un ejemplo seria:

"routing": {
  "type": "boolean",
  "description": "Generates a routing module.",
  "default": false,
  "x-prompt": "Would you like to add Angular routing?"
},

Mejoras en el rendimiento.

Se ha removido el reflect-metadata polyfill en producción el cual es solamente necesario en desarrollo.

Adicionalmente, se ha colocado mensajes de alerta cuando el build de una distro supere los 2M y un error cuando supere los 5M. Se puede cambiar esto desde el angular.json

"budgets": [{
  "type": "initial",
  "maximumWarning": "2mb",
  "maximumError": "5mb"
}]

Angular Material y el CDK.

Adicionalmente a pequeños cambios en los aspectos graficos se han agregado dos cosas importantes que podran ser utilizados el Virtual Scrolling y el Drag and Drop

Con el Virtual Scrolling mostrar y ocultar elementos en el DOM cuando esta visible hace que tu app sea mucho mas rapido y la experiencia del usuario mas fluida.

<cdk-virtual-scroll-viewport itemSize="50" class="example-viewport">
  <div *cdkVirtualFor="let item of items" class="example-item"></div>
</cdk-virtual-scroll-viewport>

Con el Drag And Drop ahora incluido en el CDK es mucho mas facil manipular elemento cuando un usuario reordene elementos o mueva elementos.

<div cdkDropList class="list" (cdkDropListDropped)="drop($event)">
  <div class="box" *ngFor="let movie of movies" cdkDrag></div>
</div>
  drop(event: CdkDragDrop<string[]>) {
    moveItemInArray(this.movies, event.previousIndex, event.currentIndex);
  }

Mejoras en la accesibilidad de Selects.

Ahora mat-form-field va a utilizar los selects nativos en lugar de los mat-selects para mejorar el rendimiento y la accesibilidad.

Mejoras en Angular Elements.

Angular Elements ahoran soportan content projection usando Web Standards para los Custom Elements.

<my-custom-element>This content can be projected!</my-custom-element>

Ver mas de Content Projection

Bueno espero que sea de ayuda y no te olvides comentar y compartir :)

¡Compártelo!