Post Top Ad

Your Ad Spot

martes, 18 de agosto de 2020

Mejores prácticas de Angular

Si ha estado presente en los últimos años en el campo del desarrollo, estoy seguro de que debe haberse encontrado con el nombre Angular al menos una vez. En este artículo, no solo vamos a hablar sobre qué es Angular, sino algunas de las mejores prácticas que un desarrollador debe tener en cuenta para mantener la eficiencia del proyecto y el código más fácil de administrar y depurar.

¿Qué es Angular? 

Angular es una plataforma y un marco MVVC moderno que se utiliza para crear aplicaciones web empresariales de una sola página (o SPA) utilizando HTML y TypeScript. Angular está escrito en TypeScript. Implementa la funcionalidad básica y opcional como un conjunto de bibliotecas de TypeScript que importa a sus aplicaciones. Angular es un marco obstinado, lo que significa que especifica un cierto estilo y ciertas reglas que los desarrolladores deben seguir y cumplir al desarrollar aplicaciones con Angular, por lo tanto, debe aprender Angular y los diversos componentes que componen una aplicación Angular.

Angular vs AngularJS

Muchos principiantes se confunden con tantas versiones diferentes para el mismo marco. Debes haber escuchado AngularJS, Angular 2, Angular 4, Angular 5, Angular 6 y ahora Angular 7. Bueno, en realidad, hay dos marcos diferentes: AngularJS y Angular.
AngularJS es el marco de desarrollo web basado en JavaScript que se lanzó por primera vez en 2010 y es mantenido por Google. Más tarde, en septiembre de 2016, se anunció Angular 2, que fue una reescritura completa de todo el marco utilizando TypeScript, un lenguaje superconjunto de JavaScript.
Dado que los navegadores modernos (a partir de ahora) no entienden TypeScript, se requiere un compilador o transpilador TS para convertir el código TS en código JS normal.

¿Por qué Angular? 

¿Por qué usamos Angular que usa TypeScript como el lenguaje de programación principal cuando viene con la sobrecarga de transpilación? Bueno, la respuesta está en la lista de ventajas que ofrece TypeScript sobre el JavaScript tradicional. Con TypeScript, los desarrolladores pueden usar tipos de datos, resaltado de sintaxis, finalización de código y todas las demás características modernas que les ayudan a codificar más rápido y más eficientemente. Dado que TypeScript es un lenguaje de programación orientado a objetos, los desarrolladores pueden aprovechar las ventajas de las clases, los objetos, la herencia y características similares que ofrecen todos los demás OOPL.
Angular, por lo tanto, es el marco que usa TypeScript como lenguaje de programación principal. Dado que el equipo de Angular optó por el control de versiones semántico, Angular 2, 4, 5, 6 y 7 son todas las versiones del mismo marco, siendo cada versión mejor que la anterior, mientras que AngularJS es un marco completamente diferente que usa JavaScript como principal lenguaje de programación.

Prácticas recomendadas recomendadas

Mejores prácticas de Angular
A continuación, analizaremos algunas de las mejores prácticas que un desarrollador debe seguir para que el proyecto sea más fácil de administrar y depurar. Aunque no existen reglas estrictas con respecto a estas mejores prácticas, la mayoría de los desarrolladores las siguen. Puede tener sus propios estilos de codificación y eso también está bien.

Usando el poder de TypeScript

Angular está escrito con TypeScript, lo que significa que todo el código que escribirás para crear tu increíble aplicación web también se escribirá con TypeScript. Un punto clave a tener en cuenta aquí es que todo el código JavaScript es código TypeScript válido. Si bien se recomienda que use código TypeScript todo el tiempo, incluso puede usar código JavaScript, si lo desea.
El uso de TypeScript le ofrece ciertas ventajas, ya que puede definir tipos en las propiedades y variables, puede definir clases e interfaces y utilizar el poder de las interfaces y uniones.
Especifique tipos para todas las variables. Esto le ayuda a evitar que otros desarrolladores que trabajan en el proyecto almacenen información incorrecta en la variable. Por ejemplo, si una variable llamada edad es del tipo número, solo puede almacenar valores numéricos. Si otro desarrollador escribe el código para almacenar el valor de cualquier otro tipo, por ejemplo, una cadena, el editor de código advertirá al desarrollador y el proceso de compilación también podrá detectar el error en el código. Estos errores no se filtrarán en el tiempo de ejecución.
Las clases en lenguajes de programación orientados a objetos se utilizan para contener miembros de datos y funciones miembro relacionadas con un ciudadano en particular en la aplicación. Ya sea un producto, un usuario o algo parecido. Siempre cree clases para representar a estos ciudadanos en sus aplicaciones. Encapsule toda la funcionalidad relacionada con estos objetos dentro de estas clases. Esto ayuda a mantener la coherencia y el mantenimiento cuando un gran equipo está trabajando en el proyecto.
class User {
first_name: cadena;
last_name: cadena;
correo electrónico: cadena;
constructor (f_name: string, l_name: string, email: string) {
this.first_name = f_name;
this.last_name = l_name;
this.email = correo electrónico;
}
enviar correo() {
// método para enviar un correo electrónico al usuario
}
}
La consistencia también aporta productividad a la imagen. Los desarrolladores no tienen que preocuparse tanto por si lo están haciendo de la "manera correcta".
Cree modelos para representar objetos en sus datos que pueden ser más complejos que simplemente una cadena o un número. El uso de modelos le permite utilizar la ayuda que ofrece el editor de código que está utilizando. La mayoría de los errores que probablemente se introduzcan debido a la escritura se pueden evitar porque no es necesario recordar los nombres de las propiedades dentro del modelo, ya que el Editor de código sugerirá los nombres a medida que escribe.
Si ha trabajado con frameworks MVC antes, sabe que declara tipos en un modelo que luego se puede reutilizar en el resto de la aplicación. Con TypeScript, las aplicaciones front-end ahora pueden beneficiarse de modelos fuertemente tipados. Considere un modelo simple para un usuario como se muestra a continuación.
Exportar interfaz Usuario {
  nombre: cadena = 'Angular';
  edad: número = 0;
}
Según la Guía de estilo angular, los modelos deben almacenarse en una carpeta compartida / si se utilizarán en más de una parte de su aplicación.
Muchas veces, los desarrolladores dependen de las API y los datos devueltos por las API. Recupera los datos, los procesa y presenta los datos al usuario en una interfaz de usuario limpia y agradable. Es posible que las API no siempre sean perfectas o que algún campo de la API no siempre contenga los valores esperados o los valores en el formato esperado.
TypeScript permite tipos de intersección. Esto le permite crear variables de un tipo que es una combinación de dos o más tipos. Echemos un vistazo a un ejemplo.
interfaz Estudiante {
    roll_number: número;
    nombre: cadena;
}
profesor de interfaz {
    teacher_id: cadena;
}
tipo A = Estudiante y profesor;
sea ​​x: A;
x.roll_number = 5;
x.name = 'Samarth Agarwal';
x.teacher_id = 'ID3241';
En el código anterior, el nuevo tipo A es una combinación de los tipos Student y Teacher y, por lo tanto, contendrá las propiedades de ambos tipos.
Mientras que la intersección crea un nuevo tipo con la combinación de los tipos proporcionados, union, por otro lado, le permite tener un tipo cualquiera de los varios tipos proporcionados como argumentos. Veamos un ejemplo.
edad: cadena | número;
En el fragmento de código anterior, la variable de edad puede almacenar un valor del tipo cadena o número. Entonces, ambos valores siguientes estarán bien.
this.age = 12;
this.age = 'doce';

Utilice la CLI angular

Angular CLI es una de las herramientas de accesibilidad más poderosas disponibles al desarrollar aplicaciones con Angular. Angular CLI facilita la creación de una aplicación que ya funciona, desde el primer momento. ¡Ya sigue todas las mejores prácticas!
Angular CLI es una herramienta de interfaz de línea de comandos que se utiliza para inicializar, desarrollar, andamiaje, mantener e incluso probar y depurar aplicaciones Angular. Puede utilizar la herramienta directamente en un shell de comandos.
En lugar de crear los archivos y carpetas manualmente, intente usar siempre la CLI de Angular para generar nuevos componentes, directivas, módulos, servicios, tuberías o incluso clases. Angular CLI actualiza los archivos de módulo requeridos y genera archivos y carpetas requeridos. También crea los archivos necesarios para la prueba unitaria de los componentes y las directivas. Esto mantiene la uniformidad de la estructura en toda la aplicación y ayuda a mantener, actualizar y depurar fácilmente el proyecto.
La CLI también le permite usar el servidor de desarrollo para probar las aplicaciones localmente y luego construir la compilación de producción de la aplicación para su implementación.
Para mantenerse actualizado con la última versión de la CLI, puede usar el siguiente comando.
npm install @ angular / cli -g
También puede verificar la versión instalada en su sistema usando el siguiente comando.
versión ng

Convenciones de nombres

Según la guía de estilo Angular, las convenciones de nomenclatura son muy importantes para la facilidad de mantenimiento y la legibilidad. Las siguientes convenciones generales de nomenclatura se especifican en la guía de estilo angular.
  • Use nombres consistentes para todos los símbolos.
  • Siga un patrón que describa la característica del símbolo y luego su tipo. El patrón recomendado es feature.type.ts.
  • Utilice guiones para separar palabras en el nombre descriptivo.
  • Utilice puntos para separar el nombre descriptivo del tipo.
  • Utilice nombres de tipos convencionales, incluidos .service, .component, .pipe, .module y .directive. Invente nombres de tipos adicionales si es necesario, pero tenga cuidado de no crear demasiados.
¿Por qué? Las convenciones de nomenclatura ayudan a proporcionar una forma coherente de buscar contenido de un vistazo. La coherencia dentro del proyecto es vital. La coherencia con un equipo es importante. La coherencia en una empresa proporciona una eficiencia tremenda.
¿Por qué? Las convenciones de nomenclatura deberían simplemente ayudar a encontrar el código deseado más rápido y hacerlo más fácil de entender.
¿Por qué? Los nombres de carpetas y archivos deben transmitir claramente su intención. Por ejemplo, app / heroes / hero-list.component.ts puede contener un componente que gestiona una lista de héroes.
El propósito de las pautas anteriores es garantizar que con solo mirar el nombre del archivo, se pueda inferir el propósito y el tipo de contenido del archivo. Por ejemplo, los archivos con los nombres hero.component.ts y hero.service.ts pueden identificarse fácilmente como archivos del componente y servicio de algo llamado héroe en el proyecto, respectivamente.
Nota:  Si está utilizando la CLI de Angular (que siempre debe hacer), la CLI se encargará automáticamente de los nombres de los archivos.

Principio de responsabilidad única

El principio de responsabilidad única es un principio de programación de computadoras que establece que cada módulo, clase o función debe tener responsabilidad sobre una sola parte de la funcionalidad proporcionada por el software, y esa responsabilidad debe estar completamente encapsulada por la clase.
Aplicar el principio de responsabilidad única (SRP) a todos los componentes, servicios y otros símbolos. Esto ayuda a que la aplicación sea más limpia, más fácil de leer y mantener y más comprobable.
Según la guía de estilo, las funciones deben limitarse a 75 líneas de código. Cualquier método más grande que ese debe dividirse en varios archivos o métodos. Cada archivo, por otro lado, debe limitarse a 400 líneas de código.
La creación de un componente por archivo facilita la lectura y el mantenimiento de los componentes a medida que la aplicación crece con el tiempo. Esto también ayuda a evitar colisiones con los equipos de control de fuentes. Esto también evita los errores ocultos que pueden surgir a menudo cuando combinamos varios componentes en un archivo donde pueden terminar compartiendo variables, creando cierres no deseados o acoplamientos no deseados con dependencias. Un solo componente puede ser la exportación predeterminada para su archivo, lo que facilita la carga diferida con el enrutador.
La clave es hacer que el código sea más reutilizable, más fácil de leer y menos propenso a errores.

Desglose de componentes

Esto podría ser una extensión del principio de responsabilidad única no solo para los archivos de código o los métodos, sino también para los componentes. Cuanto más grande sea el componente, más difícil será depurarlo, mantenerlo y probarlo. Si un componente se agranda, divídalo en varios componentes más pequeños, más manejables y dedicados cada uno a una tarea atómica.
En tal situación, si algo sale mal, puede detectar fácilmente el código erróneo y solucionarlo dedicando menos tiempo a detectar el problema.
Mire el siguiente código para un componente llamado PostComponent que se puede usar para mostrar varias partes de la publicación, incluido el título, el cuerpo, la información del autor y los comentarios realizados por las personas en la publicación.
<div>
<h1>
<post-title> </post-title>
<h1>
<post-body> </post-body>
<post-author> </post-author>
<post-comments> <post-comments>
</div>
Desglose de componentes
El componente contiene varios componentes y cada uno de estos componentes solo maneja una pequeña tarea. Podríamos haber tenido un componente gigantesco en lugar de tener 4 diferentes, pero eso hubiera sido muy difícil de mantener y leer.
También es una buena práctica mantener un código mínimo dentro del componente. El componente debe manejar el trabajo de mostrar los datos al usuario de una manera agradable y limpia, mientras que la responsabilidad de la recuperación de datos debe subcontratarse a un servicio. El componente debe recibir los datos como entrada o utilizar el servicio para recuperar los datos.

Optimizaciones de detección de cambios

Cuando construyes un andamio en una nueva aplicación Angular, el detector de cambios parece mágicamente rápido. Tan pronto como cambia el valor de una propiedad con el clic de un botón o algo así, la vista se actualiza casi en tiempo real sin demoras.
Pero, a medida que la aplicación crece, las cosas pueden comenzar a demorarse un poco. Si tiene la función de arrastrar y soltar en su interfaz, es posible que ya no obtenga actualizaciones de 60FPS suaves como la seda mientras arrastra elementos.
En este punto, hay tres cosas que puede hacer y debe hacerlas todas:
  • Use NgIf y no CSS: si los elementos DOM no están visibles, en lugar de ocultarlos con CSS, es una buena práctica eliminarlos del DOM usando * ngIf.
  • Haz tus expresiones más rápido. Mueva cálculos complejos al enlace del ciclo de vida ngDoCheck y consulte el valor calculado en su vista. Almacene en caché los resultados en cálculos complejos el mayor tiempo posible.
  • Use la estrategia de detección de cambios de OnPush para decirle a Angular que no ha habido cambios. Esto le permite omitir todo el paso de detección de cambios en la mayor parte de su aplicación la mayor parte del tiempo y evita los pasos inesperados de detección de cambios cuando no son necesarios en absoluto.
Esto ahorra el problema de determinar empíricamente todas las propiedades de todos los componentes angulares y las directivas para cambios y, por lo tanto, mejora mucho el rendimiento de la aplicación.

Construya componentes reutilizables

Es una regla que nunca se dijo: construir componentes reutilizables. Si hay una parte de la interfaz de usuario que necesita en muchos lugares de su aplicación, cree un componente a partir de ella y utilice el componente.
Esto le ahorrará muchos problemas si, por alguna razón, la interfaz de usuario debe cambiarse un poco. En ese caso, no cambia el código de la interfaz de usuario en los 100 lugares. En su lugar, puede cambiar el código en el componente y eso es todo. Los cambios se reflejarán automáticamente en todos los usos del componente en toda la aplicación.
La reutilización de un componente en varios lugares puede requerir que el componente cambie a sí mismo en función del contexto y se ajuste en consecuencia. Para esto, es posible que tenga que usar enlaces de propiedad y eventos para pasar entradas a los componentes y recibir eventos de salida de los componentes, respectivamente.

Código API en un servicio

Los componentes consumen servicios.
Un servicio es típicamente una clase con un propósito limitado y bien definido. Debería hacer algo específico y hacerlo bien. El servicio es una categoría amplia que abarca cualquier valor, función o característica que necesite una aplicación.
Esto nuevamente se conecta con el principio de responsabilidad única y mantiene los componentes esbeltos. En Angular, existe una línea clara de separación entre componentes y servicios, y esto se hace para aumentar la modularidad y la reutilización. Cuando la funcionalidad relacionada con la vista de un componente se separa de otros tipos de procesamiento, hace que las clases de componentes sean sencillas y eficientes.
Ciertas tareas se pueden delegar a los servicios por componentes, como obtener datos del servidor, validar la entrada del usuario o iniciar sesión directamente en la consola. Si definimos estas tareas en un servicio, lo haremos reutilizable en todos los componentes de la aplicación y más. Sin embargo, Angular no aplica estos principios, pero Angular lo ayuda a seguir estos principios al facilitar la división de la lógica de su aplicación en servicios y hacer que esos servicios estén disponibles para los componentes a través de la inyección de dependencia.

export class APIService {
  obtener() {
// código para obtener los datos del servicio web o API
}
  publicar (datos: cualquiera) {
// código para enviar los datos al servicio web o API
}
  actualizar (datos: cualquiera) {
// código para actualizar los datos
}
}
El código anterior es una representación de un servicio que interactúa con la API externa en nombre de la aplicación. Este servicio se puede utilizar para obtener los datos de la API, enviar los datos a la API y actualizar los datos existentes en el servidor. Otros componentes utilizan este servicio para gestionar el envío y la recepción de datos.

Usando trackBy en NgFor

Las directivas NgFor se utilizan para recorrer una colección (o una matriz) en su aplicación para representar una parte de la IU repetidamente. El siguiente fragmento es una implementación típica de renderizar una colección usando la directiva NgFor.
<ul>
<li * ngFor = "dejar el elemento de la colección;"> {{item.id}} </li>
</ul>
Y usemos el siguiente código en la clase TS para cambiar los elementos de la colección cada 1 segundo.
importar {Componente} desde '@ angular / core';
@Componente({
 selector: 'mi-aplicación',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})
export class AppComponent {
 colección = [{id: 1}, {id: 2}, {id: 3}];
 constructor () {
   setInterval (() => { 
      let randomIndex = parseInt (((Math.random () * 10)% 3) .toString ()); 
      this.collection [randomIndex] = { 
        id: parseInt (((Math.random () * 10)% 10) .toString ()) 
      } 
    }, 1000) 
 }
}
Si cambiamos los datos en la colección, por ejemplo como resultado de una solicitud de API o alguna otra lógica compleja dentro de la aplicación, es posible que tengamos un problema porque Angular no puede realizar un seguimiento de los elementos (no puede identificar cada elemento individual) en la colección y no tiene conocimiento de qué elementos se han eliminado, agregado o cambiado.
Como resultado, Angular necesita eliminar todos los elementos DOM que están asociados con los datos y volver a crearlos. Eso significa muchas manipulaciones DOM, especialmente en el caso de una gran colección, y como sabemos, las manipulaciones DOM son caras. Esto está bien si tiene una aplicación pequeña o la colección solo tiene algunos elementos, pero a medida que la aplicación crece, puede causar problemas de rendimiento en la aplicación.
La solución es usar siempre trackBy siempre que use la directiva NgFor. Asegúrese siempre de pasar un valor único a trackBy para que Angular pueda identificar de forma única cada elemento de la colección utilizando el valor único. En el siguiente fragmento, usamos el id.
<ul>
<li * ngFor = "dejar el elemento de la colección; trackBy: id"> {{item.id}} </li>
</ul>
Si ejecuta el código anterior y observa el DOM usando Google Chrome Inspector, encontrará que solo se vuelve a representar el elemento de la lista que ha cambiado. Todos los demás elementos de la lista no se modifican.
TrackBy también toma una función como argumento que toma el índice y el elemento actual como argumentos y necesita devolver el identificador único para este elemento.

Módulos de carga diferida

La carga diferida es una técnica en Angular que le permite cargar componentes de JavaScript de forma asíncrona en función de la ruta activada actualmente. Es una característica que podría ayudarlo mucho con aplicaciones grandes y pesadas.
Dado que la carga diferida divide la aplicación en varios módulos (fragmentos lógicos de código) y carga esos módulos solo cuando el usuario los requiere (dependiendo de dónde navegue el usuario dentro de la aplicación), reduce los tiempos de carga inicial de la aplicación, ya que se cargan menos KB cuando la aplicación se carga primero. A medida que el usuario navega dentro de la aplicación, se cargan más fragmentos cuando es necesario. El enrutador angular tiene soporte completo para módulos angulares de carga diferida.

Usando Async Pipe

Siempre uso async pipe cuando es posible y solo uso .subscribe cuando el efecto secundario es una necesidad absoluta.
Debe haber escuchado que AsyncPipe se da de baja de Observables tan pronto como se destruye el componente. ¿Pero también sabías que se da de baja tan pronto como cambia la referencia de la expresión?
Así es, tan pronto como asignemos un nuevo Observable a la propiedad en la que usamos AsyncPipe, AsyncPipe se cancelará automáticamente del Observable enlazado anterior. Esto no solo hace que nuestro código sea agradable y limpio, sino que también nos protege de fugas de memoria muy sutiles.

Variables de entorno

Cuando creamos proyectos usando Angular (o cualquier otra tecnología para el caso), es común que los desarrolladores tengan múltiples versiones de aplicaciones que se dirigen a diferentes entornos, es decir, desarrollo y producción. Cada entorno tendrá algunas variables de entorno únicas, es decir, puntos finales de API, versiones de aplicaciones, conjuntos de datos, etc. Angular proporciona configuraciones de entorno para declarar variables únicas para cada entorno.

Por defecto, angular admite dos entornos: producción y desarrollo.

Dentro del directorio de entorno, hay dos archivos, environment.ts y environment.prod.ts. Mientras que el primer archivo contiene la configuración del entorno y las variables para el entorno de desarrollo, el segundo contiene lo mismo para el entorno de producción.
Incluso puede agregar más entornos o agregar nuevas variables en los archivos de entorno existentes.
// environment.ts variables de entorno
export const environment = {
  producción: falso,
  api_endpoint_root: 'https://dev.endpoint.com'
};
// environment.prod.ts variables de entorno
export const environment = {
  producción: cierto,
  api_endpoint_root: 'https://prod.endpoint.com'
};
Mantener estas variables ayuda mucho cuando algo cambia, por ejemplo, la URL de la API para el punto final y cuando construye su aplicación para un entorno en particular, los cambios de las variables se aplican automáticamente.

Documentar siempre

Por último, pero no menos importante: documente siempre su código tanto como sea posible.
Escribir comentarios dentro del código ayuda mucho a otros desarrolladores involucrados en el desarrollo del proyecto y a comprender el propósito y la lógica del código escrito. Ayuda a administrar el código y aumenta la legibilidad del código.
Es una buena práctica documentar el uso y la función de cada variable y método. Para los métodos, cada parámetro debe definirse utilizando comentarios de varias líneas y también debe definirse qué tarea realiza exactamente el método.

¿Qué hay de nuevo?

No sabemos mucho sobre la última versión de Angular, 8 (8.0.0-beta.8), pero como cualquier otra actualización importante, esta versión será mejor, más rápida y resultará en una compilación más pequeña que las versiones anteriores. Tiene mejoras y correcciones con respecto a la versión anterior de Angular.

La versión principal actual sigue siendo Angular 7 (en marzo de 2019).

La nueva versión, Angular 8, contará con un nuevo renderizador llamado Ivy. Sin embargo, es muy probable que este soporte sea solo experimental y se agregará soporte completo en la próxima versión principal.
Algunas otras mejoras importantes se enumeran a continuación.
  • Soporte agregado para TypeScript 3.2
  • Se agregó un tipo de navegación disponible durante la navegación en el enrutador
  • Se agregó el modo pathParamsOrQueryParamsChange para runGuardsAndResolvers en el enrutador
  • Permitir pasar el estado a las directivas routerLink en el enrutador
  • Permitir pasar el estado a NavigationExtras en el enrutador
  • Restaurar todo el objeto al navegar de regreso a una página administrada por Angular Router
  • Soporte agregado para SASS
  • Resuelva archivos Sass / Less generados a entradas .css
El ciclo de lanzamiento de Angular prevé un nuevo lanzamiento importante cada seis meses. Por lo tanto, Angular 8 debería seguir en abril o mayo de 2019. Hasta entonces, continúa primero con versiones menores de Angular 7 y luego las versiones beta de Angular 8.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

outbrain

Páginas