Componentes da Web do Lightning (disponível ao público em geral)

Agora você pode criar componentes do Lightning usando dois modelos de programação: Componentes da Web do Lightning e o modelo original, Componentes Aura. Os componentes da Web do Lightning são elementos HTML personalizados criados usando HTML e JavaScript moderno. Componentes da Web do Lightning e componentes Aura podem coexistir e interoperar em uma página. Para administradores e usuários finais, ambos aparecem como componentes do Lightning.

Onde: Esse recurso está disponível no Lightning Experience, nas Comunidades do Lightning e em todas as versões do aplicativo móvel em todas as edições. Para criar um componentes da Web do Lightning, use as edições Enterprise, Performance, Unlimited e Developer.

Por quê: Os Componentes da Web do Lightning trazem os avanços mais recentes em JavaScript e padrões da Web para a estrutura do Componentes do Lightning. Desde que introduzimos a estrutura de Componentes do Lightning em 2014, a pilha da Web evoluiu para uma plataforma de desenvolvimento de aplicativos. Muitos recursos que exigiam estruturas agora são o padrão. Nós desenvolvemos o modelo de programação de Componentes da Web do Lightning para aproveitar essa evolução. Os engenheiros da Salesforce ajudaram a liderar o caminho em TC39, que é o comitê que define ECMAScript (JavaScript).

Os Componentes da Web do Lightning usam os principais padrões de Componentes da Web e oferecem apenas o que é necessário para ter um bom desempenho em todos os navegadores que têm suporte pelo Salesforce. Como é criado em códigos que são executados nativamente nos navegadores, o modelo de programação de Componentes da Web do Lightning é leve e possui um desempenho excepcional. A maioria dos códigos que você escreve são JavaScript e HTML padrão.

Você também pode usar os componentes, ferramentas e serviços que facilitam desenvolver na Plataforma Lightning: Componentes de base do Lightning, Lightning Design System, Criador de aplicativo Lightning, Community Builder, Lightning Data Service e Lightning Locker.

Esse componente da Web do Lightning é um formulário totalmente editável criado com seis linhas de JavaScript.Um formulário de registro editável exibindo um contato.

Vamos ver alguns códigos. Cada componente da Web do Lightning é composto por um modelo de HTML e uma classe de JavaScript. Esse componente contém um componente de base <lightning-record-form>, que é criado no Lightning Data Service. Os atributos de componente são object-api-name, record-id e fields.
<!-- recordFormDynamicContact.html -->

<template>

    <lightning-card title="RecordFormDynamicContact" icon-name="standard:contact">

        <div class="slds-m-around_medium">
            <lightning-record-form object-api-name={objectApiName}
                                   record-id={recordId} 
                                   fields={fields}>
            </lightning-record-form>
        </div>

    </lightning-card>

</template>

A classe de JavaScript do componente declara as propriedades recordId, objectApiName e fields, que são ligadas ao modelo de HTML.

Propriedades decoradas com @api são públicas e reativas. Quando seus valores mudarem, o componente será renderizado com os novos valores. Esse componente recebe os valores para suas propriedades públicas da página de registro do Lightning que o contém. Legal!
// recordFormDynamicContact.js

import { LightningElement, api } from 'lwc';

export default class RecordFormDynamicContact extends LightningElement {

    @api recordId;
    @api objectApiName;
    fields = ['Name', 'Title', 'Phone', 'Email'];

}

Como: Use o Salesforce CLI para sincronizar o código-fonte dos Componentes da Web do Lightning entre a Salesforce e seu editor de códigos favorito. Recomendamos o Visual Studio Code, porque o Pacote de extensão do Salesforce inclui os comandos do Salesforce CLI, a conclusão de código e linting, que torna a codificação mais rápida e mais fluida.

Você também pode experimentar no Playground, nosso editor de código interativo. Escreva código JavaScript, HTML e CSS e visualize o resultado à medida que desenvolve. Salve os aplicativos do playground e compartilhe-os com outros desenvolvedores em sua organização.Editor de código e painel de saída do Playground.