Category: Blog

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.

NGXS es un state management para Angular.

• 

Está basado en el patrón redux, que actúa como fuente única de verdad para el estado de tu aplicación.

Algunas libraries similares y basadas en el mismo patrón son Redux y NGRX.

NGXS reduce las repeticiones utilizando características modernas de TypeScript, como clases y decoradores.

Hay 4 conceptos principales en NGXS:

STORE:
Es el contenedor global del estado, despacha las acciones y el selector.
Es decir proporciona la forma de seleccionar segmentos de datos del estado global.

ACTIONS:
Las acciones pueden considerarse como un comando que desencadena algo, o como el evento resultante de algo que ya sucedió.
Cada acción contiene un campo de tipo, que es su identificador único y payload requerido para esa acción.

STATE:
Los cambios de estado son manejados por funciones puras también llamadas reducers que toman el estado actual y la última acción para calcular un nuevo estado.

SELECTOR:
Los selectores son funciones puras utilizadas para seleccionar, derivar y componer piezas (trozos) de estado.

CRUD CON NestJS & NGXS

Gatsby, es un generador de sitio moderno y ultrarrápido para React.

Gatsby es un generador de sitios estáticos. Así como React static, Next.js ó Jekyll with React. Incluso podríamos añadir a esta lista a Frontity, que no es, solamente un generador de sitios estáticos. 

Todos estos generadores están basados en React. 

Gatsby, se basa en tecnologías que son estándares web: Tales como ReactJS, Webpack, GraphQL, y ES6.

GatsbyJS, es parte del concepto JAMStack. 

JAMStack: 

JAMStack, es un concepto en desarrollo web que nos ofrece múltiples beneficios. 

El acrónimo JAM proviene de  JS + APIs + Markup = JAM.

Una arquitectura moderna, para el desarrollo web basada en el uso de JS en el cliente, APIs reutilizables y Markup precalculado.

– Jamstack.org

Algo que posiblemente pueda ser una desventaja, es que necesitamos tener al menos conocimientos básicos de  React.JS y GraphQL. 

Ya que realmente lo que vas hacer, será una aplicación en React ; recuerda que, Gatsby se basa en React. 

Una de las mayores ventajas de GatsbyJS, es la gran cantidad de fuentes de datos. 

Es decir que podremos leer data desde una API, Markdown, etc .
 

Como ya sabemos qué es GatsbyJs, procederemos a trabajar con el CLI de Gatsby. 

Vamos a realizar la instalación global del CLI. 

npm install -g gatsby-cli

Una vez instalado, podemos empezar a crear nuestro primer proyecto con Gatsby. 

Creamos nuestro site. 

gatsby new gatsby-site

Vamos a la carpeta del proyecto. 

cd gatsby-site

Podemos arrancar el servidor de desarrollo con el comando.

gatsby develop

Gatsby iniciará un entorno de desarrollo por defecto en http://localhost:8000

Esto es solo el comienzo, como puedes ver tenemos un sitio estáticos muy básico. 

Mi última recomendación por ahora, será el comando gatsby –help en la terminal. 

Ahí podrás ver, un listado de comando disponibles desde el CLI. 

También tienes este video, donde puedes ver parte de los que podemos hacer con GatsbyJS. 

Primeros pasos con GatsbyJS.

9 Preguntas para entrevista de Trabajo sobre Angular – Programador Junior

1. Qué es Angular?

Angular es un front-end de código abierto basado en TypeScript que facilita la creación de aplicaciones en la web / móvil y de escritorio. 

Algunas características de este framework, son las plantillas declarativas, la inyección de dependencias, y muchas otras características que facilitan el desarrollo.

2. Cuales son las diferencias entre AngularJS y Angular ?

Angular es un framework basado en componentes,  completamente diferente a su predecesor.

Algunas de las principales diferencias en forma de tabla

ANGULAR JS	ANGULAR
Estaba basado en el patrón MVC	Está basado en Service / Controller
Usaba JavaScript para escribir las APPs	Está basado en TypeScript
Estaba basado en el concepto de Controllers	Está basado en componentes
NO era un framework mobile friendly	Y claro como Angular es totalmente nuevo a sintaxis a cambiado.

3. Qué son las directivas?

Las directivas añaden comportamiento a un elemento del DOM existente. 

4. Qué es un componente?

Un componente controla un parte de pantalla, llamado vista. 

Los componentes son bloques de construcción de interfaz de usuarios.

Estos componentes son subconjuntos de directivas. A diferencia de las directivas,  los componentes siempre tienen una plantilla (html). 

5. Qué es Angular CLI?

Angular CLI (Command Line Interface) es una interfaz de línea de comando para montar y construir aplicaciones de Angular.

6. Cuál es la diferencia entre constructor y ngOnInit?

Las clases de TypeScript tienen un método predeterminado llamado constructor que normalmente se usa con propósitos de inicialización. 

Mientras que el método ngOnInit es específico de Angular, se usa especialmente para definir bindings.

El constructor se ejecuta primero que el ngOnInit.

Para usar ngOnInit, debe implementar la interfaz OnInit.

7. Digame algunas directivas estructurales?

Las directivas estructurales permiten añadir, manipular o eliminar elementos del DOM.  Por ejemplo : *ngIf    *ngFor *ngSwitch 

8. Cuál es el propósito de la directiva *ngIf? 

A veces, una aplicación necesita mostrar una vista u otra dependiendo de circunstancias específicas. 

La directiva *ngIf inserta o elimina un elemento basado en una condición de true / false.

9. Qué es la interpolación? 

La interpolación es una sintaxis especial de Angular, que permite hacer binding de una propiedad. 

Es una alternativa al property binding. Y está representado por  dobles llaves {{}}. 

Heroku es una de las plataformas en la nube más populares. Podemos usarlo para implementar y administrar nuestra aplicación de manera simple y conveniente.

Este tutorial te enseña como desplegar tu aplicación Node.js, express y MySql en Heroku.

Utilizamos el add-on de ClearDB para la base de datos MySQL. El despliegue se realizará utilizando Git y Heroku CLI.

Publicar app de Node.js en Heroku con MySQL.