Usar la revelación progresiva y la renderización condicional

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Explicar las ventajas de la revelación progresiva.
Describir la renderización condicional.

Optimizar el rendimiento mediante la revelación progresiva

Normalmente, no se considera muy buena práctica de UX mostrar todos los datos y todas las herramientas disponibles en la pantalla. Además, esto puede afectar negativamente al rendimiento de la aplicación. Los componentes Lightning agregados a un formato de página se muestran cuando se carga una página, y cuenta para el tiempo de carga total. Por este motivo, las directrices para el diseño interactivo abogan por una revelación progresiva.

"La revelación progresiva es una técnica de diseño interactivo que se suele utilizar en las interacciones entre humanos y máquinas para mantener la atención del usuario y reducir la confusión, la carga cognitiva y el caos. Este método mejora la facilidad de uso al presentar solo los datos mínimos necesarios para la tarea que se está llevando a cabo". (Wikipedia)

Dicho de otra manera, según Jakob Nielsen, "la revelación progresiva relega las funciones avanzadas o menos usadas a una pantalla secundaria, de forma que es más fácil usar una aplicación y es más difícil que esta contenga errores".

En Lightning Experience, es fácil implementar la revelación progresiva y dejar a un lado los datos o las funciones que no son necesarios para la tarea que tenemos entre manos. Hay distintos enfoques para aplazar la creación de componentes, pero vamos a ver dos de ellos en detalle: la inicialización perezosa (a menudo denominada también "carga perezosa") y la renderización condicional.

Inicialización perezosa

La inicialización perezosa (o carga perezosa) hace referencia al proceso por el cual un objeto o componente no se crea hasta el primer uso. Puede hacerlo en Lightning Experience o utilizando distintos componentes de fichas.

Inicialización perezosa en Lightning Experience

Lightning App Builder permite implementar la revelación progresiva de forma declarativa al colocar componentes dentro de áreas específicas de Lightning Experience, donde se inicializan de forma perezosa. Entre estas áreas se incluyen las siguientes:

Componentes de ficha estándar, que permiten ocultar la información y solo cargarla cuando el usuario seleccione la ficha.
Acciones de componentes Lightning o acciones rápidas, que permiten cargar componentes solo cuando el usuario hace clic en un botón.
Una barra de utilidades, que se puede añadir a cualquier aplicación e incluye también botones que permiten cargar componentes cuando el usuario hace clic en ellos.

Inicialización perezosa en sus propios componentes

Puede usar el conjunto de componentes de ficha como <lightning-tabset> y <lightning-tab> que permite una inicialización perezosa de forma predeterminada.

<lightning-tabset>
  <lightning-tab label="Item One"> Content for tab 1 </lightning-tab>
  <template lwc:if={showTabTwo}>
    <lightning-tab label="Item Two"> Content for tab 2 </lightning-tab>
  </template>
</lightning-tabset>

Los componentes de ficha TabSet y App Builder se inicializan de forma perezosa. Sin embargo, las fichas de la consola de Lightning se cargan en forma de espacios de trabajo y las subfichas no se cargan de forma perezosa.

Renderización condicional

Con renderización condicional nos referimos a que un objeto o componente solo aparecerá cuando se cumpla un estado o un comportamiento. Existen tres opciones para renderizar de forma condicional sus componentes web Lightning.

Visibilidad de los componentes dinámicos de Lightning App Builder
lwc:if|elseif|else
CSS

Visibilidad de los componentes dinámicos de Lightning App Builder

La primera opción es declarativa y se integra directamente en App Builder. Mediante la visibilidad de los componentes dinámicos, se puede controlar cuándo aparece un componente en una página Lightning mediante la adición de condiciones de filtro y lógica a sus propiedades en Lightning App Builder. Por ejemplo, puede crear un filtro que haga que aparezca un componente de texto enriquecido en una página de oportunidad cuando el importe de la oportunidad sea superior o igual que un millón de dólares.

lwc:if|elseif|else

La segunda opción permite a los desarrolladores renderizar de forma condicional elementos DOM mediante lwc:if|elseif|else para inicializar secciones de la IU de forma perezosa:

<template>
  <div lwc:if={something}>Conditional text displayed if something = true</div>
  <div lwc:else>Conditional text displayed if something = false</div>
</template>

en este caso, si "algo" es verdad, se crean la primera etiqueta <div> y todos sus elementos secundarios, pero no se renderizan la segunda etiqueta <div> ni sus secundarios. Esto cambiaría en el caso de que la expresión "algo" cambiara a falso. En este tipo de situación, la primera etiqueta <div> se destruiría y la segunda se renderizaría.

CSS

En la tercera opción se utilizan hojas CSS para cambiar la visibilidad. Esta opción se puede implementar con la siguiente plantilla y JavaScript.

Plantilla

<div id="error" class={className}>{error}</div>

JavaScript

get className(){
  return isError ? 'slds-show': 'slds-hide';
}

Se crean el componente <div> y todos sus elementos secundarios y se renderizan por adelantado, pero se ocultan al usuario hasta que se ejecuta el JavaScript. Recuerde que el uso de CSS genera el componente por adelantado para que no haya aumento del rendimiento al cargar la página como en los otros dos métodos. Sin embargo, cuando se ejecuta el JavaScript, el componente aparece de inmediato ante el usuario sin necesidad de inicializarlo o renderizarlo.

Una diferencia importante entre ocultar hojas CSS y el código if:true/false es que con el enfoque de CSS el componente permanece activo y su estado se mantiene. Al usar if:true|false, se destruye y se vuelva a crear el componente, de forma que se pierde su estado (se restablece).

Debe usar estas opciones en el orden indicado. En primer lugar, use la opción declarativa que mostramos en la primera opción, aunque solo está disponible en componentes configurados para Lightning App Builder. En segundo lugar, utilice el enfoque if:true|false de la segunda opción, que funciona con todo tipo de componentes. Ambas opciones permiten que las páginas se carguen más rápido al principio al aplazar la creación y la renderización del árbol de componentes o elementos hasta que se cumpla la condición. La tercera opción, la hoja CSS, debe usarse cuando los desarrolladores quieran cargar previamente un componente y luego mostrarlo en la IU cuando se cumpla una condición.

Ahora que ya conoce las principales opciones de renderización, veamos qué otras opciones tiene para mejorar el rendimiento.

Estimación de tiempo

Temas

¿Necesita ayuda?

Recursos de Salesforce Platform