Modularización (lazy-loading)

Modularización o Lazy-Loading

Hoy vamos a hablar de los módulos y de la importancia de mantener un orden en nuestros proyectos (modularización).

Un módulo es un contenedor de capacidades estrechamente relacionadas, como: componentes, proveedores de servicios, directivas, entre otras, que pueden importar y exportar funcionalidades para que sean utilizadas por otros módulos.

Modularización-Lazy loading-Salud electrónica

Si bien para una aplicación pequeña bastaría con un solo módulo, a medida que el proyecto crece, todo se complica. Aunque es cierto que se podría crear todo un proyecto con un solo módulo, no es recomendable hacerlo debido a que esto perjudica el rendimiento y la escalabilidad del aplicativo a largo plazo. 

 

Para evitar este tipo de problemas es recomendable mantener un orden en nuestro proyecto, dividiéndolo en secciones o módulos, con el fin de poder acceder a ellos y administrarlos de forma independiente, recibiendo el nombre de modularizar.

Modularizar nuestro aplicativo ofrece grandes ventajas como la capacidad para cargar una pequeña parte del código  a medida que el aplicativo lo  requiere, evitando así cargar secciones innecesarias que  disminuirán el tiempo de carga de cada página. Además, evita que, en caso de un fallo en un módulo con una funcionalidad diferente a la que está siendo utilizada,  afecte la tarea que se está realizando.

Existen varias estrategias de modularización, en este caso vamos a hablar de Lazy-loading.

El lazy-loading  es un patrón de diseño que consiste en retrasar la carga o en la inicialización de un objeto hasta el momento de su utilización. Esto significa que el objeto solamente se cargará cuando se necesite y no antes, disminuyendo el consumo de requerimientos. Esto le dará  mayor fluidez a nuestro aplicativo.

Para empezar a aplicar Lazy-loading lo primero que se debe tener en cuenta es evitar llamar cada componente en el app-routing.module.ts y en el app.module.ts. Para esto es necesario crear un module y un router.module para cada conjunto de funcionalidades similares. Para entender mejor esta definición, te daremos un pequeño ejemplo:

Empezaremos creando un módulo con la opción – -route.

Con el siguiente comando vamos a crear un módulo, el cual tendrá un componente:

Esto lo que hace es crear una carpeta con un módulo y no agregar una referencia al nuevo módulo de funciones en el archivo del módulo raíz de la aplicación. En su lugar, agrega la ruta del módulo customers a la matriz de rutas del módulo routing raíz.

Modularización-Lazy loading-Salud electrónica

Los componentes que se vayan creando a lo largo del proyecto, evitarán ser cargados innecesariamente y solo serán solicitados por medio de sus respectivas rutas, las cuales pueden asignarse a través de una interfaz de usuario.

Adicionalmente, podemos agregar un ruta predeterminada para una ruta vacía que redireccione a un módulo de preferencia, por ejemplo:

Modularización-Lazy loading-Salud electrónica

Ten en cuenta que es posible verificar la carga diferida con las herramientas de desarrollo del navegador, en la pestaña de ‘Network’.

Si solo aparece un fragmento, nuestro proyecto se carga con Lazy-loading, de lo contrario, significa que hay varios módulos cargados al tiempo.

Modularización-Lazy loading-Salud electrónica

Referencias

https://angular.io/guide/lazy-loading-ngmodules#config-routes

Ideas disruptivas como agentes de cambio
Todas las empresas deberían implementar nuevos procesos, generar nuevas ideas de servicios y productos, reinventarse…
Base de datos no relacionales
El uso de una base de datos SQL o NoSQL depende del tipo de proyecto…
¿Que es Big Data ?
Big data (grandes datos o grandes volúmenes de datos) se denomina como un conjunto de…
Nuestro equipo de trabajo interdisciplinario es especialista David Vélez CEO

David Vélez

Soy David, CEO de Salud Electrónica, mi pasión es ofrecer productos innovadores e integrales que aporten a los procesos en salud para mejorar la eficiencia de las instituciones.

Formación académica:

Cuento con la siguiente experiencia laboral:

  • Director médico en instituciones de alta complejidad.
  • Coordinador de servicios hospitalarios y ambulatorios.
  • Docente universitario.

En mi tiempo libre me gusta cocinar, leer sobre tecnología y actualidad.

Registra tus datos y uno de nuestros funcionarios se pondrá en contacto contigo

× ¿Cómo podemos ayudarte?