Descubrir los Componentes Web Lightning

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Explicar el modelo de programación de Componentes Web Lightning.
Enumerar las ventajas de utilizar los componentes web Lightning.
Descubra lo que necesita para empezar a desarrollar componentes web Lightning.

Una puerta abierta a la programación con estándares web

Es el momento de combinar el conocimiento y las nociones que tiene de Salesforce con tecnologías estándar como HTML, JavaScript y CSS para construir la nueva generación de aplicaciones de Salesforce. Utilice estos estándares comunes para construir componentes para su organización de Salesforce al mismo tiempo que mantiene la compatibilidad con los componentes Aura existentes.

Los Componentes Web Lightning se centran tanto en la experiencia del desarrollador como en la experiencia del usuario. Al abrir la puerta a las tecnologías existentes, puede utilizar las habilidades desarrolladas fuera de Salesforce para crear componentes web Lightning. Todo esto está disponible sin que tenga que renunciar a lo que logró hasta el momento con componentes Aura.

¿Observó la diferencia en el uso de las mayúsculas en el último párrafo? Si es así, es usted muy atento. Cuando nos referimos al modelo de programación ingresamos todas las palabras del nombre con mayúsculas: Componentes Web Lightning. Cuando nos referimos a los componentes en sí, solo la última palabra empieza por mayúscula: componentes web Lightning.

Por otra parte, el modelo de programación Componentes Lightning que estuvo utilizando ahora se denomina Componentes Aura. Los componentes en sí se denominan componentes Aura.

Antes de continuar

Necesitará tener ciertos conocimientos de los proyectos de Salesforce DX y de Salesforce CLI. También tendrá que utilizar una organización configurada correctamente en su cuenta de Trailhead y VS Code con el paquete de extensiones de Salesforce. Puede familiarizarse con todo este contenido si completa Inicio rápido: componentes web Lightning.

¿Por qué utilizamos Componentes Web Lightning?

Los navegadores modernos se basan en estándares web y estos estándares están en continua evolución mejorando lo que los navegadores pueden presentar a los usuarios. Queremos que pueda sacar partido de estas innovaciones.

Los componentes web Lightning utilizan estándares principales de componentes web y suministran solo lo que es necesario para funcionar bien en los navegadores que admite Salesforce. Al haber sido creados con un código que se ejecuta de manera nativa en los navegadores, los Componentes Web Lightning son ligeros y ofrecen un desempeño excepcional. La mayor parte del código que programa es JavaScript y HTML estándar.

Le resultará más fácil:

Encontrar soluciones en sitios generalistas en la web.
Encontrar desarrolladores con las habilidades y la experiencia necesarias.
Aprovechar las experiencias de otros desarrolladores (incluso en otras plataformas).
Desarrollar con mayor rapidez.
Aprovechar el encapsulamiento completo para que los componentes sean más versátiles.

Los componentes web no son nada nuevo. De hecho, los navegadores llevan años creándolos. Algunos ejemplos son: <select>, <video>, <input>, así como cualquier etiqueta que sirva como algo más que un contenedor. Estos elementos son en realidad el equivalente de componentes web. Nuestro objetivo es incorporar ese nivel de integración al desarrollo de Salesforce.

La sencillez en la creación de componentes

La belleza que nos aporta la adhesión a los estándares web es la sencillez. No tiene que especializarse en las peculiaridades de un marco de trabajo específico. Simplemente puede crear componentes utilizando HTML, JavaScript y CSS. La creación de componentes web Lightning se hace en un máximo de 3 pasos. No es una exageración. Es realmente así de fácil. Hay que crear (1) un archivo JavaScript, (2) un archivo HTML y, opcionalmente, (3) un archivo CSS.

El archivo HTML suministra la estructura para su componente.
El archivo JavaScript define la lógica de negocio principal y la gestión de eventos.
El archivo CSS aporta la apariencia y la animación a su componente.

Y esas son las partes esenciales de su componente.

Hay un componente web Lightning muy sencillo que muestra "Hello World" en un campo de entrada.

HTML

<template>

  <input value={message}></input>

</template>

La etiqueta template es un elemento fundamental del HTML de un componente. Permite almacenar fragmentos de HTML.

JavaScript

import { LightningElement } from 'lwc'; 

export default class App extends LightningElement { 

  message = 'Hello World'; 

}

Más adelante hablaremos también de los detalles de la declaración de importación y de la declaración de clase.

CSS

input {

  color: blue;

}

Como mínimo, lo único que realmente hace falta es un archivo HTML y un archivo JavaScript con el mismo nombre dentro de la misma carpeta (que también tenga el mismo nombre). Basta con implementarlos en una organización con metadatos y listo. Salesforce compila sus archivos y se ocupa de la construcción de componentes reutilizables de manera automática.

Los componentes web Lightning son compatibles con los componentes Aura

¿Se pregunta si podrá conservar sus componentes Aura ya existentes? ¡Sí, puede hacerlo! Puede utilizar los componentes web Lightning sin tener que abandonar sus componentes actuales. Es probable que en algún momento migre sus componentes actuales al modelo de Componentes Web Lightning, pero incorporamos los componentes web Lightning sin que esto afecte la compatibilidad existente con los componentes Aura. Los componentes Aura y los componentes web Lightning funcionan bien juntos.

De hecho, los componentes Aura pueden contener componentes web Lightning (aunque no funciona al revés). Aunque una implementación pura de componentes web Lightning ofrece una encapsulación completa y una adherencia en continua evolución hacia los estándares habituales.

Cosas interesantes que ahora puede utilizar

Para desarrollar componentes web Lightning de manera eficiente, utilice los siguientes entornos y herramientas.

Dev Hub y organizaciones borrador
Las organizaciones borrador son instancias de Salesforce org desechables que sirven para el desarrollo y las pruebas. Dev Hub es una función que gestiona sus organizaciones borrador. Ambos forman parte del conjunto de herramientas de Salesforce DX. Salesforce DX es un conjunto integrado de herramientas de desarrollo construidas y que se admiten en Salesforce.
- Interfaz de línea de comandos (CLI) de Salesforce
  La CLI de Salesforce proporciona una forma rápida de ejecutar operaciones para la creación y configuración de organizaciones borrador, y también para la implementación de componentes. Esto también forma parte del conjunto de herramientas de Salesforce DX.
- Biblioteca de componentes Lightning
  La referencia tanto para los componentes web Lightning como para Aura y cómo utilizarlos se encuentra en https://developer.salesforce.com/docs/component-library/overview/components. También puede ver la biblioteca a través de la instancia de su organización en http://<NombreMiDominio>.lightning.force.com/docs/component-library. Cuando visualice la biblioteca a través de su instancia, solo verá la versión correcta para su organización. Y cuando cree sus propios componentes personalizados, estos aparecerán también en la biblioteca.

GitHub
Compartimos extensiones, muestras y más a través de los repositorios de GitHub. Obtenga una cuenta GitHub para poder aprovechar estas ofertas.
- Paquete de extensiones de Salesforce para Visual Studio Code
  Nos centramos en Visual Studio como una herramienta de desarrollo; para ello, proporcionamos un entorno integrado que le permite crear sus componentes. El paquete de extensiones de Salesforce para Visual Studio Code ofrece comandos integrados, sugerencias de código y advertencias lint: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Recetas de componentes web Lightning
  Proporcionamos un repositorio de GitHub para que pueda ver cómo funcionan los componentes web Lightning. Podrá clonar y jugar con esta mezcla de muestras en su propia organización borrador y publicarla para verlos en acción. Está disponible en https://github.com/trailheadapps/lwc-recipes.
- Demostración con bicicletas eléctricas
  Este repositorio de GitHub es otra excelente forma de ver cómo funcionan los componentes web Lightning. El ejemplo de demostración con bicicletas eléctricas es una implementación de extremo a extremo de componentes web Lightning para crear una aplicación. Pruebe este ejemplo en su propia organización borrador. Está disponible en https://github.com/trailheadapps/ebikes-lwc.
- Lightning Data Service (LDS)
  Acceda a los datos y metadatos de Salesforce a través de Lightning Data Service. Los componentes Lightning base que trabajan con datos están construidos en el LDS. Personalice sus propios componentes para aprovechar la caché, el seguimiento de cambios, el desempeño y otras funciones del LDS.
- Lightning Locker
  Los componentes web Lightning que pertenecen a un solo espacio de nombres están a salvo de componentes en un espacio de nombres diferente a través de Seguridad con Lightning Locker. Lightning Locker también promueve mejores prácticas que mejoran la compatibilidad de su código al permitir el acceso únicamente a las API admitidas y eliminar el acceso a elementos internos del marco de trabajo no publicados.

Qué veremos a continuación

Bienvenido al mundo de los componentes web Lightning.

Utilizaremos la demostración eBikes para ver qué puede hacer con los archivos HTML y JavaScript.