El marco moderno del componente Lightning es un marco de interfaz de usuario para desarrollar aplicaciones web dinámicas para dispositivos móviles y de escritorio. Como es el caso con cada nueva versión, la versión más reciente Winter'22 está repleto de características ricas incluyendo, el Rayo de componentes que acaba de agregar características!

Actualmente, la versión Winter'22 está disponible bajo el programa de prelanzamiento . En caso de que no haya leído las 546 páginas completas de las notas de la versión de Salesforce Winter'22, consulte el resumen rápido de la versión Winter'22 y la versión de Pardot Winter'22: 10 características principales y diez gemas principales de Salesforce Lightning Experience escritas por mí.

Revisé las notas de la versión y destaqué las capacidades agregadas a las funciones del componente web Lightning. Créame, ¡fue difícil detenerse en solo cinco! Para empezar, aquí está mi opinión sobre las características más interesantes del componente Lightning de la versión Winter'22.

  1. Asegure sus componentes mejor, más fuerte y más rápido con Lightning Web Security (Beta) : – El marco de Lightning Component presenta Lightning Web Security, una nueva arquitectura de seguridad del lado del cliente para sus componentes web Lightning personalizados. Esta nueva arquitectura se define por menos restricciones y más funcionalidad al tiempo que proporciona un entorno de pruebas sólido y una postura de seguridad para mitigar los ataques de IU más comunes. El resultado es una seguridad sólida, flexible y utilizable para sus componentes web Lightning. La nueva arquitectura de Lightning Web Security está posicionada para reemplazar Lightning Locker para los componentes web Lightning. Funciona junto con Lightning Locker, que todavía se usa para los componentes de Aura. Al igual que Lightning Locker, la nueva arquitectura de seguridad bloquea o modifica el comportamiento de las API que no son seguras. Además, la nueva arquitectura admite funciones que Lightning Locker no admite.
    1. Uso de componentes de espacios de nombres cruzados: – Sus componentes de LWC pueden importar componentes o módulos de otros espacios de nombres y utilizarlos mediante composición o extensión. Los componentes están aislados en su propio espacio de nombres JavaScript sandbox, pero es transparente para usted porque la arquitectura de seguridad realiza la comunicación virtual entre bastidores.
    2. Interacciones con objetos globales: – Debido a que a cada espacio de nombres se le asigna su propia caja de arena de JavaScript separada, podemos exponer objetos globales de documentos , ventanas y elementos directamente sin envoltorios seguros. Los cambios realizados en los objetos globales de su espacio de nombres no pueden afectar a otros componentes.
    3. Rendimiento mejorado: – La ejecución de su código en la zona de pruebas de JavaScript del espacio de nombres es más rápida que en Lightning Locker.
    4. Mejor compatibilidad con JavaScript de terceros: – Las bibliotecas pueden utilizar técnicas como la manipulación de objetos globales mientras se ejecutan en un entorno limitado de JavaScript. En Lightning Locker, tales comportamientos impidieron el uso de algunas bibliotecas de terceros.
    5. Compatibilidad con JavaScript estándar a medida que evoluciona: – La tecnología de recinto de seguridad de JavaScript se basa en estándares. La nueva arquitectura de seguridad no necesita actualizaciones frecuentes para mantener el ritmo a medida que se agregan nuevas API. Desde Configuración en Lightning Experience, en el cuadro Búsqueda rápida, ingrese Sesión y luego seleccione Configuración de sesión . En la página Configuración de sesión, seleccione Seguridad de interfaz de usuario Lightning de próxima generación para LWC .
  2. Exponer eventos en el Generador de aplicaciones Lightning : – Como parte de las interacciones dinámicas, ahora puede definir los eventos para un componente web Lightning en una página y luego exponer esos eventos en el Generador de aplicaciones Lightning. Luego, un administrador puede configurar el evento configurando interacciones entre el componente de origen y sus objetivos directamente en la interfaz de usuario de App Builder.
      1. Para exponer un evento de un componente, activa un JavaScript CustomEvent estándar en su archivo .js. Para que el evento sea detectable , use las subetiquetas targetConfig relacionadas con las interacciones dinámicas en el archivo js-meta.xml del componente con el objetivo lightning__AppPage .
      2. evento
        1. Expone el evento para interacciones dinámicas y lo pone a disposición del componente en el Generador de aplicaciones Lightning. La subetiqueta del evento admite los atributos de nombre, etiqueta y descripción.
          1. nombre: el nombre del evento tal como se define en el archivo .js del componente. Si no se define ningún atributo de etiqueta, el valor del nombre se muestra en la lista de eventos disponibles para el componente en el Generador de aplicaciones Lightning.
          2. label: la etiqueta amigable para administradores del evento.
          3. descripción: la descripción del evento, que se muestra en forma de i-bubble en la etiqueta del evento en el Generador de aplicaciones Lightning.
      3. esquema
        1. Proporciona la forma del evento. El contenido de la subetiqueta del esquema debe estar en formato JSON.

    A continuación, se muestra un archivo de configuración js-meta.xml de muestra para un componente de origen de la lista de cuentas personalizado. Incluye un evento itemselected y su esquema incluye apiName y recordId como se define en el archivo .js.

     <? xml version = "1.0" encoding = "UTF-8"?>
<LightningComponentBundle xmlns = "http://soap.sforce.com/2006/04/metadata"> <apiVersion> 53.0 </apiVersion> <isExposed> verdadero </isExposed> <masterLabel> Lista de cuentas </masterLabel> <objetivos> <target> lightning__AppPage </target> </objetivos> <targetConfigs> <targetConfig objetivos = "lightning__AppPage"> <property name = "apiName" type = "String" /> <property name = "listViewApiName" type = "String" /> <event name = "itemselected" label = "Item Selected" description = "Este evento se activa cuando se selecciona un elemento."> <esquema> { "tipo": "objeto", "propiedades": { "recordId": { "tipo": "cadena", "title": "ID de registro" "description": "Introduzca un ID de registro de 18 dígitos". }, "apiName": { "tipo": "cadena" } } } </schema> </event> </targetConfig> </targetConfigs> <description> Define un evento para un componente de la lista de cuentas </description>
</LightningComponentBundle>
  3. Agregue el consentimiento de cookies autorizado por el usuario a sus componentes web Lightning : – Utilice el módulo lightning / userConsentCookie para incorporar el consentimiento de cookies autorizado por el usuario en sus componentes. Los usuarios pueden permitir uno o más tipos de cookies específicos: Requerido, Marketing, Preferencia y Estadísticas.
    1. En Experience Builder, en la pestaña Seguridad y privacidad, active Permitir solo las cookies necesarias para este sitio . Su código puede darles a los usuarios la posibilidad de ajustar el consentimiento para los tipos de cookies que quieren y no quieren permitir. Importe el método del componente userConsentCookie dentro de su componente personalizado. 
       importar{ setCookieConsent, isCategoryAllowedForCurrentConsent,
} de 'lightning / userConsentCookie';

      Utilice setCookieConsent () para establecer preferencias de consentimiento para una o más categorías de cookies.

       var consent = { "Preferencias": verdadero, "Estadísticas": verdadero, "Marketing": falso }
Sfdc.Cookie.setCookieConsent (consentimiento);
  4. Se agregó el límite para el número de acciones en una solicitud de vagón: – El marco del componente Lightning ahora devuelve un código de estado de respuesta HTTP 413 si hay más de 2,500 acciones en una solicitud de vagón. Anteriormente, no había límite y una solicitud con una mayor cantidad de acciones era poco común, pero provocaba un tiempo de respuesta lento. Si un usuario ve este error, considere rediseñar su componente personalizado para seguir las mejores prácticas y reducir la cantidad de acciones en una solicitud.
    1. El marco pone en cola las acciones de Apex antes de enviarlas al servidor. Este mecanismo es en gran parte transparente para usted cuando escribe código, pero permite que el marco minimice el tráfico de red al agrupar múltiples acciones en una sola solicitud (XHR). La agrupación de acciones también se conoce como furgón, similar a un tren que acopla furgones.
    2. El marco usa una pila para rastrear las acciones para enviar al servidor. Cuando el navegador termina de procesar eventos y JavaScript en el cliente, las acciones de Apex en cola en la pila se envían al servidor en un lote.
  5. Ver dependencias para componentes web Lightning : – Utilice el visor del árbol de dependencias para ver qué componentes personalizados y clases de Apex utiliza un componente web Lightning. Puede ver rápidamente la estructura de un componente y navegar hasta el origen de sus dependencias.
    1. En Configuración en Lightning Experience, en el cuadro Búsqueda rápida, ingrese Información de la empresa y luego seleccione Información de la empresa .
    2. Para ver sus dependencias en la página de detalles, seleccione un componente web Lightning .
    3. Para ver los detalles de una de las dependencias, haga clic en un enlace en la columna Nombre.

¡Mejoras adicionales dignas de mención!

  1. Asociar errores con los componentes Lightning adecuados para el lector de pantalla : -Ahora puede asociar el elemento de error de un componente personalizado con un componente de entrada. Cuando cree un nuevo componente personalizado para un flujo, establezca un ID para el elemento de error para que un lector de pantalla pueda leer el texto del mensaje de error que describe el componente personalizado. Por ejemplo, está creando un componente personalizado que busca en una lista de tareas pendientes. Desea asegurarse de que los lectores de pantalla asocien correctamente los errores con el componente de la lista de tareas pendientes.
    1. Agregue validación de entrada a un componente personalizado para que el flujo sepa si el componente es válido. Si el componente personalizado no es válido, el flujo muestra un mensaje de error debajo del componente personalizado. El flujo pasa el ID del elemento que muestra el mensaje de error a una propiedad llamada ariaDescribedBy en el componente personalizado. El componente recibe la ariaDescribedBy actualizada y asigna el ID al componente de entrada apropiado que tiene su propia propiedad ariaDescribedBy Como resultado, el error se asocia con la propiedad de entrada del componente personalizado.
  2. Los cambios en la API DOM pueden requerir actualizaciones de la prueba de la interfaz de usuario : – El contenido y la estructura de HTML, CSS y DOM pueden cambiar en cualquier momento y no pueden considerarse una API estable. Las pruebas de IU automatizadas que utilizan herramientas como Selenium WebDriver para acceder a los componentes internos requieren su mantenimiento continuo. Estamos aquí para ayudarlo a adaptar sus pruebas de IU automatizadas para esta versión.

Evaluación formativa:

¡Quiero saber de ti!

¿Cuáles son tus gemas favoritas de notas de lanzamiento de Winter'22? Puede descargar notas de la versión en formato HTML !, para archivos PDF.

Avísame twitteando en @automationchamp, o búscame en LinkedIn.

…

Esta es una traducción realizada por EGA Futura, y este es el link a la publicación original: https://automationchampion.com/2021/09/01/top-5-lightning-component-gems-of-salesforce-winter22-release/

    Entradas recomendadas

    Zero Copy revoluciona la nube de datos con análisis en tiempo real
    Centro DevOps para equipos híbridos colaborativos ☁️
    Centro DevOps para equipos híbridos colaborativos ☁️
    La versión de invierno de 2005: Guía para desarrolladores de Salesforce ☁️
    La versión de invierno de 2005: Guía para desarrolladores de Salesforce ☁️