Explicar tubería pura e impura en Angular

En este artículo, aprenderemos sobre las tuberías puras e impuras en Angular. También exploraremos cómo Angular maneja ambos tipos de tuberías con un ejemplo.

¿Qué son las tuberías angulares?

Las tuberías angulares son una forma de transformar el formato de los datos de salida para su visualización. Los datos pueden ser strings, montos de moneda, fechas, etc. Los conductos son funciones simples que aceptan una entrada y devuelven un valor transformado en una comprensión más técnica. No alteran los datos, pero cambian al formato requerido para mostrarse en el navegador. Angular proporciona muchas canalizaciones integradas para la transformación típica de datos. También puede crear tuberías personalizadas si desea realizar una transformación personalizada.

Tubos angulares

Tubos angulares

Características:

• Las tuberías se definen mediante la tubería «|» símbolo.
• Podemos aplicar dos formatos a datos individuales enstringndo tuberías. Una tubería enstringda es cuando la salida de la primera tubería se ingresa a la siguiente tubería.
• Las tuberías pueden tener parámetros opcionales usando el símbolo de dos puntos (:) para ajustar la salida.

Ejemplo: Usaremos una tubería mayúscula integrada que transforma el texto a mayúsculas.

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  template: `{{ title | uppercase}}`,
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'pipes in angular';
}

Producción:

 

Tuberías puras e impuras: en Angular, las tuberías son de dos tipos.

• Pipas puras
• Tuberías impuras

Pipas puras:

• Las tuberías puras en angular son las tuberías que se ejecutan cuando detecta un cambio puro en el valor de entrada.
• Un cambio puro es cuando el ciclo de detección de cambios detecta un cambio en un valor de entrada primitivo (como String, Número, Booleano o Símbolo) o una referencia de objeto (como Fecha, Array, Función u Objeto). Veamos un ejemplo,

<div> {{ user | myPipe }} </div>

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = { name:'Rohit', age: 23};
}

here, user is an object and myPipe is a custom Pipe. 

• myPipe se ejecutará si detecta un cambio en la referencia del objeto del usuario.
• ¿Qué pasará si trato de cambiar la propiedad de los usuarios? ¿Se ejecutará myPipe?

user.age = 19;

• La respuesta es no. myPipe no se ejecutará incluso si la propiedad ha cambiado porque la referencia del objeto sigue siendo la misma. Para detectar este cambio, Angular tendrá que hacer una verificación profunda de las diferencias dentro del objeto. Además, este cambio no es puro; la tubería ignora los cambios dentro de los objetos.
• Se utiliza una única instancia de tubería en todo el componente.
• Un puro debe usar una función pura.
• Una función pura no depende de ningún estado, dato o cambio durante la ejecución. En otras palabras, dados los mismos argumentos, una función pura siempre debería devolver el mismo resultado.

function add(a, b){
    return a + b
 }

• En el ejemplo anterior, si los valores de los argumentos no se modifican, la función devolverá el mismo resultado. Por lo tanto, no depende del cambio de estado.
• Por defecto, las tuberías en angular son tuberías puras. Las tuberías personalizadas se pueden definir como tuberías puras cambiando la bandera pura a verdadera del decorador @Pipe.

@Pipe({
  name: 'purePipe',
  pure: true      
})
export class PurePipe {}

Tuberías impuras:

• Las tuberías impuras en angular son las tuberías que se ejecutan cuando detecta un cambio impuro en el valor de entrada. 
• Un cambio impuro es cuando el ciclo de detección de cambios detecta un cambio en los objetos compuestos, como agregar un elemento a la array existente. Tomemos el mismo ejemplo que tomamos antes.

<div> {{ user | myPipe }} </div>

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  user = { name:'Rohit', age: 23};
}

user.age = 19;

• Para el ejemplo anterior, si queremos que nuestra tubería personalizada detecte cambios dentro de nuestro objeto de usuario, entonces tenemos que hacer que el atributo puro sea falso.

@Pipe({
  name: 'myPipe',
  pure: false      
})
export class MyPipe {...}

• Ahora, myPipe se ejecutará en cada cambio.
• Se requieren tuberías impuras porque angular ignora los cambios en los objetos compuestos.
• Las tuberías impuras se ejecutan cada vez que angular detecta cualquier cambio, independientemente del cambio en el valor de entrada.
• Utiliza la función impura.
• Una función impura depende de cualquier estado, dato o cambio durante la ejecución y es posible que no devuelva el mismo resultado si se pasan las mismas entradas a la función respectiva. Tomemos una función simple como ejemplo.

var discount = 15
 
function calculateAmount(price){
    return total + (price - discount);
}

• La función anterior no devuelve el mismo resultado cada vez. Porque el valor de retorno de la función depende de la variable externa llamada descuento. Puede variar según el valor. 
• Se crean instancias múltiples para tuberías impuras.
• La tubería asíncrona es un ejemplo de una tubería impura.

Cómo Angular maneja las tuberías puras e impuras: el siguiente diagrama describe cómo angular maneja las tuberías puras e impuras.

Cómo las tuberías puras e impuras son manejadas por angular

Ejemplo de tuberías puras e impuras: en este ejemplo, crearemos una aplicación Angular para mostrar los datos de los empleados. Crearemos una tubería personalizada para comprender el funcionamiento de las tuberías puras e impuras. El botón «Agregar empleado» se usa para agregar un empleado a la lista y «Reiniciar» se usa para borrar el cuadro de texto.

 

Tubería personalizada (search.pipe.ts)

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'search'
})
export class SearchPipe implements PipeTransform {
 
  transform(value: any, name: string) {
    if(name === ''){
      return value;
    }
    return value.filter((employee) => {
    employee.firstName.startsWith(name)
   });
  }
}

search pipe is used to filter the list based on the text added in the input box.

Clase de componente (app.component.ts)

import { Component } from '@angular/core';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  nameString = '';
  employees = [{
      firstName: 'Rohit',
      lastName: 'Sharma',
      dept: 'Finance',
      salary: 5000,
      doj: new Date('2012-04-22')
    },
    {
      firstName: 'Aditi',
      lastName: 'Mishra',
      dept: 'Sales',
      salary: 6000,
      doj: new Date('2016-09-16')
    },
    {
      firstName: 'Dipti',
      lastName: 'Singh',
      dept: 'IT',
      salary: 10000,
      doj: new Date('2021-09-03')
    }
  ]
 
  addUser(){
    this.employees.push({
      firstName: 'Rahul',
      lastName: 'Yadav',
      dept: 'HR',
      salary: 8000,
      doj: new Date('2016-11-19')
    })
  }
 
  reset(){
    this.employees = this.employees.slice()
  }
}

In the component class, there is an array employees 
for storing employees data. The function addUser() 
is used to add employees in the list.

Plantilla (aplicación.componente.html)

<div class="container">
  <h1>Employee Details</h1>
  <span>Search </span>
  <input type="text" [(ngModel)]="nameString">
  <br/><br/>
  <table class="table table-sm table-striped m-t-4">
    <thead class="thead-dark">
      <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Department</th>
      <th>Salary</th>
      <th>Joining Date</th>
    </tr>
  </thead>
  <tbody>
    <tr *ngFor="let employee of employees | search:nameString">
      <td>{{employee.firstName}}</td>
      <td>{{employee.lastName}}</td>
      <td>{{employee.dept}}</td>
      <td>{{employee.salary | currency}}</td>
      <td>{{employee.doj | date:'dd/MM/yyyy'}}</td>
    </tr>
  </tbody>
  </table>
  <button type="button" class="btn btn-success m-3"
          (click)="addUser()">
    Add Employee
  </button>
  <button type="button" class="btn btn-success"
          (click)="reset()">
    Reset
  </button>
</div>

Salida: La siguiente salida muestra la tubería de búsqueda de trabajo en la aplicación Angular.

 

Ahora, exploremos el trabajo de tuberías puras e impuras en nuestra aplicación. Ahora intentaremos agregar un empleado mientras filtramos los datos. De forma predeterminada, las tuberías personalizadas son tuberías puras. Por lo tanto, el siguiente resultado es un ejemplo de una tubería pura. 

 

Here, We try to add an employee having the first name with the same starting letter to check if it 
appears in the filtered data.

La lista filtrada no se actualiza al hacer clic en el botón Agregar empleado porque la canalización pura ignora los cambios dentro de los objetos. La lista filtrada se actualiza haciendo clic en el botón Restablecer porque cambia la referencia de la array. 

Si usamos tuberías impuras, el cambio se verá reflejado con solo hacer clic en el botón Agregar empleado. Las tuberías impuras ahora detectan cambios dentro de los objetos. Veamos cómo se implementa.

import { Pipe, PipeTransform } from '@angular/core';
 
@Pipe({
  name: 'search',
  pure: false
})
export class SearchPipe implements PipeTransform {
 
  transform(value: any, name: string) {
    if(name === ''){
      return value;
    }
    return value.filter((employee) => {
    employee.firstName.startsWith(name)
   });
  }
 
}

 

Diferencia entre tuberías puras e impuras

Conclusión:

• Las canalizaciones puras detectan cambios solo cuando hay un cambio en los tipos primitivos o en la referencia a objetos. 
• Las tuberías puras optimizan el ciclo de detección de cambios angulares porque verificar valores primitivos o referencias de objetos es mucho más rápido que detectar un cambio dentro de un objeto. 
• Las tuberías impuras se ejecutan cada vez que se ejecuta la detección de cambios, independientemente de que el valor de entrada haya cambiado o no. Entonces, ahora el código se ejecuta en cada evento de mouse o teclado; esto puede abusar de los recursos del sistema. Si la tubería es pesada, degradará el rendimiento de la aplicación.
• Por lo tanto, tenga cuidado al usar tuberías impuras.