Buenas prácticas en Angular
Emil Helmut Zapata Arellano
Senior Frontend Developer | NestJs Developer | Node Developer | React Developer | Angular Developer | SASS | TypeScript | Microfrontends | Serverless | Docker
Primeramente saludarlos y agradecerles por el tiempo que se van a tomar en leer este articulo o el intento de este.
A modo de resumen, expongo y detallo algunas malas practicas a nivel de JS y también nos metemos a fondo en las buenas prácticas en Angular que estoy implementando en el equipo al que pertenezco actualmente. Son las que creo que pueden potenciar el rendimiento de un desarrollador en Angular, aunque no son todas.
Malas prácticas en JS o Angular
Usar if en vez de una condición ternaria
// ❌ If innecesario
if (num > 0) {
return true
} else {
return false
}
// ✅ Devolvemos directamente el booleano
return num > 0
Utilizar == para comparar valores
El operador == de js hace comparación entre 2 valores, el problema es que usa la conversión de tipos en su mayoria de casos.
Es mejor usar la igualdad estricta === para comparar valor y tipo.
// ❌
const number = 0
const string = '0'
const bool = false
const nil = null
number == bool // true
string == number // true
nil == string // false OJO!
number == nil // false OJO!
// ✅
number === bool // false
string === number // false
nil === string // false
number === nil // false
Usar Magic String y Magic Numbers
Son valores que aparecen en mitad de tu código, que podrían ser reusables y que no tienen contexto por si mismos pero sí una utilidad.
// ❌
if (age >= 18) {}
const isCallCenter = channel === “call_center”
return brandType === 'IKF'
// ✅
const AGE_ADULTHOOD = 18
const CALL_CENTER = “call_center”
const BRAND_IKF = 'IKF'
if (age > AGE_ADULTHOOD)
const isCallCenter = channel === CALL_CENTER
return brandType === BRAND_IKF
Tener funciones sin funcionalidades
Las funciones sin implementar llenan el bundle que generamos con código basura que nunca se usa.
// ❌
export class CustomComponent implements OnInit, OnDestroy {
constructor() {}
ngOnInit() {}
ngOnDestroy(): void {}
}
// ✅
export class CustomComponent{}
Buenas prácticas en Angular
Usar trackBy junto con ngFor
NgFor necesita identificar de forma única los elementos en el iterable para realizar correctamente las actualizaciones de DOM cuando se reordenan los elementos del iterable, se agregan nuevos elementos o se eliminan elementos existentes.
Una aplicación angular que usa simplemente la directiva *ngFor sin la función trackBy destruirá todos los elementos DOM y luego los reconstruirá en el árbol DOM.
// In Component.html
<ng-container *ngFor='let user of users; trackBy:trackByUserCode'>
// In Component.ts
trackByUserCode(index: number, user: User): string {
return user.code;
}
Usar lazy loading (carga diferida)
Los módulos de carga diferida mejoran el tiempo de carga inicial de la aplicación al cargar solo los componentes necesarios.
// app-routing.module.ts
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'about', loadChildren: () =>
import('./about/about.module').then(m => m.AboutModule)
}
];
Evita lógica en las plantillas
Si tiene algún tipo de lógica en sus plantillas, incluso si es una && cláusula simple, es bueno extraerla en su componente.
¿Por qué?
Tener lógica en la plantilla significa que no es posible realizar pruebas unitarias y por lo tanto, es más propenso a errores al cambiar el código de la plantilla.
// ❌ - component.html
<p *ngIf="role==='developer'"> Status: Developer </p>
// component.ts
public ngOnInit (): void {
this.role = 'developer';
}
// ✅ - component.html
<p *ngIf="showDeveloperStatus"> Status: Developer </p>
// component.ts
public ngOnInit (): void {
this.role = 'developer';
this.showDeveloperStatus = true;
}
Suscríbete en la plantilla
Evite suscribirse a observables de componentes y en su lugar, suscríbase a los observables en la plantilla.
Los pipe async se dan de baja automáticamente y simplifica el código al eliminar la necesidad de administrar las suscripciones manualmente.
// ❌ - component.html
<p>{{ textToDisplay }}</p>
// component.ts
iAmAnObservable
.pipe(
map(value => value.item),
takeUntil(this._destroyed$)
)
.subscribe(item => this.textToDisplay = item);
// ✅ - component.html
<p>{{ textToDisplay$ | async }}</p>
// component.ts
this.textToDisplay$ = iAmAnObservable
.pipe(
map(value => value.item)
);
Recomendado por LinkedIn
Si esta pasando datos a un componente, utilice la vinculación de propiedad solo si es necesario
// ❌ - bad
<my-app-component [name]="'Steve'"></my-app-component>
// ✅ - good
<my-app-component name="Steve"></my-app-component>
Utilice ng-container cuando sea posible para reducir la cantidad de elementos DOM innecesarios
// ❌
<span *ngIf="something"></span>
// ✅
<ng-container *ngIf="something"></ng-container>
// ✅ - valido ya porque tiene una clase
<span *ngIf="something" class="i-need-this-class"></span>
Use [class] y [ngClass] según sea necesario
Si tiene que establecer solo una clase dependiendo de alguna condición, use [class.class-name]="condition".
<div [class.active]="isActive"></div>
Si tiene que establecer muchas clases use [ngClass]="{ . . . }".
<div [ngClass]="{ 'active': isActive, 'main-item': isMainItem, 'accent': isAccent }"></div>
Prevenir pérdida de memoria (Prevent memory leaks)
Una pérdida de memoria es la pérdida gradual de espacio disponible en la computadora cuando una aplicación administra incorrectamente la asignación de memoria, donde la memoria obsoleta no se libera adecuadamente.
Otra forma en que puede ocurrir una pérdida de memoria es cuando el código en ejecución ya no puede acceder a un objeto almacenado en la memoria.
<p>{{ textToDisplay$ | async }}</p>
// component.ts
this.textToDisplay$ = iAmAnObservable
.pipe(
map(value => value.item)
);
ngOnInit(){
this.eventService1.pipe(take(1)).subscribe(() => {});
this.eventService2.pipe(take(1)).subscribe(() => {});
this.eventService3.pipe(take(1)).subscribe(() => {});
}
private subject = new Subject();
ngOnInit(){
this.eventService1.pipe(takeUntil(this.subject)).subscribe(() => {});
this.eventService2.pipe(takeUntil(this.subject)).subscribe(() => {});
this.eventService3.pipe(takeUntil(this.subject)).subscribe(() => {});
}
ngOnDestroy() {
this.subject.next();
this.subject.complete();
}
private subscriptions: Subscription[] = [];
ngOnInit(){
const suscription = this.eventService.subscribe(() => {...});
this.subscriptions.push(suscription);
}
ngOnDestroy() {
this.subscriptions.forEach(subscription =>
subscription.unsubscribe()
);
}
Declase tipos de datos seguros
El primer paso será confirmar las categorías de datos y el rango de valores que contienen. Después de eso, la variable solo aceptará los valores posibles. Podemos declarar una variable como una lista de valores potenciales o de un tipo diferente en lugar de declararla como una variable de un tipo específico.
type Roles = "Admin" | "User";
const user1: Roles = "Admin";
const user2: Roles = "User";
const user3: Roles = "Teacher";
// La ultima linea dará error: El tipo "Teacher" no se puede asignar al tipo "Roles"
Agregar mecanismos de almacenamiento en caché
Al realizar llamadas API, las respuestas de algunas de ellas no cambian con frecuencia. En esos casos, puede agregar un mecanismo de almacenamiento en caché y almacenar el valor de la API. Cuando se realiza otra solicitud a la misma API, verifique si hay un valor para ella en el caché y de ser así, úselo. De lo contrario, realice la llamada a la API y almacene en caché el resultado.
Si los valores cambian pero no con frecuencia, puede introducir un tiempo de caché donde pueda verificar cuándo se almacenó en caché por última vez y decidir si llamar o no a la API.
¿Por qué?
Tener un mecanismo de almacenamiento en caché significa evitar llamadas API no deseadas. Al realizar las llamadas a la API solo cuando sea necesario y evitar la duplicación, la velocidad de la aplicación mejora al no tener que esperar a la red. También significa que no descargamos la misma información una y otra vez.
Usar EsLint
Se sigue la misma convención de código en toda la aplicación Angular,
Verificación de reglas de forma automatizada durante el proceso de construcción.
Actualizaciones sencillas y adiciones de nuevas reglas a la guía de estilo de codificación.
Ufffffffffff si llegaste hasta aquí, si que eres un adicto a las mejoras prácticas, espero te ayude, cualquier comentario hazmelo llegar por el DM.
Gracias por tu tiempo.
Refencias