uma introdução aos Lightning Web Components

no Salesforce, os Lightning Web Components (LWC) são uma mudança revolucionária no paradigma de programação da plataforma lightning. Se você é novo no Lightning Platform e está desenvolvendo soluções fora do Salesforce com a ajuda de HTML e JavaScript, então você descobrirá que o LWC é um pedaço de bolo. Neste blog, abordaremos os seguintes aspectos:

• o que é o LWC?
• por que LWC?
• e a Aura?
• por onde começar?
• estrutura LWC

o que são Componentes da Web Lightning?

LWC é um novo modelo de programação para desenvolver componentes Salesforce lightning. É uma estrutura de interface do usuário que é construída usando HTML nativo e JavaScript moderno. Ele usa os principais padrões de componentes da web e aproveita elementos personalizados, modelos, decoradores, módulos, shadow DOM e outras novas construções de linguagem disponíveis no ECMAScript 7 e além.

Figura 1: 2019 pilha Web

componentes Lightning anteriormente poderiam ser desenvolvidos usando a estrutura do componente aura. Agora temos uma nova estrutura para desenvolver os mesmos componentes do lightning.

por que LWC?

precisamos entender por que o Salesforce introduziu o LWC onde já tínhamos a estrutura do componente Aura. Para isso, precisamos voltar a 2014 e dar uma olhada nesta pilha da web de 2014.

em 2014, quando a estrutura Lightning Components foi lançada junto com o modelo de programação Aura, os padrões da web ofereciam apenas uma base limitada para a pilha completa que os desenvolvedores precisam para construir aplicativos da web em grande escala, ou seja, um mecanismo de renderização, elementos padrão, eventos e uma linguagem principal (ECMAScript 5).

os elementos-chave, como um modelo de componente, modelos, módulos e shadow DOM, estão ausentes dos padrões da web.

Figura 2: 2014 web stack

isso significa que os padrões da web ou a pilha da web em 2014 não eram poderosos o suficiente para nos ajudar a criar Componentes da interface do Usuário. Ao mesmo tempo, muitas estruturas diferentes entraram em cena como Angular, React e Aura. Todas essas estruturas vieram com esses elementos-chave ausentes que precisávamos para criar componentes de IU.

agora, de 2014 a 2019, houve muitas melhorias na pilha da web ou no mecanismo nativo do navegador da web.

Figura 3: transformação de pilha da web

você pode ver os modelos, elementos personalizados e módulos dom de sombra. Todos eles fazem parte da própria pilha da web. Isso significa que a pilha da web mais recente é poderosa o suficiente para nos ajudar a criar esses componentes da interface do Usuário. Não precisamos de uma camada de estrutura espessa intermediária, o que pode prejudicar o desempenho de nossos componentes. Essa é a razão por trás da introdução da estrutura LWC. A maioria dos recursos do LWC faz parte da própria pilha da web e apenas algumas coisas dependem dos frameworks agora. O LWC também vem com componentes básicos do lightning, todos os mais de 70 componentes básicos que fazem parte da estrutura de componentes do Aura foram convertidos em Componentes da web do Lightning e todos fazem parte da estrutura do LWC. Podemos usar esses componentes básicos para projetar em nossos Componentes da interface do Usuário.

com o poder da mais recente pilha web, LWC vem com muitas vantagens diferentes sobre componentes aura como se segue:

1. Melhor desempenho
2. padrões Modernos da web
3. Compatível com Aura componentes
4. mais Rápido o carregamento de sites
5. melhor segurança, Melhor o teste, e melhor compatibilidade de navegador
6. Facilidade de desenvolvimento

o Que sobre a Aura?

você deve estar se perguntando que, como o LWC está aqui, o que vai acontecer com o Aura? Vai desaparecer?

a resposta é “não” porque LWC e Aura são uma combinação perfeita entre si. Você pode colocar o seu LWC e os componentes Aura na mesma página e você não vai notar qualquer diferença lá porque o seu LWC pode falar com o seu componente Aura e seu componente Aura também pode falar com o seu LWC. Você pode até incluir seu LWC dentro de um componente Aura onde o vice-versa não é verdadeiro porque você não deseja incluir uma estrutura personalizada dentro de uma estrutura genérica, que é um LWC.

Figura 4: Aura e interoperabilidade LWC

olhando para esta imagem, você notará que tanto o LWC quanto o Aura compartilharam os mesmos eventos do navegador, elementos padrão e mecanismo de renderização. A diferença é que o Aura foi construído no ECMAScript 5. O LWC é construído na versão mais recente do ECMAScript, que é o ECMAScript 7. Ambos compartilham os recursos essenciais do Salesforce, como Lighting Locker, Lightning Data Services e os componentes básicos do Lightning.

para resumir, o LWC é uma nova maneira de desenvolver seus componentes lightning. Isso não significa que a estrutura do componente Aura esteja indo a qualquer lugar. Você ainda pode usar seu modelo de programação Aura para criar seus componentes de IU se estiver mais familiarizado com a estrutura de componentes Aura. Mas se você está começando agora ou se está criando novos componentes a partir daqui, sugiro que você use o LWC porque ele vem com muitas vantagens diferentes – como melhor desempenho de componentes – e utiliza todos os seus recursos de pilha da web. É sempre melhor usar o LWC sobre o Aura para seus novos componentes, mas você não precisa migrar seus componentes Aura existentes para um LWC a partir de agora.

por onde começar?

para criar e desenvolver o LWC e usar seus poderosos recursos e benefícios de desempenho, você precisa configurar o Salesforce DX. Ao contrário dos componentes Aura, o desenvolvimento de componentes LWC no Console do desenvolvedor não é possível. Você precisa escrevê-lo localmente e, em seguida, empurrá-lo para sua organização. Fazendo isso, você precisará configurar seu ambiente de desenvolvedor. Você precisa de um conjunto de ferramentas como Visual Studio Code, Salesforce Command Line Interface e uma organização.

Aqui estão algumas etapas recomendadas:

1. Instale o VS Code e configure-o para o desenvolvimento do Salesforce. Você pode seguir este módulo Trailhead.
2. obtenha um código de exemplo fácil de entender para quase todos os casos de Uso aqui.
3. para mais amostras, visite aqui.
4. desenvolva um LWC você mesmo e tente seu código executando-o aqui.
5. mais importante, conclua o início com o LWC Trailmix.

estrutura do componente LWC

como é formado um LWC?

semelhante a um componente Aura, o conteúdo principal de um LWC também é HTML e JavaScript. Há Conteúdo Opcional Como CSS. Mas, além destes para LWC, um arquivo de configuração XML também é incluído, que define os valores de metadados para o componente.

Figura 5: estrutura de arquivo LWC

todos esses nomes de arquivo devem ser combinados com o nome do componente. A pasta e os arquivos devem seguir algumas regras de nomenclatura, como segue:

• Deve começar com uma letra minúscula
• Deve conter apenas caracteres alfanuméricos ou caracteres de sublinhado
• Deve ser exclusivo no namespace
• não Pode incluir espaços em branco
• não Pode terminar com um caractere de sublinhado
• não Pode conter um hífen (traço)

O LWC estrutura de arquivo ficaria assim:

Agora, vamos cobrir todos esses arquivos um por um:

HTML

• Tem uma raiz tag <modelo> que contém o componente HTML
• Quando compõe, o <modelo é substituído por <namespace-componente-nome>

JavaScript:

• A funcionalidade de importação declarado em um módulo, utilize a instrução de importação.
• para permitir que outro código use a funcionalidade em um módulo, use a instrução export.
• LightningElement é um wrapper personalizado do elemento HTML padrão e o estendemos no componente e exportamos.

Configuração:

• arquivo XML que define os metadados de configuração de valores para o componente
• Vamos definir <objectivos> para implementar componentes para páginas diferentes, como a página do Aplicativo, página de Registro, etc.

CSS:

• para estilizar um componente.
• a folha de estilo é aplicada automaticamente.

os arquivos que discutimos-como o componente construiria com esses looks?

interface do usuário do componente:

você pode tentar criar esse componente em sua configuração do VS code e implantá-lo em sua organização. Se você ainda não configurou seu código VS, não se preocupe. Salesforce também fornece um playground para LWC-você pode experimentar este componente aqui.

este é o melhor momento para começar com Lightning Web Components, que oferecem o poder do mais recente padrão da web, melhor desempenho e interoperabilidade com componentes Aura.

você pode consultar os links abaixo para saber mais sobre os Componentes da web do 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 o Autor

Sagar Zade é Associar Consultor Técnico em Perficient. Ele é um administrador certificado pela salesforce, Construtor de aplicativos, desenvolvedor de plataforma e desenvolvedor de plataforma certificado pela Vlocity. Ele está ansioso para aprender e explorar novas tecnologias sendo usadas no salesforce e animado para compartilhar o conhecimento.

Mais deste Autor