Hola Habr!Hoy quería tocar el tema del código correcto al trabajar con Angular. Estas recomendaciones harán que su código sea más efectivo en la práctica, y también me permitirán ser menos exigente con el código junior.
1. Evita la lógica en los patrones
Y lo primero que quiero mencionar es la lógica en las plantillas. Si tiene algún tipo de lógica en sus plantillas, incluso si es simple &&, es útil extraerlo en su componente. La presencia de lógica en la plantilla significa que es imposible probarla y, por lo tanto, es más propenso a errores al cambiar el código de la plantilla.
<p *ngIf="isShow"> Example </p>
public ngOnInit(): void { this.isShow = true; }
2. Líneas "seguras"
Suponga que tiene una variable de tipo cadena que solo puede tener un conjunto específico de valores. En lugar de declararlo como un tipo de cadena, puede declarar esta lista de posibles valores como un tipo.
private value: 'One' | 'Two'; if (isShow) { value = 'One'; } else { value = 'Two' }
Al declarar el tipo de variable de esta manera, podemos evitar errores al escribir código en tiempo de compilación, en lugar de en tiempo de ejecución.
3. La regla de los métodos largos.
Aquí hay una demostración de código es redundante. Es importante entender que a nadie le gustan los métodos largos.
Los métodos largos generalmente indican que hacen demasiadas cosas. Es posible que el método en sí mismo haga una cosa, pero dentro de él hay varias otras operaciones que se pueden colocar en otro método que tiene su propio propósito lógico. Los métodos largos son difíciles de leer, comprender y mantener. También son propensos a errores, ya que cambiar una cosa puede afectar muchas otras cosas en este método. Estoy seguro, no solo para mí, tales métodos hacen que la refactorización (que es la clave en cualquier aplicación) sea más difícil de lo que podría ser.
4. Duplicación de código
Si tiene código que se repite en diferentes lugares del proyecto. Extraiga el código de repetición en un método separado y úselo en lugar del código de repetición.
El problema con la duplicación de código es que si queremos hacer cambios en la lógica de este código, tenemos que hacerlo en varios lugares. Esto dificulta el mantenimiento del código, lo que a su vez aumenta el riesgo de que aparezcan errores. También lleva más tiempo realizar cambios en la lógica. Con menos código duplicado, la aplicación será más rápida.
5. trackBy
Diluyamos la lista de sutilezas de trabajar con Angular.
A menudo utilizado por ngFor para iterar sobre una matriz en plantillas, a menudo se ve privado en la práctica de una función como trackBy. Úselo para trabajar con ngFor. Gracias a tal bagatela, recibirá un identificador único para cada elemento.
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
trackByFn(index, item) { return item.id;
Cuando la matriz cambia, Angular vuelve a mostrar todo el árbol DOM. Pero si usa trackBy, Angular sabrá qué elemento ha cambiado y solo cambiará el DOM para ese elemento en particular.
6. Suscríbase en la plantilla
Preste atención al ejemplo de suscripción al componente observado:
<p>{{ text }}</p>
blablaObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.text = item);
Ahora has visto cómo no hacerlo. No es que te haya instado a seguir estrictamente mis recomendaciones, es solo que los desarrolladores a menudo no profundizan en lo que sucede en su código. Entonces, ¿por qué es malo y cómo hacerlo bien? El hecho es que corremos el riesgo de darnos de baja accidentalmente de una suscripción en un componente, lo que puede provocar una pérdida de memoria. La mejor opción es usar una suscripción en la plantilla misma:
<p>{{ text$ | async }}</p>
this.text$ = blablaObservable .pipe( map(value => value.item) );
Gracias a la sincronización, no tenemos que preocuparnos por cancelar la suscripción, ya que lo hace automáticamente, y esto simplifica el código, eliminando la necesidad de administrar manualmente las suscripciones. También reduce el riesgo de darse de baja accidentalmente del componente que mencioné anteriormente.
7. Carga perezosa
Siempre que sea posible, use la carga de módulos diferidos en su aplicación Angular. La carga diferida es cuando descarga algo solo cuando se usa, por ejemplo, carga un componente solo cuando necesita verlo. Esto reducirá el tamaño de la aplicación descargable y puede mejorar el tiempo de carga de la aplicación sin cargar módulos que no están en uso.
// app.routing.ts
{ path: 'dashboard', loadChildren: 'lazy-load.module#DashboardModule' }
8. Suscripción dentro de la suscripción.
A veces puede necesitar valores de más de un observable para completar una acción. En este caso, evite suscribirse a un observable en el bloque de suscripción de otro observable. En su lugar, use los operadores de encadenamiento apropiados. Las declaraciones en cadena se ejecutan en observables desde la declaración en frente de ellos. Algunos operadores de cadena, como withLatestFrom, combineLatest, etc.
Para:
oneObservable$.pipe( take(1) ) .subscribe(oneValue => { twoObservable$.pipe( take(1) ) .subscribe(twoValue => { console.log([oneValue, twoValue].join(', ')); }); });
Después:
oneObservable$.pipe( withLatestFrom(twoObservable$), first() ) .subscribe(([oneValue, twoValue]) => { console.log([oneValue, twoValue].join(', ')); });
9. Almacenamiento en caché
Al realizar solicitudes a la API, las respuestas de algunos de ellos a menudo no cambian. En estos casos, puede agregar un mecanismo de almacenamiento en caché y guardar el valor de la API. Cuando la solicitud deba repetirse en la misma API, verifique si tiene un valor en el caché y, de ser así, úselo. De lo contrario, realice una llamada API y guarde en caché el resultado. Si es necesario, puede ingresar el tiempo de caché, donde puede verificar cuándo fue la última vez y decidir si llamar a la API. Tener un mecanismo de almacenamiento en caché evita solicitudes de API no deseadas. Debido a que se evitan las solicitudes duplicadas, la velocidad de la aplicación mejora, ya que no necesitamos esperar una respuesta y, por lo tanto, descargar la misma información una y otra vez.
10. Trituración en componentes reutilizables.
Divide los componentes grandes en otros más pequeños. Simplifique dichos componentes y hágalos lo más tontos posible, ya que esto los hará funcionar en más escenarios. La creación de dicho componente significa que el componente no tiene ninguna lógica especial en sí misma y funciona únicamente sobre la base de las entradas y salidas proporcionadas. Por lo general, el último descendiente en el árbol de componentes será el más simple de todos. Esto se realiza en función de la facilidad de uso de dichos componentes, ya que es menos probable que estos componentes obtengan errores. Los componentes reutilizables también reducen la duplicación de código, lo que facilita el mantenimiento y la realización de cambios.
¿Te gustaría continuar con esa columna?