Category: Blog

TypeScript es un lenguaje de programación que se ejecuta en JavaScript y proporciona muchas características adicionales que no están disponibles en JavaScript. Algunas de las principales ventajas de usar TypeScript son:

• Tipos estáticos: TypeScript agrega tipos estáticos a JavaScript, lo que significa que puedes declarar el tipo de datos que esperas para cada variable. Esto puede ayudar a prevenir errores de tiempo de ejecución y hacer que el código sea más fácil de leer y entender.
  
• IntelliSense: Al utilizar TypeScript con un editor de código compatible, como Visual Studio Code, puedes obtener una “ayuda inteligente” mientras escribes código. Esto incluye sugerencias de completado de código, documentación de código y mensajes de error que te ayudan a detectar problemas de sintaxis y lógica.
  
• Sintaxis mejorada: TypeScript incluye algunas características de lenguaje adicionales que pueden hacer que el código sea más legible y expresivo. Por ejemplo, puedes usar clases y interfaces para definir estructuras de datos más complejas y organizar mejor tu código.
  

Para empezar a usar TypeScript, primero debes instalarlo en tu sistema.
Una vez que lo tengas instalado, puedes crear un archivo con una extensión “.ts” y empezar a escribir código TypeScript.

npm install -g typescript

Typos en TypeScript

Los tipos en TypeScript son una forma de indicar el tipo de datos esperado para una variable o una función. Esto puede ayudar a prevenir errores de tiempo de ejecución y hacer que el código sea más fácil de leer y entender.

TypeScript incluye varios tipos básicos, como:

• number: para números
• string: para cadenas de caracteres
• boolean: para valores verdaderos o falsos
• any: para cualquier tipo de datos
• void: para indicar que una función no devuelve ningún valor
  

También puedes crear tipos más complejos utilizando arreglos, clases y uniones.

• Arreglos: Para crear un tipo de arreglo, puedes usar la sintaxis “[tipoDeDato]” para indicar que esperas una matriz de elementos del tipo especificado. Por ejemplo, si quieres crear un tipo de arreglo de números, puedes escribir “number[]”.
  
• Clases: Puedes utilizar la palabra clave “class” para crear una clase y definir sus propiedades y métodos. Una vez que hayas creado una clase, puedes usarla como un tipo en otras partes de tu código.
  
• Uniones: Una unión es un tipo que puede ser uno de varios tipos diferentes. Por ejemplo, si quieres crear un tipo que puede ser una cadena o un número, puedes usar la sintaxis “string | number”.

Ya conocemos los tipos basicos en TypeScript. Vamos a crear nuestro primero hola mundo en TypeScript.

Si ya has instalado TypeScript de manera global, ahora vamos a crear un fichero con la extensión .ts

hello.ts

Ahora el contenido este fichero será con un console log:

console.log("Hello world from TypeScript!");

Para ejecutar el programa solo debemos abrir la terminal y el siguiente comando.

tsc hello.ts

Esto va a transpilar nuestro código de TypeScript a JavaScript.
En el mismo folder ahora deberías ver un nuevo fichero llamado hello.js

Que en este caso, será en mismo console log.
Ahora podemos ejecutar el fichero .js

node hello.js

Y esta sería la salida de nuestra primera aplicación en TypeScript.

En resumen, TypeScript es una herramienta útil para cualquier desarrollador de JavaScript que quiera mejorar la calidad de su código y hacerlo más fácil de leer y entender.

Si estás interesado en aprender más sobre TypeScript, no dudes en ver este curso.

Los Guard son una característica de Angular que nos permite controlar el acceso a las rutas de nuestra aplicación. Esto es muy útil cuando queremos proteger ciertas vistas o funcionalidades de nuestra aplicación y sólo queremos que sean accesibles para usuarios autenticados o con ciertos permisos.

Para utilizar Guard en Angular, primero debemos crear una clase que implemente la interfaz CanActivate de Angular. Esta interfaz nos obliga a implementar un método canActivate() que debe devolver un booleano indicando si el usuario tiene acceso a la ruta o no. Por ejemplo, podríamos tener un Guard que sólo permita el acceso a usuarios autenticados de la siguiente manera:

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(): boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

Una vez que tenemos nuestro Guard creado, podemos utilizarlo para proteger una ruta de nuestra aplicación. Para ello, debemos añadir el Guard como un elemento de la propiedad data de la ruta en nuestro archivo de rutas. Por ejemplo, si queremos proteger la ruta ‘/private’ para que sólo puedan acceder usuarios autenticados, podríamos hacerlo de la siguiente manera:

import { AuthGuard } from './auth.guard';

const routes: Routes = [
  {
    path: 'private',
    component: PrivateComponent,
    canActivate: [AuthGuard]
  }
];

En este ejemplo, estamos utilizando el Guard AuthGuard para proteger la ruta ‘/private’.
Si un usuario no está autenticado y trata de acceder a esta ruta, el método canActivate() del Guard devolverá false y el usuario será redirigido a la ruta ‘/login’.

Quieres saber más puedes ver este video.

Un decorador es una función especial en Angular que se aplica a una clase, método o propiedad de una clase. Los decoradores son una forma de añadir metadatos a una clase o a sus miembros, lo que permite que Angular pueda procesar esa información y utilizarla para realizar tareas específicas.

Por ejemplo, un decorador puede utilizarse para especificar que una clase debe inyectarse como un servicio en Angular, o que un método debe ejecutarse cuando se envía una solicitud HTTP a un determinado endpoint. Los decoradores son una herramienta poderosa en Angular y se utilizan en muchas partes del framework.

Para utilizar un decorador en Angular, primero debes importar el decorador desde un módulo o paquete que lo proporcione. A continuación, puedes aplicar el decorador a una clase, método o propiedad de una clase, precediéndolo con el símbolo @. Por ejemplo:

import { Injectable } from '@angular/core';

@Injectable()
export class MyService {
  // ...
}

En este ejemplo, se está utilizando el decorador @Injectable para marcar la clase MyService como un servicio inyectable en Angular. Esto significa que puede ser inyectado en otros componentes o servicios a través del sistema de inyección de dependencias de Angular.

Es importante tener en cuenta que los decoradores son una característica de TypeScript, no de Angular. Angular utiliza los decoradores para procesar metadatos y realizar tareas específicas en tiempo de compilación, pero los decoradores no se utilizan en el código JavaScript compilado final.

@Output en Angular

El decorador @Output en Angular se utiliza para marcar una propiedad de un componente como un evento que puede ser emitido hacia el componente padre. Esto permite que el componente hijo envíe mensajes o notificaciones al componente padre, lo que le permite comunicarse con otros componentes de la aplicación.

Para utilizar el decorador @Output, primero debes importarlo desde el módulo @angular/core.
A continuación, puedes aplicarlo a una propiedad de un componente precediéndola con el símbolo @. Por ejemplo:

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  @Output() myEvent = new EventEmitter<string>();

  // ...
}

En este ejemplo, se ha creado una propiedad myEvent que es marcada con el decorador @Output. Esta propiedad es una instancia de EventEmitter, lo que significa que puede emitir eventos hacia el componente padre.
Para emitir un evento, simplemente debes llamar al método emit del EventEmitter y pasarle los datos que quieres enviar como argumento.

Para escuchar el evento en el componente padre, debes utilizar el enlace de eventos en el template del componente padre. Por ejemplo:

<my-component (myEvent)="onMyEvent($event)"></my-component>

En este ejemplo, se está utilizando el enlace de eventos para escuchar el evento myEvent emitido por el componente hijo.

Cuando se emita el evento, se llamará al método onMyEvent del componente padre y se le pasará el evento como argumento. De esta manera, el componente padre puede reaccionar al evento y realizar cualquier acción necesaria.

@Input en Angular

El decorador @Input en Angular se utiliza para marcar una propiedad de un componente como una entrada que puede recibir valores desde el componente padre.
Esto permite que el componente hijo reciba datos o valores del componente padre, lo que le permite adaptarse a diferentes entornos y usos.

Para utilizar el decorador @Input, primero debes importarlo desde el módulo @angular/core.
A continuación, puedes aplicarlo a una propiedad de un componente precediéndola con el símbolo @. Por ejemplo:

import { Component, Input } from '@angular/core';

@Component({
  // ...
})
export class MyComponent {
  @Input() myInput: string;

  // ...
}

En este ejemplo, se ha creado una propiedad myInput que es marcada con el decorador @Input.
Esta propiedad puede recibir valores desde el componente padre a través del enlace de propiedades en el template del componente padre. Por ejemplo:

<my-component [myInput]="parentValue"></my-component>

En este ejemplo, se está utilizando el enlace de propiedades para enviar el valor de la propiedad parentValue del componente padre al componente hijo. De esta manera, el componente hijo puede recibir y utilizar los datos proporcionados por el componente padre.

Es importante tener en cuenta que el decorador @Input sólo se utiliza para enviar valores desde el componente padre al componente hijo. Si quieres enviar valores desde el componente hijo al componente padre, debes utilizar el decorador @Output y el enlace de eventos en su lugar.

Para eliminar el CSS no utilizado en una aplicación de Angular, puedes utilizar la dependencia angular-css-shrink. Esta dependencia es una herramienta de línea de comandos que analiza el código de tu aplicación y elimina el CSS que no es utilizado.

Para utilizar angular-css-shrink, primero debes instalarla como una dependencia de desarrollo en tu proyecto de Angular:

npm install --save-dev angular-css-shrink

Una vez instalada, puedes utilizar el comando css-shrink para analizar y eliminar el CSS no utilizado en tu proyecto:

npx css-shrink

Este comando buscará todos los archivos CSS en tu proyecto y eliminará el CSS que no es utilizado. Puedes especificar opciones adicionales para personalizar el comportamiento de css-shrink, como la ubicación de tus archivos CSS y el nivel de optimización deseado.

Es importante tener en cuenta que angular-css-shrink no es una herramienta oficial de Angular y no está soportada por la comunidad de Angular. Si estás buscando una solución oficial para eliminar el CSS no utilizado en tu aplicación de Angular, puedes considerar utilizar el módulo de optimización de Angular CLI, que incluye una opción para eliminar el CSS no utilizado.

Para utilizar esta opción, debes ejecutar el comando ng build

Esto incluirá el CSS no utilizado en el proceso de compilación de tu aplicación y optimizará el tamaño del archivo CSS resultante.

Espero que esto te ayude a eliminar el CSS no utilizado en tu aplicación de Angular. Si tienes alguna pregunta adicional, no dudes en comentar el video.

Lazy loading es una técnica que permite cargar módulos o componentes de manera diferida en una aplicación Angular. Esto significa que en lugar de cargar todos los módulos o componentes de la aplicación de manera síncrona al inicio, solo se cargan aquellos que son necesarios en ese momento.

Ventajas:

1. Mejora el rendimiento de la aplicación, ya que se evita cargar todo el contenido al inicio y solo se carga lo necesario cuando se necesita.
   
2. Reduce el tamaño de la aplicación, ya que solo se incluyen los módulos o componentes necesarios en el bundle final.
   
3. Permite crear aplicaciones más escalables, ya que se pueden agregar nuevos módulos o componentes de manera sencilla sin tener que volver a cargar la aplicación completa.
   

Para implementar lazy loading en Angular 15, debes seguir estos pasos:

1. Crea un módulo o componente que quieres cargar de manera diferida.
   
2. Utiliza el decorador “@NgModule" y el atributo loadChildren para especificar la ruta del módulo o componente que se debe cargar de manera diferida.
   

@NgModule({
  imports: [
    RouterModule.forRoot([
      {
        path: 'lazy',
        loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule)
      }
    ])
  ]
})
export class AppRoutingModule { }

3. Utiliza la ruta del módulo o componente en un enlace de navegación para cargarlo de manera diferida cuando se haga clic en el enlace.

<a routerLink="/lazy">Cargar módulo o componente de manera diferida</a>

Es importante tener en cuenta que la carga diferida solo se aplica a módulos o componentes y no a recursos como imágenes o archivos de estilo. También es importante mencionar que la carga diferida no es compatible con navegadores antiguos que no soporten ECMAScript 6.

Espero que esto te haya ayudado a entender cómo funciona el lazy loading en Angular 15.
Si tienes alguna duda adicional, no dudes en preguntar en los comentarios del video.

JSON Server es una aplicación de Node.js que permite crear una API REST falsa a partir de un archivo JSON.
Esto es muy útil cuando estamos desarrollando una aplicación web o móvil y necesitamos una API para hacer pruebas o para tener una versión de demostración de nuestro proyecto.

Para utilizar JSON Server, primero debemos tener instalado Node.js en nuestro ordenador. Una vez que lo tengamos, podemos instalar JSON Server de manera global utilizando el siguiente comando:

npm install -g json-server

Una vez instalado, podemos crear nuestro archivo JSON con los datos que queramos exponer a través de la API. Por ejemplo, si queremos crear una base de datos de usuarios, podríamos tener un archivo JSON como este:

{
  "users": [
    {
      "id": 1,
      "name": "John",
      "email": "john@example.com"
    },
    {
      "id": 2,
      "name": "Jane",
      "email": "jane@example.com"
    }
  ]
}

Una vez que tenemos nuestro archivo JSON, podemos iniciar JSON Server con el siguiente comando:

json-server db.json

Esto iniciará un servidor en el puerto 3000 que expondrá nuestros datos a través de una API REST. Podemos acceder a los datos utilizando las operaciones HTTP estándar, como GET, POST, PUT y DELETE. Por ejemplo, para obtener todos los usuarios de nuestra base de datos, podríamos hacer una petición GET a la siguiente URL:

http://localhost:3000/users

JSON Server también permite filtrar y ordenar los datos utilizando parámetros en la URL. Por ejemplo, podemos obtener sólo los usuarios con un determinado nombre haciendo una petición GET a la siguiente URL:

http://localhost:3000/users?name=John

También podemos utilizar el parámetro _sort para ordenar los datos por un campo específico. Por ejemplo, para obtener los usuarios ordenados por nombre, podríamos hacer una petición GET a la siguiente URL:

http://localhost:3000/users?_sort=name&_order=desc

JSON Server permite realizar búsquedas por ID. Especificando el ID del recurso que queremos obtener en la URL. Por ejemplo, si queremos obtener el usuario con ID 1 de nuestra base de datos, podríamos hacer una petición GET a la siguiente URL:

http://localhost:3000/users/1

También podemos utilizar el método .find() de JSON Server para realizar búsquedas más complejas utilizando una función de filtro. Por ejemplo, para obtener todos los usuarios con un nombre que empiece por “J”, podríamos hacer una petición GET a la siguiente URL:

http://localhost:3000/users?name_like=J*

Prácticamente ya estamos en el 2023, y estoy seguro que deseas saber que tendencias front-end tendremos en el 2023.

En el video de youtube puedes ver la opinión de Leifer Méndez. Yo por mi parte dejo en este mini-post mis recomendaciones.

Espero que dejes tu comentario en el video y así sabemos tu opinión.

1. Mayor adopción de tecnologías de “edge computing”: Con el auge de la Internet de las Cosas (IoT), es probable que veamos un aumento en la adopción de tecnologías de “edge computing”, que permiten que la computación y el procesamiento se lleven a cabo en el mismo dispositivo en lugar de depender de un servidor remoto. Esto puede mejorar la velocidad y la eficiencia de las aplicaciones, así como reducir la dependencia de conexiones a Internet de alta velocidad.
   
   
   
2. Mayor uso de tecnologías de “progressive web apps”: Las “progressive web apps” (PWAs) son aplicaciones web que se comportan como aplicaciones nativas y pueden ser instaladas en dispositivos móviles sin pasar por una tienda de aplicaciones. Con el aumento del uso de dispositivos móviles y la necesidad de una experiencia de usuario fluida, es probable que veamos un aumento en el uso de PWAs.
   
   
   
3. Mayor uso de herramientas de desarrollo basadas en la nube: Es probable que veamos un aumento en el uso de herramientas de desarrollo basadas en la nube, ya que estas ofrecen una mayor flexibilidad y facilidad de uso para los equipos de desarrollo distribuidos.
   
   
   
4. Mayor uso de tecnologías de “single page application”: Las “single page applications” (SPAs) son aplicaciones web que se cargan una sola vez y luego permiten que el usuario navegue a través de ellas sin tener que volver a cargar la página. Con el aumento de la necesidad de una experiencia de usuario fluida y sin interrupciones, es probable que veamos un aumento en el uso de SPAs.
   
   
   
5. Mayor uso de tecnologías de “responsive design”: Con el aumento del uso de dispositivos móviles y la necesidad de una experiencia de usuario consistente en todos los dispositivos, es probable que veamos un aumento en el uso de tecnologías de “responsive design”, que permiten que un sitio web se adapte automáticamente al tamaño de pantalla del dispositivo en el que se está visualizando.
   
   
   

¿Qué es el patrón Singleton?

El patrón singleton es una forma de estructurar código y garantiza que nunca haya más de una instancia de una clase. 

En caso de que aún no fuera obvio, estos patrones están pensados para el paradigma de programación orientada a objetos.

Esto significa que la oración anterior se puede traducir a:

Al implementar un singleton, podemos asegurarnos de que solo tengamos una instancia de nuestra clase.

La primera parte se puede lograr agregando un método estático y una propiedad estática a nuestra clase. Recuerde, los miembros estáticos, también conocidos como miembros de nivel de clase, no necesitan una instancia de la clase para usarse. De hecho, no reconocen la instancia en absoluto.

Y la segunda parte se puede lograr “ocultando” el constructor de nuestra clase haciéndolo privado. Con eso, no podrá crear una nueva instancia, ya que el método constructor, que se llama implícitamente cuando usa la nueva palabra clave, no será accesible para usted desde fuera de la clase.

IIFE

Es un patrón en JavaScript que ejecuta una función tan pronto como se declara.

Esto se conoce como una expresión de función inmediatamente invocada o patrón auto ejecutable, y sencillamente hace que una función se ejecute inmediatamente.

Immediately Invoked Function Expression

(()=> {
console.log("Hola, dominicode!");
})();

IIFE se compone por dos partes.

La primera es la función anónima, encerrado por el Operador de Agrupación ().

Esto impide accesar variables fuera del IIFE, así cómo contaminar el alcance (scope) global.

La segunda parte crea la expresión de función cuya ejecución es inmediata (), siendo interpretado directamente en el engine de JavaScript.

Si lo prefieres aquí tienes un video JavaScript IIFE

En un principio mi intención era hablar sobre la directiva ngFor*, mientras me documentaba y revisaba apuntes, recordé  trackBy. 

¿Por qué nos olvidamos de trackBy? 

La verdad que no lo sé, pero todo lo que pueda ayudar mejorar el perfomance de mi aplicación es bienvenido. 

• 

En este post vamos a hablar sobe trackBy, como nos puede ayudar a mejorar el rendimiento. 

*ngFor 

La directiva ngFor es comúnmente usada para iterar sobre un array. 

ngFor export algunas variables locales que podemos utilizar durante la iteración actual: 

• index: iteración de bucle actual para cada contexto del template.
• first: valor booleano que indica si el elemento es el primero en la iteración.
• last: valor booleano que indica si el elemento es el último en la iteración.
• even: valor que indica si este elemento tiene un índice par.
• odd: valor booleano que indica si este elemento tiene un índice impar.

<li *ngFor="let item of items;let i=index">{{i}} - {{item.name}}</li>

En este ejemplo la directiva recorrería todo el array de items. 
Y se renderiza el contenido de item. 

Angular convertirá este código en lo siguiente.

<ng-template ngFor let-item [ngForOf]="items" let-i="index">
  <div>({{i}}) {{item.name}}</div>
</ng-template>

Hasta aquí todo bien, ningún problema a la vista. 

Pero internamente cada vez se añada, modifiques o elimines un item del array, Angular a través de la directiva *ngFor volverá a redibujar completemente el DOM desde cero. Y esto es una operación costosa. 

En aplicaciones medianas o grandes esto puede llegar a ser un problema. 

Debería existir algo capaz de encargarse de realizar un seguimiento de los cambios en el array por lo tanto en el los elementos y que solo hiciera los cambios o el cambio en los items necesarios. 

• 

Y sí, existe y es trackBy. 

Vamos a mejorar nuestro ejemplo anterior. 

<li *ngFor="let item of items;let i=index;trackBy: trackByItems">
{{i}} - {{item.name}}
</li>

<ng-template ngFor let-item [ngForOf]="items" let-i="index" [ngForTrackBy]="trackByItems”>
<div>({{i}}) {{item.name}}</div>
</ng-template>

en nuestro .ts

trackByItems(index: number, item: any): number { return item.id; }

trackBy

Es una función que define cómo realizar un seguimiento de los cambios para los elementos en el iterable.

Ahora cada vez que se agregue, mueva o elimine elementos en el array,  

Cuando se agregan, mueven o eliminan elementos en el iterable, la directiva, sólo volverá a redibujar los items que han cambiado. 

Cuando se proporciona esta función, la directiva utiliza el resultado de llamar a esta función para identificar el nodo del elemento, en lugar de la identidad del objeto en sí.

La función recibe dos entradas, el índice de iteración y el ID del objeto del nodo (item).

Pues esto es todo por este post!
Si te ha gustado recuerdo compartirlo. 

Hasta la próxima.