Descobrir Componentes Web do Lightning

Objetivos de aprendizagem

Após concluir esta unidade, você estará apto a:

Explicar o modelo de programação dos Componentes Web do Lightning.
Listar os benefícios de usar componentes Web do Lightning.
Encontrar o que você precisa para começar a desenvolver componentes Web do Lightning.

Uma porta aberta para a programação com padrões da Web

Chegou a hora de reunir seu conhecimento e familiaridade com o Salesforce com tecnologias padrão, como HTML, JavaScript e CSS para criar a próxima geração de aplicativos do Salesforce. Use esses padrões comuns para criar componentes para sua organização do Salesforce enquanto mantém a compatibilidade com componentes existentes do Aura.

O foco dos Componentes Web do Lightning recai tanto no desenvolvedor quanto na experiência do usuário. Como abrimos a porta para as tecnologias existentes, use a habilidade que desenvolveu fora do Salesforce para criar componentes Web do Lightning. Tudo isso está disponível sem que você tenha que desistir do que já foi realizado com componentes do Aura.

Você notou alguma diferença no uso de maiúsculas no último parágrafo? Se tiver notado, você tem olhos de águia. Usamos maiúsculas em todas as palavras quando nos referimos ao modelo de programação dos Componentes Web do Lightning. Só usamos maiúsculas na primeira palavra quando nos referimos aos próprios componentes, como componentes Web do Lightning.

Além disso, o modelo de programação dos Componentes do Lightning que você está usando agora é chamado de Componentes do Aura. Os próprios componentes são chamados de componentes do Aura.

Antes de prosseguir

Você deve ter uma compreensão básica dos projetos Salesforce DX e da CLI do NetDown. Você também precisará usar uma organização configurada corretamente na conta Trailhead e no VS Code com o Pacote de extensões do Salesforce. Para saber mais sobre tudo isso, conclua o Início rápido: Componentes Web do Lightning.

Por que Componentes Web do Lightning?

Os navegadores modernos são baseados em padrões da Web e os padrões em evolução melhoram constantemente aquilo que os navegadores podem apresentar a um usuário. Queremos que você possa aproveitar essas inovações.

Os componentes Web do Lightning usam os principais padrões de componentes Web e fornecem apenas o que é necessário para um bom desempenho em navegadores compatíveis com o Salesforce. Por ter como base o código executado nativamente nos navegadores, os Componentes Web do Lightning são leves e oferecem desempenho excepcional. A maior parte do código usado é JavaScript e HTML padrão.

Você achará mais fácil:

Encontrar soluções em locais comuns na Web.
Encontrar desenvolvedores com habilidades e experiências necessárias.
Usar experiências de outros desenvolvedores (mesmo em outras plataformas).
Desenvolver mais rapidamente.
Utilizar encapsulamento completo para que os componentes sejam mais versáteis.

Claro que os componentes Web não são novidade. Na verdade, os navegadores têm criado esses componentes há anos. Os exemplos incluem <select>, <video>, <input> e qualquer marca que sirva como mais do que um contêiner. Esses elementos, na verdade, equivalem aos componentes Web. Nosso objetivo é trazer esse nível de integração ao desenvolvimento do Salesforce.

Criação de componentes simples

A vantagem de aderir aos padrões da Web é a simplicidade. Você não precisa aprender a usar as peculiaridades de uma estrutura específica. Basta criar componentes usando HTML, JavaScript e CSS. A criação do componente Web do Lightning tem uma, duas, três etapas. Não estou brincando. É realmente fácil assim. Você cria (1) um arquivo JavaScript, (2) um arquivo HTML e, opcionalmente, (3) um arquivo CSS.

O HTML fornece a estrutura para seu componente.
O JavaScript define a lógica de negócios principal e o tratamento de eventos.
O CSS oferece a aparência e a animação de seu componente.

Essas são as partes essenciais do componente.

Veja este componente Web do Lightning muito simples que exibe "Hello World" em um campo de entrada.

HTML

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

A marca template é um bloco de construção fundamental do HTML de um componente. Ela permite que você armazene partes do HTML.

JavaScript

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

Posteriormente, entraremos nos detalhes da instrução de importação e da declaração de classe.

CSS

input {
  color: blue;
}

No mínimo, tudo o que você realmente precisa é de um arquivo HTML e um arquivo JavaScript com o mesmo nome na mesma pasta (também com um nome correspondente). Implante esses arquivos em uma organização com alguns metadados e pronto. O Salesforce compila seus arquivos e cuida automaticamente da construção do componente clichê.

Componentes Web do Lightning e os Componentes do Aura funcionam juntos

Quer saber se você pode manter seus componentes do Aura existentes? Sim, pode! Você pode usar componentes Web do Lightning sem abrir mão de seus componentes existentes. Você provavelmente migrará seus componentes existentes para o modelo dos Componentes Web do Lightning, mas estamos introduzindo os componentes Web do Lightning sem retirar nenhum elemento do suporte existente dos componentes do Aura. Os componentes do Aura e os componentes Web do Lightning convivem bem juntos.

Na verdade, os componentes do Aura podem conter componentes Web do Lightning (embora o contrário não se aplique). No entanto, uma implementação de componentes Web do Lightning pura oferece encapsulamento completo e cumprimento de padrões comuns que evolui com o tempo.

Coisas legais que você pode usar

Para desenvolver componentes Web do Lightning eficientemente, use as seguintes ferramentas e ambientes.

DevOps Center
O DevOps Center da Salesforce oferece uma experiência aprimorada em relação ao gerenciamento de alterações e lançamentos que leva as melhores práticas de DevOps à sua equipe de desenvolvimento, independentemente de sua posição no espectro de low-code para pro-code.
Code Builder
O Salesforce Code Builder é um ambiente de desenvolvimento integrado baseado na web com todo o poder e a flexibilidade do Visual Studio Code, das Extensões do Salesforce para VS Code e da Salesforce CLI no seu navegador da web.
Dev Hub e organizações temporárias
As organizações temporárias são organizações descartáveis do Salesforce que dão suporte a desenvolvimento e testes. O Dev Hub é um recurso que gerencia suas organizações temporárias. Ambos fazem parte do conjunto de ferramentas Salesforce DX. O Salesforce DX é um conjunto integrado de ferramentas de desenvolvimento criadas e suportadas pelo Salesforce.
- Interface de linha de comando (CLI) do Salesforce
  A CLI do Salesforce oferece uma maneira rápida de executar operações para criar e configurar organizações temporárias e, também, para implantar componentes. Isso também faz parte do conjunto de ferramentas Salesforce DX.
- Biblioteca de componentes do Lightning
  Veja a referência para componentes Web do Lightning e do Aura, além da forma de usá-los, em https://developer.salesforce.com/docs/component-library/overview/components. Você também pode ver a biblioteca usando a instância da organização em http://<MyDomainName>.lightning.force.com/docs/component-library. Ao visualizar a biblioteca pela instância, você verá apenas a versão correta para sua organização. E, à medida que você cria seus próprios componentes personalizados, eles também são exibidos na biblioteca.

GitHub
Compartilhamos extensões, amostras e muito mais nos repositórios do GitHub. Obtenha uma conta do GitHub para garantir que possa tirar proveito dessas ofertas.
- Pacote de extensões do Salesforce para Visual Studio Code
  Nos concentramos no Visual Studio como uma ferramenta de desenvolvimento, oferecendo um ambiente integrado para você criar seus componentes. O Pacote de extensões do Salesforce para Visual Studio Code oferece dicas de código, avisos de lint e comandos incorporados: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Receitas de componentes Web do Lightning
  Oferecemos um repositório do GitHub para ajudá-lo a ver como os componentes Web do Lightning funcionam. Você pode clonar, mexer e publicar essa mistura de exemplos em sua própria organização temporária e vê-los em ação. Obtenha-o em https://github.com/trailheadapps/lwc-recipes.
- Demonstração de e-Bikes
  Esse repositório do GitHub é outra ótima maneira de ver como os componentes Web do Lightning funcionam. A demonstração de e-Bikes é uma implementação de ponta a ponta de componentes Web do Lightning para criar um aplicativo. Experimente este exemplo em sua própria organização temporária. Obtenha a sua em https://github.com/trailheadapps/ebikes-lwc.
- Lightning Data Service (LDS)
  Acesse dados e metadados do Salesforce por meio do Lightning Data Service. Os componentes básicos do Lightning que funcionam com dados são criados no LDS. Personalize seus próprios componentes para aproveitar o armazenamento em cache do LDS, o rastreamento de alterações, o desempenho e muito mais.
- Lightning Locker
  Os componentes Web do Lightning que pertencem a um namespace estão protegidos contra componentes em outros namespaces por meio da Segurança com o Lightning Locker. O Lightning Locker também promove práticas recomendadas que aprimoram a capacidade de suporte do código permitindo acesso apenas às APIs suportadas e eliminando acesso a estruturas internas não publicadas da estrutura.

Temas a abordar

Bem-vindo ao mundo dos componentes Web do Lightning

Usaremos a demonstração eBikes para ver o que você pode fazer com os arquivos HTML e JavaScript.

Procurando ajuda?

Descubra mais