Skip to content

Etiqueta: desarrolladores de Salesforce

Los Codeys: Homenaje a los mejores contenidos de 2023 ☁️

Los Codeys: Homenaje a los mejores contenidos de 2023 ☁️

2023 fue un gran año para los desarrolladores de Salesforce. Hubo un montón de nuevas funciones interesantes, grandes mejoras en cosas como Lightning Web Components y, por supuesto, un montón de nuevas herramientas y capacidades que aprovechan la Inteligencia Artificial. Todos los años, en enero, celebramos los mejores contenidos destacados del año anterior y se los traemos […]

The post Los Codeys – Celebrando el contenido más destacado de 2023 appeared first on Blog de desarrolladores de Salesforce.

Los Codeys celebran el contenido más destacado de 2023

Seguir leyendo

La versión Spring ’24: Una guía completa para desarrolladores de Salesforce ☁️

La versión Spring '24: Una guía completa para desarrolladores de Salesforce ☁️

La versión Spring ’24 ya está aquí, y estos son algunos de los aspectos más destacados de la versión, que detallan las novedades para los desarrolladores de todo el ecosistema de Salesforce.

La versión Spring ’24 ya está aquí

The post Guía para desarrolladores de Salesforce sobre la versión Spring ’24 appeared first on Blog para desarrolladores de Salesforce.

La versión Spring ’24 ya está aquí

Seguir leyendo

Aprovechar el potencial de las acciones de datos utilizando un Webhook como destino ☁️

Aprovechar el potencial de las acciones de datos utilizando un Webhook como destino ☁️

Aprenda sobre la función Data Actions de Data Cloud y recorra cómo ampliar un webhook como objetivo para visualizar e impulsar los resultados empresariales.

Los eventos webhook se pueden utilizar para la visualización

The post Desbloquee el poder de las acciones de datos utilizando un webhook como objetivo appeared first on Blog de desarrolladores de Salesforce.

Descubra la función de Data Cloud y aprenda a ampliar un webhook como objetivo para visualizar e impulsar resultados empresariales

Seguir leyendo

Presentación del control de versiones de API a nivel de componente de LWC ☁️

Presentación del control de versiones de API a nivel de componente de LWC ☁️

El versionado de la API de LWC es una excelente forma de garantizar la compatibilidad con versiones anteriores de los componentes existentes y, al mismo tiempo, permitir que los nuevos componentes adopten las nuevas características.

The post Presentación del control de versiones de API a nivel de componente para LWC appeared first on Blog de desarrolladores de Salesforce.

Blog de desarrolladores de Salesforce

Seguir leyendo

Transición de la herramienta de migración Ant a la CLI sf (v2) ☁️

Transición de la herramienta de migración Ant a la CLI sf (v2) ☁️

Ha llegado el momento de pasar de la herramienta de migración Ant a la experiencia de desarrollador más moderna y con soporte oficial mediante la CLI de Salesforce.

Las herramientas de migración Ant y la CLI de Salesforce son las dos herramientas que mejor se adaptan a sus necesidades

The post Pasando de la Herramienta de migración Ant a la CLI de sf (v2) appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

El viaje de Nicolas Vuillamy hasta convertirse en CTO en el ecosistema de Salesforce ☁️

El viaje de Nicolas Vuillamy hasta convertirse en CTO en el ecosistema de Salesforce ☁️

Nuestra serie Dev Spotlight explora las vidas de desarrolladores individuales mientras comparten su viaje para convertirse en desarrolladores de Salesforce y lo que significa formar parte de nuestra comunidad mundial.

La serie Dev Spotlight explora las vidas de desarrolladores individuales mientras comparten su viaje para convertirse en desarrolladores de Salesforce y lo que significa formar parte de nuestra comunidad mundial

The post Nicolas Vuillamy construye una trayectoria profesional hasta convertirse en CTO en el ecosistema de Salesforce appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Mejore su experiencia MuleSoft con IA ☁️

Mejore su experiencia MuleSoft con IA ☁️

En el mundo de la IA, que se desarrolla rápidamente, MuleSoft está evolucionando sus capacidades de integración, gestión de API e IA.

En el mundo de la IA, MuleSoft está evolucionando sus capacidades de integración, gestión de API e IA

The post Acelere su viaje a MuleSoft con IA appeared first on Blog de Desarrolladores de Salesforce.

Seguir leyendo

Prepare sus componentes LWC para Shadow DOM nativo en Spring ’24 ☁️

Prepare sus componentes LWC para Shadow DOM nativo en Spring '24 ☁️

El shadow DOM nativo hará que tus componentes LWC estén más alineados con los estándares web, las nuevas características de los navegadores y un rendimiento mejorado.

The post Prepare sus componentes LWC para Shadow DOM nativo en Spring ’24 appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Cree pruebas integrales rápidamente con la extensión de UTAM para Chrome ☁️

Cree pruebas integrales rápidamente con la extensión de UTAM para Chrome ☁️

Construya pruebas de extremo a extremo rápidamente con dos elementos que hacen grande a UTAM: los objetos de página base (PO) y la extensión UTAM para Chrome.

Los objetos de página base (PO) y la extensión UTAM para Chrome son dos elementos que hacen grande a UTAM

The post Construya pruebas de extremo a extremo rápidamente con la extensión UTAM Chrome appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Configuración de modelos de IA en Einstein Copilot Studio: Guía paso a paso ☁️

Configura y autentica tus modelos de IA en Einstein Copilot Studio, y emite tus predicciones en Data Cloud.

Data Cloud

The post Cómo configurar modelos de IA en Einstein Copilot Studio appeared first on Blog de Desarrolladores de Salesforce.

Seguir leyendo

Dentro de CodeGen: Nuestro LLM interno de código abierto ☁️

Dentro de CodeGen: Nuestro LLM interno de código abierto ☁️

CodeGen, parte de la propia familia de modelos de lenguaje de gran tamaño (LLM) de Salesforce, es un LLM de código abierto para la comprensión y generación de código.

CodeGen, parte de la propia familia de modelos de lenguaje de gran tamaño (LLM) de Salesforce

The post Dentro de CodeGen, nuestro LLM interno de código abierto appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Aumente la flexibilidad de Experience Builder con editores de propiedades y tipos personalizados ☁️

Aumente la flexibilidad de Experience Builder con editores de propiedades y tipos personalizados ☁️

Aprenda a hacer que sus componentes web Lightning sean visualmente interactivos y fáciles de configurar en Experience Builder.

Los componentes web Lightning son fáciles de configurar en Experience Builder

The post Mejore la flexibilidad con editores y tipos de propiedades personalizadas en Experience Builder appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

5 usos creativos de DataWeave de MuleSoft: Desencadenar la magia de la transformación ☁️

5 usos creativos de DataWeave de MuleSoft: Desencadenar la magia de la transformación ☁️

Recorre una lista de herramientas para utilizar DataWeave en diferentes escenarios, desde una aplicación de Mule con arrastrar y soltar hasta una herramienta de línea de comandos.

The post 5 Maneras de Usar el Mágico Lenguaje de Transformación de MuleSoft’s: DataWeave appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Todd Halfpenny cultiva relaciones duraderas y experiencia en la comunidad Trailblazer ☁️

Todd Halfpenny cultiva relaciones duraderas y experiencia en la comunidad Trailblazer ☁️

Nuestra serie Dev Spotlight explora las vidas de desarrolladores individuales mientras comparten su viaje para convertirse en desarrolladores de Salesforce y lo que significa formar parte de nuestra comunidad mundial.

La serie Dev Spotlight explora las vidas de desarrolladores individuales mientras comparten su viaje para convertirse en desarrolladores de Salesforce y lo que significa formar parte de nuestra comunidad mundial

The post Todd Halfpenny construye amistades y habilidades para toda la vida en la comunidad Trailblazer appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Consulta de datos adicionales mediante consultas SOQL anidadas en la API REST ☁️

Consulta de datos adicionales mediante consultas SOQL anidadas en la API REST ☁️

Combine varias llamadas a la API en una única llamada a la API para simplificar su código y reducir el número de llamadas a la API que se contabilizan en su límite diario.

Las consultas SOQL anidadas son una forma de simplificar su código

The post Consulte más datos con consultas SOQL anidadas en la API de REST appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Creación de una especificación de API con Visual API Designer de MuleSoft ☁️

Creación de una especificación de API con Visual API Designer de MuleSoft ☁️

Diseña tu especificación en minutos usando clics, no código con el Diseñador Visual de APIs de MuleSoft.

Diseña tu especificación en minutos usando clics, no código con el Diseñador Visual de APIs de MuleSoft

The post Diseñe una especificación de API utilizando el Diseñador Visual de API de MuleSoft appeared first on Blog de Desarrolladores de Salesforce.

Seguir leyendo

La nueva herramienta de ciencia de datos para acelerar el desarrollo de la IA

Por Chi Wang y Scott Nyberg En el mundo actual, impulsado por los datos, aprovechar los datos de los clientes para mejorar las capacidades de IA sigue siendo clave para ofrecer experiencias de consumo altamente personalizadas. De hecho, el 43% de los clientes cree que la IA ha mejorado sus vidas, y el 54% está dispuesto a proporcionar sus datos anónimos para mejorar los productos relacionados con la IA. Sin embargo, más de la mitad de los clientes compartieron […]

El post Revelando la nueva herramienta de ciencia de datos: Speeding AI Development and Securing Customer Data appeared first on Blog de ingeniería de Salesforce.

La nueva herramienta de ciencia de datos acelera el desarrollo de la IA y protege los datos de los clientes

Seguir leyendo

Novedades de las versiones 11.0 y 11.1 del SDK para móviles ☁️

Novedades de las versiones 11.0 y 11.1 del SDK para móviles ☁️

Mobile SDK 11.0 introduce autenticación biométrica, SSO multiaplicación mejorado y más actualizaciones para Android y iOS.

The post Las novedades del SDK móvil 11.0 y 11.1 appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Aprendizaje automático y clasificación mediante Random Forest ☁️

Aprendizaje automático y clasificación mediante Random Forest ☁️

Una visión general del aprendizaje automático, dos tipos populares de ML, y la clasificación de bosque aleatorio, un modelo de ML popular utilizado por los científicos de datos.

La clasificación de bosque aleatorio, un modelo de ML popular utilizado por los científicos de datos

The post Aprendizaje automático y clasificación de bosque aleatorio appeared first on Blog de Desarrolladores de Salesforce.

Seguir leyendo

Prompt Engineering para desarrolladores de Salesforce: Mejora de la eficacia y la productividad ☁️

Prompt Engineering para desarrolladores de Salesforce: Mejora de la eficacia y la productividad ☁️

Las técnicas de ingeniería generativa, si se hacen bien, pueden ayudarle a hacer las cosas bien, mejor y, lo que es más importante, más rápido.

Las técnicas de ingeniería generativa pueden ayudarle a hacer las cosas bien, mejor y, lo que es más importante, más rápido

The post Ingeniería de prompts para desarrolladores de Salesforce appeared first on Blog de desarrolladores de Salesforce.

Seguir leyendo

Recomendaciones de Salesforce para la Presidencia belga del Consejo de la UE

Lea más sobre las recomendaciones de Salesforce para la Presidencia belga del Consejo de la UE aquí.

The post Recomendaciones de Salesforce para la Presidencia belga del Consejo de la UE appeared first on Blog de Salesforce EU.

Seguir leyendo

Noltic fomenta el talento de los jóvenes en el mundo académico

Noltic se convirtió en uno de nuestros embajadores académicos de Salesforce en Ucrania, inspirando y educando a jóvenes talentos. Obtenga más información aquí.

The post Noltic fomenta el talento de los jóvenes en el mundo académico appeared first on Salesforce EU Blog.

El blog de Salesforce en la UE

Seguir leyendo

Lleve sus modelos de IA de Google Vertex a la nube de datos ☁️

Lleve sus modelos de IA de Google Vertex a la nube de datos ☁️

Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoamérica .

El enlace a la publicación original, lo encontrarás al final de este artículo.

Lleve sus modelos de IA de Google Vertex a la nube de datos | Blog de desarrolladores de Salesforce

Model Builder, parte de Einstein Copilot Studio, es una plataforma fácil de usar que le permite crear y poner en funcionamiento modelos de IA en Salesforce. Model Builder es capaz de integrarse profundamente con plataformas de IA externas, como Google Cloud Vertex AI y Amazon SageMaker, para que pueda crear, entrenar e implementar modelos de IA personalizados de forma externa utilizando datos de Salesforce Data Cloud.

Salesforce anunció previamente el lanzamiento de Model Builder con Amazon SageMaker en agosto de 2023. Hoy, nos complace anunciar que los modelos de Google Vertex AI ahora están disponibles de forma general en Model Builder. Como parte de esta última versión, Model Builder ahora admite la autenticación mediante las credenciales de la cuenta del servicio de Google, así como la ingestión de datos en streaming.

Estamos entusiasmados con esta nueva innovación de la asociación ampliada de Salesforce con Google Cloud, que consideramos que tiene un enorme potencial para los desarrolladores. Como enfatizó Kaushal Kurapati, vicepresidente senior de Producto, IA y Búsqueda de Salesforce:

“Con esta asociación con Google Cloud, Model Builder ofrece una manera conveniente para que los clientes aprovechen sus modelos Vertex AI en sus fuentes de datos, flujos de trabajo y aplicaciones de Salesforce y brinden experiencias personalizadas, continuando con la visión de construir una plataforma abierta de Salesforce AI con un ecosistema modelo robusto”.

¿Qué es la capacidad de traer su propio modelo (BYOM)?

Model Builder le permite conectarse fácilmente a modelos predictivos externos, como los de un proveedor de modelos externo o su propio modelo propietario, y utilizarlos en el flujo de trabajo en Salesforce. Por ejemplo, puede utilizar modelos predictivos para calificar clientes potenciales, recomendar productos o detectar la deserción.

La capacidad BYOM de Model Builder le permite integrar fácilmente su modelo con Data Cloud para acceder a predicciones e información en tiempo real, y utilizar esa información de varias maneras, como enriquecer perfiles de clientes, crear segmentos y personalizar la experiencia del usuario final en diferentes canales.

¿Por qué traer su propio modelo a Data Cloud?

Estos son algunos de los beneficios de usar un modelo de Google Cloud Vertex AI con datos de Data Cloud en Model Builder:

  • Le brinda acceso a datos altamente seleccionados, armonizados y casi en tiempo real en Customer 360, en Vertex AI
  • Elimina trabajos de ETL tediosos, costosos y propensos a errores; El enfoque de federación de copia cero para los datos reduce los gastos generales de gestión de copias de datos y los costos de almacenamiento, y mejora la eficiencia.
  • Le permite crear, entrenar, probar y ajustar modelos rápidamente en una única plataforma y conectarlos con Data Cloud.
  • Admite la ingesta de datos en tiempo real, streaming y por lotes para impulsar resultados de IA relevantes
  • Aprovecha las predicciones de Vertex AI para automatizar procesos comerciales en Salesforce Data Cloud con Flow y Apex

Para obtener más información, mire nuestro breve vídeo .

Flujo de trabajo de la aplicación para usar Model Builder con Vertex AI de Google Cloud

En esta sección, analizamos brevemente el flujo de trabajo de la aplicación utilizando Model Builder.

En el flujo de trabajo que se muestra arriba, el conector Python brinda a Vertex AI acceso seguro a los objetos de Salesforce Data Cloud. Después de la autenticación, los especialistas en datos pueden explorar y preparar datos, y realizar tareas de ingeniería de características para el desarrollo y la inferencia de modelos de IA utilizando la plataforma Vertex AI.

Tenga en cuenta que si se realiza una autenticación basada en clave API, se necesita una puerta de enlace API delante del punto final de Vertex AI.

NUEVA característica: Autenticación mediante credenciales de cuenta de servicio de Google

La versión más reciente de Model Builder ahora permite utilizar las credenciales de la cuenta del servicio de Google para la autenticación. Esto se suma a los métodos de autenticación JWT y basados en claves existentes. Para utilizar un flujo de token al portador JWT, ingrese su correo electrónico de la cuenta de servicio, ID de clave privada y clave privada de su cuenta de Google Cloud como se muestra a continuación.

NUEVA característica: Ingestión de datos en streaming

La última versión de Model Builder le permite activar automáticamente una inferencia cuando los datos asignados a la variable de entrada del modelo se cambian en el objeto del modelo de datos de origen (DMO). También ofrecemos inferencia por lotes, pero debe hacer clic en el botón Actualizar manualmente para activar nuevas inferencias. Con la inferencia de transmisión, las nuevas inferencias se activan solo cuando hay un cambio en la variable de entrada.

Para habilitar la inferencia de transmisión, deberá marcar la casilla en ¿Actualizar modelo cuando se actualizan los datos? Como se muestra abajo.

También puede especificar cuáles de las funciones de entrada deben actualizarse seleccionando en el menú desplegable Actualizar puntuación .

Cómo consumir predicciones de tu modelo en Salesforce

Hay dos formas de consumir predicciones: usar acciones invocables en Flow y Apex, o usar Query API para realizar análisis ad hoc.

Utilice Flow Builder y Apex para obtener predicciones

A continuación se muestra un ejemplo de cómo utilizar acciones invocables para modelos de Model Builder en Flow. Una vez que tenga un modelo activado en Model Builder, seleccione Nueva acción → Nube de datos y luego haga clic en el nombre del modelo deseado.

La captura de pantalla siguiente muestra un flujo de ejemplo que utiliza una acción invocable para crear recomendaciones de productos para un cliente. Aquí, un administrador usa Flow Builder para recorrer los registros individuales unificados y verificar si se realizó una compra reciente. Si se realizó la compra, la acción invocable obtiene la inferencia del modelo de Model Builder y recomienda el siguiente mejor producto a un cliente.

Esta acción invocable también se puede invocar en Apex. Vea el ejemplo a continuación.

<dx-code-block title language="apex" code-block="Invocable.Action action = Invocable.Action.createCustomAction('cdpGetMlPrediction', 'EinsteinStudio_model_name');
action.setInvocationParameter('param_variable_1', '10');
action.setInvocationParameter('param_variable_2', '20');
action.setInvocationParameter('param_variable_3', '30');
List results = action.invoke();
if (results.size() > 0 && results[0].isSuccess()) { System.debug(‘Result is: ‘ + results[0].getOutputParameters().get(‘param_score’));
} else { System.debug(‘Error message’ + results[0].getErrors());
} «>

Para obtener instrucciones sobre el uso de acciones invocables en Flow y Apex, consulte la Ayuda de Salesforce .

Utilice Query API para obtener predicciones

Query API es otra forma rápida de obtener puntuaciones de predicción para datos que residen en Data Cloud. Con Query API, puede utilizar el punto final de inferencia y llamar a funciones de predicción para probar el punto final. Vea el ejemplo a continuación.

Para obtener instrucciones sobre el uso de acciones invocables en QueryAPI, consulte la Ayuda de Salesforce .

Conclusión

Model Builder es una plataforma de IA fácil de usar que permite a los equipos de ingeniería y ciencia de datos crear, entrenar e implementar modelos de IA utilizando plataformas y datos externos en Data Cloud. Las plataformas externas incluyen Google Cloud Vertex AI, Amazon SageMaker y otros servicios de IA predictivos o generativos. Una vez que esté listo, podrá utilizar los modelos de IA en tiempo real para impulsar cualquier aplicación de ventas, servicios, marketing, comercio y otras aplicaciones en Salesforce.

Para obtener más información sobre cómo puede mejorar su estrategia de IA utilizando Model Builder, asista a nuestro seminario web gratuito con expertos en IA de Salesforce y Google Cloud.

Recursos adicionales

Sobre los autores

Daryl Martis es el director de producto de Salesforce de Einstein. Tiene más de 10 años de experiencia en planificación, creación, lanzamiento y gestión de soluciones de clase mundial para clientes empresariales, incluidas AI/ML y soluciones en la nube. Síguelo en LinkedIn o Twitter .

Ashish Thapliyal es director sénior de producto en Salesforce y actualmente dirige varias áreas de productos de la plataforma Einstein AI. Síguelo en LinkedIn o Twitter .

Obtenga las últimas publicaciones de blog y episodios de podcasts para desarrolladores de Salesforce a través de Slack o RSS.

Añadir a holgura Suscríbete a RSS

Seguir leyendo

Desmitificando Light DOM y sus casos de uso ☁️

Desmitificando Light DOM y sus casos de uso ☁️

Esta es una traducción que desde EGA Futura ofrecemos como cortesía a toda la Ohana y comunidad de programadores , consultores , administradores y arquitectos de Salesforce para toda Iberoamérica .

El enlace a la publicación original, lo encontrarás al final de este artículo.

Desmitificando Light DOM y sus casos de uso | Blog de desarrolladores de Salesforce

Light DOM es una función de Lightning Web Components que ha estado disponible de forma general en Lightning Experience, Experience Cloud, LWC OSS (código abierto) y todas las versiones de la aplicación móvil Salesforce desde Summer '23 .

Los componentes web Lightning, de forma predeterminada, se representan en DOM oculto , lo que proporciona una encapsulación y seguridad sólidas para sus componentes. Sin embargo, al mismo tiempo, evita el estilo global y bloquea las integraciones de terceros que introspeccionan el interior de sus componentes. Light DOM es una característica que se puede habilitar de forma granular en componentes seleccionados, de modo que Shadow DOM no los afecte.

¿Cómo funciona el DOM ligero?

Usemos un componente web Lightning muy simple como ejemplo.

holaCodey.html

<dx-code-block title language="html" code-block="

Hello Codey!

«>

holaCodey.js

En el ejemplo anterior, el DOM oculto predeterminado del componente evita que una regla CSS definida en el componente principal o el host alcance el elemento <p> . Además, no permite que el código JavaScript externo al componente consulte el elemento <p> mediante las API de consulta del navegador.

Para activar el DOM ligero para un componente, debe especificar el renderMode ligero en su archivo JavaScript y la directiva de plantilla lwc:render-mode en la etiqueta <template> del componente. Ambos cambios son necesarios debido a la forma en que se compilan los componentes web Lightning.

holaCodey.html

<dx-code-block title language="html" code-block="

Hello Codey!

«>

holaCodey.js

Cuando activa el DOM claro en un componente, el marcado del componente se adjunta al elemento anfitrión en lugar de a su árbol de sombra. Luego puede acceder al marcado desde otros componentes de la página como cualquier otro contenido en el host del documento que no esté protegido por Shadow DOM.

Los componentes DOM ligeros permiten el uso de API de consulta de navegador estándar como querySelector y querySelectorAll . En este caso, en lugar de usar this.template.querySelector , debes usar this.querySelector .

holaCodey.js

O más simplemente, a menudo puedes usar la directiva lwc:ref en ambos casos (componentes DOM sombreados y claros) y omitir el querySelector .

holaCodey.html

<dx-code-block title language="html" code-block="

Hello Codey!

«>

holaCodey.js

Cuándo usarlo y cuándo no usarlo

Light DOM es una opción para cada componente individual. Sus efectos no se aplicarán a otros componentes a menos que también opten por participar. Tenga en cuenta que los componentes base siempre se representan en DOM oculto.

Recomendamos habilitar DOM ligero si tiene bibliotecas que necesitan acceder a los componentes internos mediante API de consulta de navegador estándar, aplicar estilos globales o necesita más flexibilidad para implementar las mejores prácticas de accesibilidad, siempre y cuando el componente no exponga datos confidenciales. Cubriremos estos casos de uso con más profundidad en la siguiente sección.

No recomendamos habilitar DOM ligero para un componente si ese componente aparece o funciona con datos confidenciales. El uso de DOM ligero elimina la encapsulación de DOM en sombra y expone los componentes al raspado de DOM. Por lo tanto, tenga en cuenta esta importante consideración.

Casos de uso habilitados por DOM ligero

Light DOM permite varios casos de uso que anteriormente no eran compatibles.

1) Soporte de bibliotecas que necesitan acceso a las partes internas de un componente

Light DOM permite el uso de bibliotecas que necesitan acceso a los componentes internos. Un buen ejemplo de esto son las bibliotecas de análisis utilizadas en los sitios de Experience Cloud, como Google Analytics, ya que necesitan acceso a los componentes internos para obtener mejores resultados.

Podemos probar este caso de uso, incluido el componente helloCodey anterior, en un componente principal mascotChanger de la siguiente manera.

mascotChanger.html

<dx-code-block title language="html" code-block="
«>

mascotChanger.js

Tenga en cuenta que, aunque el párrafo consultado pertenece al componente helloCodey , podemos acceder a él con this.template.querySelector , porque pertenece al DOM ligero secundario. Sin embargo, si el componente helloCodey no tuviera habilitado el DOM ligero, querySelector habría devuelto null .

También puede acceder a los componentes internos del DOM ligero desde un script que se carga como un recurso estático en la página, siempre y cuando todos los componentes ancestros estén habilitados para el DOM ligero. Por ejemplo, en un sitio LWR Experience Cloud, que es DOM completamente ligero, puede agregar un recurso estático de JavaScript que encuentre los componentes internos helloCodey de la siguiente manera.

myJSResource.js

2) Implementación más sencilla de componentes profundamente anidados

Otro ejemplo en el que esto puede resultar útil es implementar componentes complejos y profundamente anidados. En ese caso, es posible que prefiera tener un único componente DOM de sombra en el nivel superior y componentes DOM claros dentro para evitar gastos generales. Por ejemplo, un componente de tabla de datos personalizado puede tener solo un gran componente DOM de sombra alrededor de todo, en lugar de una sombra para cada fila y celda de la tabla.

Esta implementación facilita la consulta de sus propios elementos desde el componente de nivel superior de su jerarquía y también la implementación de la accesibilidad. Además, hay una ligera mejora en el rendimiento en algunos casos de uso al usar DOM claro sobre DOM sombreado, lo que se debe principalmente a la sobrecarga de simplemente crear nodos de sombra adicionales.

3) Estilo global

Light DOM también facilita el estilo global, ya que permite que los estilos CSS caigan en cascada en el marcado del componente. Por ejemplo, un componente DOM ligero puede establecer un estilo que se carga y luego se aplica una vez para todos los componentes DOM ligeros de la página. La inyección de estilos globales a través de DOM ligero solo se admite en sitios de Experience Cloud, editor de contenido CMS o Sales Enablement.

Por ejemplo, definamos un componente colorChanger de la siguiente manera.

colorChanger.html

<dx-code-block title language="html" code-block="
«>

colorChanger.js

colorChanger.css

El color de fondo azul se aplicará a los párrafos de todas las instancias del componente helloCodey en la página, ya que está habilitado para DOM claro.

En la mayoría de los casos, no querrás que tu estilo se filtre a otros componentes. Eso todavía es posible para componentes DOM ligeros. Solo necesita colocar esas reglas de estilo en un archivo *.scoped.css , para que tengan como alcance el componente DOM ligero. El CSS con alcance está escrito exactamente igual que el CSS normal, pero solo se aplicará a ese componente sin filtrarse.

Tenga en cuenta que si las reglas de estilo se cargan globalmente como recursos estáticos en una página de Lightning Experience o un sitio de Experience Cloud, se les quitará el alcance y se aplicarán tanto a los componentes DOM claros como también a los componentes DOM de sombra, ya que la sombra sintética no evitará que se filtren. Esta es una limitación que se solucionará una vez que la sombra nativa sea totalmente compatible (actualmente en Developer Preview ). Cuando la sombra nativa está habilitada, solo los componentes habilitados para DOM claro heredarán los estilos globales.

4) Implementación más flexible de las mejores prácticas de accesibilidad

Light DOM permite que un componente haga referencia a la i d un elemento que vive en otro componente separado habilitado para Light DOM. Esto le permite vincular dos elementos utilizando los atributos i d y aria , lo que le otorga flexibilidad adicional para implementar las mejores prácticas de accesibilidad en sus proyectos. Mejoremos nuestro componente mascotChanger para demostrar esto.

mascotChanger.html

<dx-code-block title language="html" code-block="

«>

mascotChanger.js

mascotaNombreInput.html

<dx-code-block title language="html" code-block="

«>

mascotaNombreEtiqueta.html

<dx-code-block title language="html" code-block="

«>

Tenga en cuenta que Salesforce está trabajando actualmente con el W3C para agregar nuevos estándares, de modo que el DOM oculto nativo pueda participar en estos patrones de accesibilidad. Esto significa que, en el futuro, este caso de uso ligero de DOM no será necesario. Como parte de nuestros esfuerzos de accesibilidad, también patrocinamos a Igalia para implementar parcialmente ARIA Element Reflection , que ahora es totalmente compatible con Safari y parcialmente con Chrome. Si quieres saber más sobre este tema, echa un vistazo a nuestra propuesta cross-root-aria , el repositorio para el grupo de trabajo Modelo de objetos de accesibilidad .

La siguiente tabla resume los casos de uso y dónde se admiten.

Experiencia en la nube Experiencia relámpago Aplicaciones móviles de Salesforce LWC OSS/LWR en Node.js*
Soporte de bibliotecas que necesitan acceso a las partes internas de los componentes.
Implementación más sencilla de componentes profundamente anidados
Estilo global No No
Implementación más flexible de las mejores prácticas de accesibilidad

*Si se utiliza DOM de sombra nativo en lugar de sombra sintética . La sombra nativa es la opción predeterminada para LWC OSS y LWR en Node.js.

Otras Consideraciones

Cuando se trabaja con DOM ligero, hay algunas consideraciones adicionales a tener en cuenta, entre ellas:

  • Los eventos no se reorientan con DOM ligero. Lea más en la guía para desarrolladores .
  • No hay soporte de navegador para espacios fuera del DOM oculto, por lo que se emula. Esto implica que algunas funciones, como los enlaces de ciclo de vida, no están disponibles en ellos. Eche un vistazo a la documentación para saber más.
  • Por ahora, los componentes ligeros habilitados para DOM no se pueden empaquetar.

Conclusión

En esta publicación de blog, revisamos qué es el DOM ligero, los casos de uso que permite y las consideraciones a tener en cuenta para decidir qué componentes habilitarán la función. Todos los ejemplos que se muestran en este blog se encuentran en un repositorio de GitHub que puedes probar tú mismo.

Para obtener más información sobre DOM ligero en la plataforma Salesforce, lea la documentación o, si está trabajando fuera de la plataforma, lea la documentación OSS .

Si decide seguir adelante y transformar sus componentes DOM ocultos en componentes DOM claros, consulte esta herramienta creada por Salesforce Engineering para simplificar la migración.

Sobre el Autor

Alba Rivas trabaja como Principal Developer Advocate en Salesforce. Puedes seguirla en Linkedin , Twitter o GitHub .

Obtenga las últimas publicaciones de blog y episodios de podcasts para desarrolladores de Salesforce a través de Slack o RSS.

Añadir a holgura Suscríbete a RSS

Seguir leyendo