Introducción a los Componentes Web de Lightning

En Salesforce, los Componentes Web de Lightning (LWC) son un cambio revolucionario en el paradigma de programación de la plataforma lightning. Si es nuevo en Lightning Platform y ha estado desarrollando soluciones fuera de Salesforce con la ayuda de HTML y JavaScript, encontrará que LWC es pan comido. En este blog, cubriremos los siguientes aspectos:

• ¿Qué es LWC?
• ¿Por qué LWC?
• ¿Qué pasa con Aura?
• por Dónde empezar?
• Estructura LWC

¿Qué son los componentes Web Lightning?

LWC es un nuevo modelo de programación para desarrollar componentes lightning de Salesforce. Es un marco de interfaz de usuario que se construye utilizando HTML nativo y JavaScript moderno. Utiliza estándares de componentes web básicos y aprovecha elementos personalizados, plantillas, decoradores, módulos, DOM de sombras y otras construcciones de lenguaje nuevas disponibles en ECMAScript 7 y posteriores.

Figura 1: pila web 2019

Los componentes Lightning anteriormente se podían desarrollar utilizando el marco de componentes aura. Ahora tenemos un nuevo marco para desarrollar los mismos componentes de iluminación.

¿Por qué LWC?

Necesitamos entender por qué Salesforce ha introducido LWC donde ya teníamos el marco de componentes Aura. Para ello, tenemos que volver a 2014 y echar un vistazo a esta pila web de 2014.

En 2014, cuando el framework Lightning Components se lanzó junto con el modelo de programación Aura, los estándares web solo ofrecían una base limitada para la pila completa que los desarrolladores necesitan para crear aplicaciones web a gran escala, p. ej. un motor de renderizado, elementos estándar, eventos y un lenguaje central (ECMAScript 5).

Los elementos clave, como un modelo de componentes, plantillas, módulos y DOM de sombras, faltan en los estándares web.

Figura 2: pila web 2014

Esto significa que los estándares web o la pila web en 2014 no eran lo suficientemente potentes como para ayudarnos a crear componentes de interfaz de usuario. Al mismo tiempo, muchos marcos diferentes entraron en escena como Angular, React y Aura. Todos estos frameworks venían con estos elementos clave faltantes que necesitábamos para crear componentes de interfaz de usuario.

Ahora, de 2014 a 2019, ha habido muchas mejoras en la pila web o el motor de navegador web nativo.

Figura 3: transformación de pila web

Puede ver las plantillas, los elementos personalizados y los módulos shadow DOM. Todos son parte de la pila web en sí. Esto significa que la última pila web es lo suficientemente potente como para ayudarnos a crear estos componentes de interfaz de usuario. No necesitamos una capa de marco gruesa en el medio, lo que podría dañar el rendimiento de nuestros componentes. Esa es la razón detrás de la introducción del marco LWC. La mayoría de las características de LWC son parte de la pila web en sí, y solo unas pocas cosas dependen de los frameworks ahora. LWC también viene con componentes de base lightning, todos los más de 70 componentes de base que forman parte del marco de componentes Aura se han convertido en Componentes de banda Lightning, y todos forman parte del marco de LWC. Podemos usar estos componentes básicos para diseñar en nuestros componentes de interfaz de usuario.

Con la potencia de la última pila de bobina, LWC viene con muchas ventajas diferentes sobre los componentes aura de la siguiente manera:

1. Mejor rendimiento
2. Estándares web modernos
3. Compatible con componentes Aura
4. Sitios de carga más rápidos
5. Mejor seguridad, mejores pruebas y mejor compatibilidad con navegadores
6. Facilidad de desarrollo

¿Qué pasa con Aura?

Debe preguntarse que, ya que LWC está aquí, ¿qué va a pasar con Aura? ¿Se va?

La respuesta es ” no ” porque LWC y Aura son una combinación perfecta entre sí. Puede poner su LWC y los Componentes de Aura en la misma página y no notará ninguna diferencia allí porque su LWC puede hablar con su Componente de Aura y su Componente de Aura también puede hablar con su LWC. Incluso puede incluir su LWC dentro de un componente Aura donde el viceversa no es cierto porque no desea incluir un marco personalizado dentro de un marco genérico, que es un LWC.

Figura 4: Interoperabilidad de Aura y LWC

Mirando esta imagen, notará que tanto LWC como Aura compartían los mismos eventos de navegador, elementos estándar y mecanismo de renderizado. La diferencia es que Aura fue construida en ECMAScript 5. LWC se basa en la última versión de ECMAScript, que es ECMAScript 7. Ambos comparten las características esenciales de Salesforce, como el Armario de iluminación, los servicios de datos Lightning y los componentes Base Lightning.

En resumen, LWC es una nueva forma de desarrollar sus componentes de iluminación. Esto no significa que el marco del Componente Aura vaya a ninguna parte. Aún puede usar su modelo de programación de Aura para crear sus componentes de interfaz de usuario si está más familiarizado con el marco de componentes de Aura. Pero si está comenzando ahora o si está creando nuevos componentes a partir de ahora, le sugeriría que use LWC porque viene con muchas ventajas diferentes, como un mejor rendimiento de los componentes, y utiliza todas las funciones de su pila web. Siempre es mejor usar LWC over Aura para sus nuevos componentes, pero no tiene que migrar sus componentes de Aura existentes a un LWC a partir de ahora.

por Dónde empezar?

Para crear y desarrollar LWC y utilizar sus potentes funciones y beneficios de rendimiento, debe configurar Salesforce DX. A diferencia de los componentes Aura, no es posible desarrollar componentes LWC en la consola de desarrolladores. Necesitas escribirlo localmente y luego enviarlo a tu organización. Al hacer esto, deberá configurar su entorno de desarrollador. Necesita un conjunto de herramientas como Visual Studio Code, la interfaz de línea de comandos de Salesforce y una organización.

Estos son algunos pasos recomendados:

1. Instale VS Code y configúrelo para el desarrollo de Salesforce. Puede seguir este módulo de inicio de sendero.
2. Obtenga código de ejemplo fácil de entender para casi todos los casos de uso aquí.
3. Para más muestras, visite aquí.
4. Desarrolle usted mismo un LWC y pruebe su código ejecutándolo aquí.
5. Lo más importante es que complete la introducción con LWC Trailmix.

Estructura de componentes de LWC

¿Cómo se forma un LWC?

Similar a un componente Aura, el contenido principal de un LWC también es HTML y JavaScript. Hay contenido opcional como CSS. Pero además de estos para LWC, también se incluye un archivo de configuración XML, que define los valores de metadatos para el componente.

Figura 5: Estructura de archivos LWC

Todos estos nombres de archivo deben coincidir con el nombre del componente. La carpeta y los archivos deben seguir algunas reglas de nomenclatura, como se indica a continuación:

• Debe comenzar con una letra minúscula
• Debe contener solo caracteres alfanuméricos o de guion bajo
• Debe ser único en el espacio de nombres
• No puede incluir espacios en blanco
• No puede terminar con un guion bajo
• No puede contener un guion (guión)

La estructura de archivos de LWC se vería así:

Ahora, vamos a cubrir todos estos archivos uno por uno:

HTML

• Tiene una etiqueta raíz < template> que contiene el HTML de su componente
• Cuando se renderiza, la etiqueta < template> se reemplaza por < namespace-component-name>

JavaScript:

• Para importar la funcionalidad declarada en un módulo, utilice la instrucción import.
• Para permitir que otro código utilice la funcionalidad de un módulo, utilice la instrucción export.
• LightningElement es un envoltorio personalizado del elemento HTML estándar y lo extendemos en el componente y exportamos.

Configuración:

• Archivo XML que define los valores de configuración de metadatos para el componente
• Configuramos < destinos> para implementar componentes para diferentes páginas, como la página de la aplicación, la página de registro, etc.

CSS:

• Al estilo de un componente.
• La hoja de estilos se aplica automáticamente.

Los archivos que hemos discutido – ¿cómo sería el componente de generación con estos looks?

Interfaz de usuario de componentes:

Puede intentar crear este componente en su configuración de código VS e implementarlo en su organización. Si aún no ha configurado su código VS, no se preocupe. Salesforce también ofrece un patio de recreo para LWC – puede probar este componente aquí.

Este es el mejor momento para comenzar con Lightning Web Components, que ofrece la potencia del estándar web más reciente, un mejor rendimiento e interoperabilidad con Aura Components.

Puede consultar los siguientes enlaces para obtener más información sobre los componentes Web de Lightning.

1. https://developer.salesforce.com/docs/component-library/documentation/en/lwc
2. https://developer.salesforce.com/docs/component-library/overview/components
3. https://trailhead.salesforce.com/en/content/learn/projects/quick-start-lightning-web-components
4. https://trailhead.salesforce.com/en/users/strailhead/trailmixes/lightning-web-components
5. https://www.lightningdesignsystem.com/
6. https://trailhead.salesforce.com/content/learn/projects/quick-start-lightning-web-components/set-up-visual-studio-code

Sobre el Autor

Sagar Zade está Asociado Consultor Técnico en Perficient. Es Administrador certificado de salesforce, Creador de Aplicaciones, Desarrollador de Plataformas y Desarrollador de Plataformas certificado por Vlocity. Está ansioso por aprender y explorar las nuevas tecnologías que se utilizan en salesforce y entusiasmado por compartir el conocimiento.

Más de este Autor