Descubrir Lightning Web Components

Objetivos de aprendizaje

Después de completar esta unidad, podrá:

Describir el modelo de programación Lightning Web Components.
Enumerar las ventajas de usar componentes web Lightning.
Encontrar lo que necesita para empezar a desarrollar componentes web Lightning.

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

Es hora de combinar sus conocimientos de Salesforce con tecnologías estándar como HTML, JavaScript y CSS para desarrollar la próxima generación de aplicaciones de Salesforce. Puede usar estos estándares comunes para crear componentes para su organización de Salesforce sin perder la compatibilidad con los componentes de Aura existentes.

El modelo Lightning Web Components se centra tanto en el desarrollador como en la experiencia del usuario. Dado que hemos abierto la puerta a las tecnologías existentes, utilizará las habilidades que ha desarrollado fuera del entorno de Salesforce para desarrollar componentes web Lightning. Puede hacer todo esto sin necesidad de que deje de lado todo lo que ya ha creado con los componentes Aura.

¿Se ha fijado en el uso del inglés del último párrafo? Bien visto. Cuando nos referimos al modelo de programación Lightning Web Components, utilizamos el término en inglés. Cuando hacemos referencia a los componentes en sí mismos, es decir, los componentes web Lightning, utilizamos la traducción del concepto a modo genérico.

Por otro lado, el modelo de programación Lightning Components que ha estado utilizando ahora se llama Aura Components. Para referirnos a los componentes en sí, empleamos el término componentes Aura.

Antes de seguir avanzando

Debe contar con conocimientos básicos de los proyectos de Salesforce DX y Salesforce CLI. También necesitará una organización correctamente configurada en su cuenta de Trailhead y VS Code con Salesforce Extension Pack. Obtendrá más información al completar el módulo Inicio rápido: Componentes web Lightning.

¿Por qué usar Lightning Web Components?

Los navegadores actuales se basan en estándares web, y estos estándares mejoran constantemente el contenido que pueden presentar los navegadores a un usuario. Queremos que aproveche al máximo estas innovaciones.

Lightning Web Components utiliza estándares de componentes web y proporciona únicamente los elementos necesarios para ejecutarse correctamente en los navegadores admitidos en Salesforce. Puesto que se ha desarrollado en un código que se ejecuta de forma nativa en los navegadores, Lightning Web Components es ligero y ofrece un rendimiento excepcional. La mayoría de código que escribe es JavaScript y HTML estándar.

Le resultará más sencillo hacer lo siguiente:

Encontrar soluciones en lugares comunes de la Web.
Encontrar desarrolladores con las habilidades y la experiencia necesarias.
Usar las experiencias de otros desarrolladores (incluso en otras plataformas).
Desarrollar con mayor rapidez.
Utilizar el encapsulamiento total para que los componentes sean más versátiles.

Los componentes web no son nada nuevo. De hecho, las navegadores llevan años creándolos. Por ejemplo, los elementos <select>, <video>, <input> y el resto de etiquetas que tienen otras funciones además de ser meros contenedores. Estos elementos son en realidad el equivalente de los componentes web. Nuestro objetivo es incorporar ese nivel de integración en las tareas de desarrollo de Salesforce.

Creación sencilla de componentes

Lo mejor de adherirse a los estándares web es la sencillez. No es necesario estudiar las peculiaridades de un marco concreto. Solo tiene que crear componentes mediante HTML, JavaScript y CSS. La creación de componentes web Lightning consta de tres pasos. En serio. Así de sencillo. Primero (1) se crea un archivo JavaScript, luego (2) un archivo HTML y opcionalmente (3) un archivo CSS.

El archivo HTML proporciona la estructura del componente.
El archivo JavaScript define la lógica empresarial principal y la gestión de eventos.
El archivo CSS proporciona el aspecto y la animación del componente.

Estas son las partes esenciales del componente.

Aquí tenemos un componente web Lightning muy sencillo donde se ve "Hello World" (Hola mundo) en un campo de introducción de texto.

HTML

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

La etiqueta template (plantilla) es un pilar fundamental de la sección HTML de un componente. Le permite almacenar partes de ese código HTML.

JavaScript

import { LightningElement } from 'lwc';
export default class App extends LightningElement {
  message = 'Hello World';
}

Más tarde veremos más detalles sobre la instrucción "import" y la declaración de clases.

CSS

input {
  color: blue;
}

Como mínimo, lo único que necesita realmente es un archivo HTML y otro JavaScript con el mismo nombre en la misma carpeta (que también tenga el mismo nombre). Estos archivos se implementan en una organización con algunos metadatos y eso es todo. Salesforce compila los archivos y se encarga de la construcción del componente estándar por usted.

Lightning Web Components y Aura Components pueden combinarse

¿Quiere saber si puede conservar sus componentes Aura? La respuesta es sí. Puede usar componentes web Lightning sin dejar de utilizar sus componentes actuales. Es probable que migre esos componentes al modelo Lightning Web Components con el tiempo, pero por ahora vamos a introducir los componentes web Lightning sin quitar ningún elemento de la base actual formada por componentes Aura. Los componentes web Lightning y los Aura se llevan bastante bien.

De hecho, los componentes Aura pueden contener componentes web Lightning (pero no a la inversa). Sin embargo, las implementaciones únicamente basadas en componentes web Lightning proporcionan un encapsulamiento total y una adhesión constante a los estándares comunes.

Material del bueno a su disposición

Puede usar los siguientes entornos y herramientas para desarrollar componentes web Lightning sin problemas.

Centro de DevOps
El Centro de DevOps de Salesforce ofrece una experiencia mejorada de gestión de cambios y versiones que proporciona las prácticas recomendadas de DevOps a su equipo de desarrollo, independientemente de si trabaja con poco código o es un experto.
Code Builder
Code Builder de Salesforce es un entorno de desarrollo integrado basado en web que cuenta con la potencia y la flexibilidad de Visual Studio Code, extensiones de Salesforce para Visual Studio Code y Salesforce CLI en su navegador web.
Dev Hub y organizaciones borrador
Las organizaciones borrador son organizaciones de Salesforce desechables que se usan con fines de desarrollo y pruebas. Dev Hub es una función que permite administrar las organizaciones borrador. Ambas herramientas forman parte del conjunto Salesforce DX. Salesforce DX es un conjunto integrado de herramientas de desarrollo creado y mantenido por Salesforce.
- Salesforce Command Line Interface (CLI)
  Salesforce CLI ofrece una manera rápida de ejecutar operaciones para crear y configurar organizaciones borrador e implementar componentes. También forma parte del conjunto de herramientas Salesforce DX.
- Biblioteca de componentes Lightning
  El sitio de referencia para componentes Aura y componentes web Lightning y cómo usarlos se encuentra en https://developer.salesforce.com/docs/component-library/overview/components. También puede acceder a la biblioteca desde la instancia de su organización, en http://<NombreDeMiDominio>.lightning.force.com/docs/component-library. Si accede a la biblioteca desde su instancia, solo verá la versión correspondiente a su organización. A medida que cree sus propios componentes, estos aparecerán en la biblioteca.

GitHub
Compartimos extensiones, muestras y mucho más a través de repositorios de GitHub. Consiga una cuenta de GitHub para asegurarse de aprovechar al máximo estas ventajas.
- Visual Studio Code Salesforce Extension Pack
  Nos hemos centrado en Visual Studio como herramienta de desarrollo para proporcionar un entorno integrado en el que pueda crear sus componentes. El paquete Salesforce Extension Pack para Visual Studio Code proporciona sugerencias de código, advertencias de análisis y comandos integrados: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Lightning Web Components Recipes
  Ponemos a su disposición un repositorio de GitHub en el que podrá ver cómo funcionan los componentes web Lightning. Podrá duplicar, probar y publicar esta combinación de muestras en su organización borrador y verlas en acción. Acceda al repositorio en https://github.com/trailheadapps/lwc-recipes.
- E-Bikes Demo
  Este repositorio de GitHub es otra fantástica forma de ver cómo funcionan los componentes web Lightning. Esta demostración incluye una implementación integral de componentes web Lightning para crear una aplicación. Pruebe este ejemplo en su organización borrador. Consígalo en https://github.com/trailheadapps/ebikes-lwc.
- Lightning Data Service (LDS)
  Acceda a datos y metadatos de Salesforce desde Lightning Data Service. Los componentes Lightning básicos que funcionan con datos se basan en LDS. Personalice sus propios componentes para aprovechar las funciones de almacenamiento en caché, control de cambios, rendimiento y mucho más de LDS.
- Lightning Locker
  Los componentes web Lightning que pertenecen a un espacio de nombres se protegen de los componentes de otro espacio de nombres distinto mediante las opciones de seguridad de Lightning Locker. Lightning Locker también promueve prácticas recomendadas que mejoran la compatibilidad del código al permitir el acceso únicamente a las API admitidas y eliminar el acceso a elementos internos de marcos no publicados.

Lo que viene a continuación

Le damos la bienvenida al mundo de los componentes web Lightning

Utilizaremos la demostración de e-Bikes para ver lo que podemos hacer con los archivos HTML y JavaScript.

¿Necesita ayuda?

Descubrir más