Usar la divulgación progresiva y la representación condicional

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Explicar los beneficios de la divulgación progresiva.
Describir la representación condicional.

Optimizar el desempeño con la divulgación progresiva

Mostrar todos los datos y todas las herramientas disponibles en la pantalla en general no se considera una buena práctica de experiencia del usuario. Además, puede afectar significativamente el desempeño de su aplicación. Los componentes Lightning que se agregan al formato de una página crean una instancia cuando la página se carga, lo que contribuye al tiempo de carga general de la página. Debido a esto, las directrices de diseño interactivas dan preferencia a la divulgación progresiva.

“La divulgación progresiva es una técnica de diseño de interacción que generalmente se utiliza en la interacción entre el ser humano y la computadora para ayudar a mantener el centro de atención del usuario mediante la reducción del desorden, la confusión y la carga de trabajo cognitiva. Esto mejora la capacidad de uso ya que presenta solo los datos mínimos requeridos para la tarea que se está realizando”. (Wikipedia)

Dicho de otra forma, según Jakob Nielsen, “La divulgación progresiva posterga las funciones avanzadas o raramente utilizadas a una pantalla secundaria, lo cual hace que las aplicaciones sean más fáciles de aprender y menos propensas a errores”.

En Lightning Experience, resulta fácil implementar la divulgación progresiva y postergar los datos o las funciones que no son esenciales para la tarea que se está realizando. Existen varios enfoques para postergar la creación de componentes, pero observemos en detalle a dos de ellos: la creación diferida de instancias (a veces denominada carga diferida) y la representación condicional.

Creación diferida de instancias

La creación diferida de instancias (o carga diferida) significa que un objeto o componente no se crea hasta que se utiliza por primera vez. Esto se puede hacer en Lightning Experience o aprovechando diferentes componentes de ficha.

Creación diferida de instancias en Lightning Experience

Los Generadores de aplicaciones Lightning pueden implementar la divulgación progresiva de forma declarativa mediante la colocación de los componentes dentro de áreas específicas en Lightning Experience, donde se crean instancias diferidas. Estas áreas incluyen:

Componentes de ficha estándar, que permiten que la información se oculte y se cargue únicamente cuando el usuario selecciona la ficha.
Acciones de componente Lightning o Acciones rápidas, que permiten que los componentes se carguen únicamente cuando el usuario hace clic en un botón.
Una barra de utilidades, que se puede agregar a cualquier aplicación y también incluye botones que pueden cargar componentes cuando el usuario hace clic en ellos.

Creación diferida de instancias en sus propios componentes

Puede aprovechar el conjunto de componentes de ficha, como <lightning-tabset> y <lightning-tab>, que admiten la creación diferida de instancias 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>

El conjunto de fichas y el componente de fichas del Generador de aplicaciones se cargan de forma diferida; sin embargo, las fichas dentro de la Consola Lightning se cargan como espacios de trabajo y las subfichas no se cargan de manera diferida.

Representación condicional

La representación condicional significa que un objeto o componente solo aparecerá una vez que coincida un estado o comportamiento. Existen tres opciones para representar condicionalmente sus componentes web Lightning:

Visibilidad dinámica del componente del Generador de aplicaciones Lightning
lwc:if|elseif|else
CSS

Visibilidad dinámica del componente del Generador de aplicaciones Lightning

La primera opción es declarativa y se crea directamente en el Generador de aplicaciones. La visibilidad dinámica del componente puede controlar cuándo un componente aparece en una página Lightning agregando condiciones de filtro y lógica a sus propiedades en el Generador de aplicaciones Lightning. Por ejemplo, se puede construir un filtro que origine un componente de texto enriquecido en una página de oportunidad para mostrar cuándo el importe de la oportunidad es mayor o igual a $1 millón.

lwc:if|elseif|else

La segunda opción permite que los desarrolladores representen condicionalmente elementos DOM usando lwc:if|elseif|else para crear instancias diferidas de la IU:

<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 “something” = true (algo = verdadero), se crea la primera etiqueta <div> y todos sus elementos secundarios, mientras que la segunda etiqueta <div> y todos sus elementos secundarios no se representan. Esto debería modificarse cuando la expresión “something” cambie a false (falso). En esta situación, la primera etiqueta <div> se destruiría y se representaría la segunda.

CSS

La tercera opción aprovecha los estilos de CSS para cambiar la visibilidad y se puede implementar usando la siguiente plantilla y JavaScript.

Plantilla

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

JavaScript

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

El componente <div> y todos sus elementos secundarios se crean y se representan de manera anticipada, pero se ocultan del usuario hasta que se ejecuta JavaScript. Tenga en cuenta que usar CSS crea el componente de manera anticipada para que no haya aumento de desempeño en la carga de la página como ocurre con los otros dos métodos. Sin embargo, cuando se ejecuta JavaScript, el componente se muestra inmediatamente al usuario sin la necesidad de inicializarse o representarse.

Una diferencia importante entre el ocultamiento de CSS y if:true/false es que con el enfoque de CSS, el componente queda activo y, por lo tanto, se mantiene su estado. El uso de if:true|false destruye y vuelve a crear el componente de manera que el estado se pierde (se restablece).

Estas opciones deben utilizarse en el orden presentado. En primer lugar, use la opción declarativa analizada en la opción uno, aunque solo está disponible en los componentes configurados para el Generador de aplicaciones Lightning. En segundo lugar, debería usar la opción del segundo enfoque if:true|false, que funciona con todos los componentes. Ambas opciones ayudan a que las páginas se carguen más rápido inicialmente mediante la postergación de la creación y la representación del componente o el árbol de elementos incluido hasta que se completa la condición. La tercera opción, CSS, se debería usar cuando los desarrolladores desean precargar un componente y luego mostrarlo en la IU cuando se completa la condición.

Ahora que tiene más conocimientos sobre las principales opciones de representación, aprendamos algunas otras opciones que pueden ayudarlo a mejorar el desempeño.

Estimación de tiempo

Temas

¿Necesita ayuda?

Recursos de Salesforce Platform