Explorar opciones de representación adicionales

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Describir opciones para usar listas y eventos.
Describir cómo usar las hojas de estilo y las bibliotecas de JavaScript externas.
Optimizar imágenes para componentes web Lightning.
Explicar los beneficios de los componentes base de Lightning.
Describir cómo usar la representación y el reflujo de ciclo de vida.

Introducción

La mayoría de los incrementos de desempeño para los componentes web Lightning se pueden obtener si se utilizan las prácticas recomendadas de las unidades anteriores, pero hay algunas opciones de representación adicionales que se pueden usar para aumentar el desempeño.

A continuación, encontrará algunas ideas para lograr que sus componentes web Lightning sean aún más rápidos.

Listas

Las listas permiten visualizar una gran cantidad de datos fácilmente. Sin embargo, si no están bien preparadas, pueden admitir demasiados datos.

Tenga en cuenta lo siguiente cuando use listas.

Las listas se deben crear usando for:each o iterator. La diferencia entre estas opciones es que iterator tiene las propiedades first (primero) y last (último) que le permiten aplicar conductas especiales al primer y último elemento de una matriz.
```
<template for:each={contacts} for:item="contact">
  <li key={contact.Id}>{contact.Name}, {contact.Title}</li>
</template>
```
Cuando cree componentes de lista personalizados, no admita la creación de una cantidad infinita de elementos de lista. Esto puede dificultar el desempeño seriamente, en particular en las grandes organizaciones que tienen una gran cantidad de registros. Proporcione un mecanismo de paginación, o bien virtualice la lista (reutilice y rehidrate una cantidad limitada de componentes de elementos de lista).
Cada elemento de lista debe tener una key (clave) cuyo valor sea único en todos los elementos secundarios.
Tenga cuidado cuando utilice los componentes web Lightning dentro de la lista para encapsular la funcionalidad. Esto puede agregar una gran cantidad de sobrecarga que posiblemente ocasione problemas de desempeño. En especial, si es una lista grande.

Eventos

Aprovechar los eventos es una excelente manera de comunicarse entre componentes e incluso permite que los desarrolladores escuchen los eventos dentro del DOM mientras los componentes web Lightning despachan eventos DOM estándar. Los componentes también pueden crear y despachar eventos personalizados. Utilice los eventos para comunicar la jerarquía de contención del componente. Los agentes de escucha de eventos se pueden adjuntar de forma declarativa o pragmática usando addEventListener().

Tenga en cuenta lo siguiente cuando aproveche eventos y controladores de evento.

Minimice la cantidad de controladores de evento solo a los que sean absolutamente necesarios. Cada controlador requiere una sobrecarga y, si se crean demasiados, pueden ralentizar el desempeño de su aplicación.
Asegúrese de comprender la propagación de eventos de los componentes principales y secundarios usando bubbles y composed. En general, debería usar eventos configurados con bubbles:false y composed:false porque son los menos disruptivos. Estos eventos no afloran por el DOM ni cruzan el límite paralelo. Si crea un evento con bubbles:true y composed:true, genera un contrato de API para el componente que emite el evento.
Para comunicarse entre componentes iguales dentro de una página Lightning única o por varias páginas, puede usar el Servicio de mensajería Lightning. Tiene la ventaja de funcionar en Visualforce, Aura, LWC, componentes de la barra de utilidades y en las fichas de la página de una aplicación de consola.
Si agrega un agente de escucha a algo que no forma parte del ciclo de vida del componente (como el objeto de ventana, el objeto de documento, etc.), usted es el responsable de eliminar el agente de escucha. Para eliminar los agentes de escucha de eventos, use removeEventListener() en el enlace de ciclo de vida disconnectedCallback. Si no lo hace de manera correcta, pueden generarse pérdidas de memoria que reducirán progresivamente el desempeño de toda la aplicación Lightning, hasta que el usuario cierre o actualice la ficha del navegador.
Cuando trabaje con listas, permitir el afloramiento de eventos y registrar un solo agente de escucha de eventos en un elemento principal en lugar de un agente de escucha separado en todos los elementos de lista puede reducir significativamente la cantidad de agentes de escucha de eventos de su aplicación. Esto puede tener un impacto positivo en el desempeño.

Hojas de estilo y bibliotecas de JavaScript externas

Siempre que sea posible, elimine las dependencias de las bibliotecas que no sean necesarias. Además, antes de decidir usar una biblioteca externa en un componente Lightning, debe volver a evaluar si realmente necesita esa biblioteca. Es posible que las bibliotecas de manipulación de DOM (como jQuery) y las bibliotecas de IU (como Bootstrap o IU de jQuery) en particular ya no sean necesarias cuando trabaje con LWC. Las hojas de estilo externas o personalizadas solo se deben usar si Salesforce Lightning Design System (SLDS) no satisface sus necesidades.

Bibliotecas de manipulación de DOM

Durante los últimos años, JavaScript avanzó mucho. Muchas utilidades de manipulación de DOM sin las que no podíamos vivir, como jQuery, ahora son estándar en el lenguaje. Los marcos modernos, como los componentes web Lightning, también ofrecen abstracciones que hacen que jQuery sea menos relevante.

Bibliotecas de IU

Se recomienda evitar el uso de bibliotecas de IU, como IU de jQuery y Bootstrap. Si bien estas bibliotecas ofrecen componentes útiles, tienen su propia identidad de IU que se puede mezclar con la identidad de Lightning Experience. Los componentes base de Lightning y SLDS ofrecen capacidades similares mientras proporcionan una experiencia de usuario coherente.

Marcos de Modelo Vista Controlador (MVC)

En un nivel alto, las bibliotecas como React y AngularJS tienen el mismo enfoque que el marco de los componentes web Lightning: Ofrecen organización del código y utilidades para crear componentes. No se recomienda usar otro marco MVC junto con LWC dentro de un componente. Sin embargo, puede usar un componente Lightning como contenedor para alojar componentes del servidor creados con otros marcos (como React y AngularJS) dentro de Lightning Experience. No obstante, ese tema no está comprendido en esta unidad.

Hojas de estilo personalizadas

Usar hojas de estilo CSS externas o crear nuestros propios estilos puede ocasionar problemas de desempeño y, como consecuencia, la IU puede verse inconsistente para los usuarios finales. Los desarrolladores deben familiarizarse con Salesforce Lightning Design System (SLDS), que fue desarrollado por Salesforce para crear experiencias de IU atractivas y enriquecidas para los usuarios finales. Además, va más allá de los estilos y CSS, incluye directrices y principios de diseño que utilizan nuestros propios ingenieros y planos de componentes que cubren necesidades comunes de los desarrolladores, como Breadcrumbs, Modals, Alerts y mucho más. Cuenta con una increíble lista de tokens de diseño que almacenan atributos de diseño visual para color, fuentes, espaciado, tamaño e incluso toque.

Al momento de crear componentes, los desarrolladores también pueden ahorrar tiempo si aprovechan SLDS ya que está integrado a Lightning y no requiere que los desarrolladores creen y conserven sus propias hojas CSS.

Usar versiones minimizadas de bibliotecas y hojas de estilo

Si necesita usar una biblioteca externa y no tiene otra opción, asegúrese de usar versiones minimizadas de la biblioteca y la hoja de estilo para aumentar el desempeño de su aplicación.

Componentes base de Lightning

Antes de crear sus propios componentes Lightning personalizados, debe familiarizarse con la biblioteca de los componentes base que se ofrecen. Entre ellos se incluyen lightning-input-field, lightning-record-form y muchos más. Aprovechar estos componentes base puede agilizar significativamente su tiempo de desarrollo. Por ejemplo, si desea presentar un gran botón rojo al usuario, simplemente use lightning-button:

<lightning-button variant="destructive" label="Destructive" onclick={handleClick}></lightning-button>

Estos son algunos beneficios adicionales de usar los componentes base de Lightning.

Estilos: el estilo de los componentes base de Lightning tienen la apariencia y experiencia nativa de Lightning.
Desempeño: los componentes base de Lightning ya están cargados del lado del cliente y no requieren procesamiento ni descarga adicional. Nuestros esfuerzos de optimización de desempeño también se centran en los componentes en el espacio de nombres lightning.
Capacidad de respuesta: de forma predeterminada, los componentes base de Lightning tienen capacidad de respuesta en su diseño.
Innovación: el espacio de nombres Lightning es donde los componentes se desarrollan de manera activa. Aquí es donde puede esperar ver componentes nuevos y mejorados de ahora en adelante.
Accesibilidad: los componentes base de Lightning se crearon para ofrecer accesibilidad.
Validación del lado del cliente: los componentes base de Lightning incluyen validación del lado del cliente cuando corresponde.

Optimización de imágenes

Siempre que sea posible, use los íconos SLDS, basados en imágenes agrupadas, (con <lightning-icon> y <lightning-button-icon>) en lugar de íconos personalizados. Salesforce tiene cientos de íconos para elegir, por eso, antes de dedicarle tiempo a crear sus propios íconos personalizados, reutilice los que SLDS le ofrece.

Cuando utilice otras imágenes, asegúrese de bloquear sus dimensiones para evitar reflujos y siempre que sea posible trabaje con la imagen en esas dimensiones. Por ejemplo, no cargue una imagen de alta resolución para mostrar una miniatura.

Representación y reflujo de ciclo de vida de los componentes

Los componentes web Lightning tienen un ciclo de vida gestionado por el marco de trabajo. El marco crea componentes, los inserta en el DOM, los representa y los elimina del DOM. Lea el ciclo de vida de la representación para comprender qué ocurre durante este ciclo de vida, qué métodos se activan y en qué horario. Minimice la cantidad de veces que su componente se vuelve a representar. En algunos casos, puede ser útil bloquear las regiones del DOM en dimensiones específicas para evitar reflujos del navegador de las áreas que lo rodean.

Finalización

El desempeño de una aplicación se ve afectado por muchos factores distintos. Las técnicas de optimización de desempeño de los componentes web Lightning descritas en este artículo son directrices generales que deberían ayudarlo a crear aplicaciones más rápidas y con mayor capacidad de respuesta. Pruébelas en su aplicación.

Estimación de tiempo

Temas

¿Necesita ayuda?

Recursos de Salesforce Platform