Explorar otras opciones de renderización

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Describir opciones para usar listas y eventos.
Describir cómo usar las bibliotecas y hojas de estilo de JavaScript de terceros.
Optimizar imágenes para componentes web Lightning.
Explicar las ventajas de los componentes Lightning básicos.
Describir cómo usar el ciclo de vida y la repetición de flujos en el ciclo de vida.

Introducción

La mayoría de mejoras de rendimiento en componentes web Lightning se pueden conseguir usando las prácticas recomendadas de las unidades anteriores, pero hay algunas opciones de renderización opcionales que puede usar para mejorar el rendimiento.

Estas son algunas ideas para hacer que los componentes web Lightning sean aún más rápidos.

Listas

Las listas permiten ver muchos datos de una manera sencilla. Pero, si no se preparan bien, es posible que se muestren en ellas demasiados datos.

Tenga esto en mente cuando vaya a usar listas.

Las listas deben crearse utilizando for:each o iterator. La diferencia entre ambos elementos es que iterator tiene propiedades first y last que permiten aplicar comportamientos especiales a los elementos primero y último de una matriz.
```
<template for:each={contacts} for:item="contact">
  <li key={contact.Id}>{contact.Name}, {contact.Title}</li>
</template>
```
A la hora de crear componentes de lista personalizados, no permita la creación de un número ilimitado de elementos de lista. Esto puede afectar gravemente al rendimiento, sobre todo en organizaciones grandes con muchos registros. Puede proporcionar un mecanismo de paginación o virtualizar la lista, es decir, reutilizar y actualizar una cantidad limitada de componentes de elemento de lista.
Cada elemento de lista debe tener una clave (key) cuyos valores sean únicos en todos los elementos secundarios.
Tenga cuidado al usar componentes web Lightning dentro de la lista para encapsular una función. Se podría sumar demasiada sobrecarga y esto podría provocar problemas de rendimiento. Sobre todo si la lista es muy grande.

Eventos

El uso de eventos es una buena forma de comunicarse entre componentes e incluso permite que los desarrolladores escuchen eventos dentro del nodo DOM a medida que los componentes web Lightning envían eventos DOM estándar. Además, los componentes también pueden crear y enviar eventos personalizados. Utilice los eventos para comunicar la jerarquía de contención de los componentes. Las escuchas de eventos se pueden incorporar de forma declarativa o mediante programación con addEventListener().

Recuerde lo siguiente a la hora de usar eventos y controladores de eventos.

Minimice la cantidad de controladores de eventos y utilice únicamente los que sean absolutamente necesarios. Cada controlador conlleva una carga y, si se crean demasiados, el rendimiento de la aplicación podría verse afectado.
Infórmese bien de la propagación de eventos de componentes principales-secundarios mediante elementos bubbles y composed. Normalmente, debe usar eventos configurados con bubbles:false y composed:false porque tienen menos efecto. Estos eventos no se aparecen en el modelo DOM y no cruzan la frontera del método "Shadow DOM". Si crea un evento con bubbles:true y composed:true, se crea un contrato de API para el componente que emite el evento.
Para comunicarse entre componentes de la misma familia dentro de una única página Lightning o entre varias páginas, puede usar Lightning Message Service. Esto tiene la ventaja de poder trabajar en Visualforce, Aura, LWC, componentes de barra de utilidades y fichas de páginas en una aplicación de la consola.
Si agrega una escucha a un elemento que no forma parte del ciclo de vida de los componentes (como el objeto de ventana, el de documento, etc.), usted será el responsable de eliminarla. Para eliminar escuchas de evento, puede usar removeEventListener() en el hook de ciclo de vida disconnectedCallback. Si no lo hace, se pueden producir fugas de memoria, lo que con el tiempo podría afectar negativamente al rendimiento de toda la aplicación Lightning, hasta que el usuario cierre o actualice la pestaña del navegador.
A la hora de trabajar con listas, si permite los eventos de tipo "bubble" y registra una sola escucha de evento en un elemento principal en lugar de una escucha independiente para cada elemento de lista, podría reducir significativamente la cantidad de escuchas de evento de la aplicación. Esto puede tener un impacto positivo en el rendimiento.

Bibliotecas y hojas de estilo JavaScript de terceros

Siempre que sea posible, elimine las dependencias de las bibliotecas que no son necesarias. Además, antes de decidir usar una biblioteca de terceros en un componente Lightning, debería volver a evaluar si de verdad necesita esa biblioteca. En concreto, es posible que ya no necesite las bibliotecas de manipulación de DOM (como jQuery) y las bibliotecas de IU (como Bootstrap o jQuery UI) cuando trabaje con LWC. Las hojas de estilo personalizadas o de terceros solo deben usarse si Salesforce Lightning Design System (SLDS) no sirve para satisfacer sus necesidades.

Bibliotecas de manipulación de DOM

JavaScript ha mejorado muchísimo durante los últimos años. Ahora, muchas bibliotecas de manipulación de DOM sin las que no podríamos vivir se han convertido en un estándar del lenguaje. Los marcos modernos como Lightning Web Componentes también proporcionan abstracciones que hacen que jQuery sea menos relevante.

Bibliotecas de IU

Le recomendamos evitar el uso de bibliotecas de IU como Bootstrap y jQuery UI. Aunque estas bibliotecas incluyen componentes útiles, tienen su propia identidad de IU que puede entrar en conflicto con la identidad de Lightning Experience. Los componentes Lightning básicos y SLDS ofrecen capacidades similares a la vez que proporcionan una experiencia de usuario uniforme.

Marcos MVC (Model-View-Controller, por sus siglas en inglés)

De forma general, las bibliotecas como React y AngularJS tienen el mismo enfoque que el marco Lightning Web Components: permiten organizar el código y ofrecen utilidades para crear componentes. No es recomendable usar otro marco MVC junto con LWC dentro de un componente. Lo que sí puede hacer es usar un componente Lightning a modo de contenedor para alojar componentes desarrollados con otros marcos (Como React y AngularJS) dentro de Lightning Experience. Sin embargo, no hablaremos de esto dentro de esta unidad.

Hojas de estilo personalizadas

El uso de hojas de estilo CSS de terceros o personalizadas puede provocar problemas de rendimiento y hacer que la IU no tenga un aspecto uniforme ante los usuarios. Los desarrolladores deben familiarizarse con Salesforce Lightning Design System (SLDS), un marco creado por Salesforce para generar experiencias de IU bonitas y enriquecidas para los usuarios finales. Además, es mucho más que estilos y CSS; incluye directrices y principios de diseño que usan nuestros ingenieros y planos de componentes que cubren las necesidades de desarrollo más comunes, como rutas de exploración ("breadcrumbs"), modales, alertas y mucho más. Incluye una increíble lista de tokens de diseño donde se almacenan atributos de diseño visual sobre colores, fuentes, espaciado, tamaño e incluso capacidades táctiles.

El uso de SLDS también permite que los desarrolladores ahorren tiempo a la hora de desarrollar componentes porque se integra directamente en Lightning y no requiere que los desarrolladores creen y mantengan sus propias hojas de estilo CSS.

Usar versiones minimizadas de bibliotecas y hojas de estilo

Si no le queda otra que utilizar una biblioteca de terceros, asegúrese de usar versiones minimizadas de la biblioteca y las hojas de estilo a fin de aumentar el rendimiento de la aplicación.

Componentes Lightning básicos

Antes de crear sus componentes Lightning, debe familiarizarse con la biblioteca de componentes básicos que se ofrece. Entre estos se incluyen lightning-input-field, lightning-record-form y muchos más. El uso de estos componentes básicos puede acelerar en gran medida los plazos de desarrollo. Por ejemplo, si quiere presentar ante un usuario un gran botón rojo, solo tiene que usar lightning-button:

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

Estas son algunas ventajas de usar componentes Lightning básicos.

Estilos: los componentes Lightning básicos tienen el estilo nativo de Lightning.
Rendimiento: los componentes Lightning básicos ya vienen cargados en el cliente y no requieren descargas ni procesamientos adicionales. Nuestra estrategia de optimización del rendimiento también se centra en los componentes del espacio de nombres de Lightning.
Capacidad de respuesta: de forma predeterminada, los componentes Lightning básicos tienen capacidad de respuesta.
Innovación: el espacio de nombres de Lightning es donde se desarrollan de forma activa los componentes. Es el lugar donde puede ver componentes nuevos o mejorados.
Accesibilidad: el objetivo de los componentes Lightning básicos es ser accesibles.
Validación en el cliente: los componentes Lightning básicos incluyen validación en el cliente en aquellos casos en los que es necesario.

Optimización de imágenes

Siempre que sea posible, utilice los iconos de SLDS (basados en "sprites" y utilizando <lightning-icon> y <lightning-button-icon>) en lugar de iconos personalizados. Salesforce tiene cientos de iconos entre los que puede elegir, así que antes de emplear tiempo en crear iconos personalizados, le recomendamos reutilizar los que ofrece SLDS.

Al usar otras imágenes, asegúrese de bloquear las dimensiones para evitar repeticiones de flujos y usar las imágenes en esas dimensiones siempre que sea posible. Por ejemplo, no cargue una imagen de alta resolución para mostrar una miniatura.

Renderización y repetición de flujos en el ciclo de vida de los componentes

Los componentes web Lightning tienen un ciclo de vida que se gestiona en su marco. Este marco crea componentes, los inserta en el DOM, los renderiza y los elimina del DOM. Lea el ciclo de vida de renderización para saber qué ocurre durante este ciclo de vida y qué métodos se activan en cada momento. Minimice la cantidad de veces que se vuelve a renderizar el componente. En algunos casos, puede ser útil bloquear regiones de DOM en unas dimensiones específicas para evitar que se repitan flujos de las áreas circundantes en el navegador.

Conclusión

El rendimiento de una aplicación se ve afectado por distintos factores. Las técnicas de optimización del rendimiento de los componentes web Lightning descritas en este artículo son directrices generales que permiten desarrollar aplicaciones más rápidas y con mayor capacidad de respuesta. Le animamos a probarlas en su aplicación.

Estimación de tiempo

Temas

¿Necesita ayuda?

Recursos de Salesforce Platform