Scoprire i componenti Web Lightning

Obiettivi di apprendimento

Al completamento di questa unità, sarai in grado di:

Spiegare il modello di programmazione Componenti Web Lightning.
Indicare i vantaggi dell'uso dei componenti Web Lightning.
Trovare quello che serve per iniziare a sviluppare i componenti Web Lightning.

Una porta aperta sulla programmazione con gli standard per il Web

È il momento di unire le tue conoscenze di Salesforce alla familiarità con tecnologie standard come HTML, JavaScript e CSS per creare la prossima generazione di app Salesforce. Puoi utilizzare questi standard comuni per creare componenti per la tua organizzazione Salesforce mantenendo la compatibilità con i componenti Aura esistenti.

Il modello Componenti Web Lightning è incentrato sia sull'esperienza dello sviluppatore che su quella dell'utente. Poiché abbiamo aperto le porte alle tecnologie esistenti, puoi utilizzare le competenze che hai sviluppato al di fuori di Salesforce per creare i componenti Web Lightning. Hai tutto questo a disposizione senza dover rinunciare alle competenze che hai già sviluppato con i componenti Aura.

Hai notato una differenza nell'uso delle maiuscole nell'ultimo paragrafo? Se sì, hai un occhio acuto. Usiamo l'iniziale maiuscola per tutte le parole quando facciamo riferimento al modello di programmazione Componenti Web Lightning. Usiamo l'iniziale maiuscola solo per due delle tre parole quando facciamo riferimento ai componenti stessi come componenti Web Lightning.

Inoltre, il modello di programmazione Componenti Lightning che hai usato fino a oggi ora si chiama Componenti Aura. I componenti in sé si chiamano componenti Aura.

Prima di andare oltre

Devi avere una conoscenza di base dei progetti Salesforce DX e di Salesforce CLI. Dovrai anche utilizzare un'organizzazione correttamente configurata nel tuo account Trailhead e VS Code con il Salesforce Extension Pack (Pacchetto estensioni Salesforce). Per informazioni su tutti questi argomenti, completa Avvio rapido: Componenti Web Lightning.

Perché Componenti Web Lightning?

I browser moderni sono basati su standard Web e l'evoluzione degli standard migliora costantemente ciò che i browser sono in grado di presentare agli utenti. Vogliamo che tu possa trarre vantaggio da queste innovazioni.

Componenti Web Lightning utilizza gli standard principali relativi ai componenti Web e fornisce solo ciò che è necessario per assicurare prestazioni ottimali nei browser supportati da Salesforce. Poiché è basato su codice eseguito in modo nativo nei browser, Componenti Web Lightning è leggero e offre prestazioni eccezionali. La maggior parte del codice che scrivi è in linguaggio JavaScript e HTML standard.

Per te sarà più facile:

Trovare soluzioni in pagine comuni sul Web.
Trovare sviluppatori con le competenze e l'esperienza necessarie.
Utilizzare le esperienze di altri sviluppatori (anche su altre piattaforme).
Sviluppare più rapidamente.
Utilizzare l'incapsulamento completo per rendere i componenti più versatili.

E i componenti web non sono certo una novità. In realtà, i browser li creano da anni. Alcuni esempi sono <select>, <video>, <input> e tutti i tag che abbiano una funzione più ampia di quella di un contenitore. Questi elementi sono in realtà l'equivalente dei componenti web. Il nostro obiettivo è portare quel livello di integrazione nello sviluppo in Salesforce.

Creazione di un componente semplice

Il bello di aderire agli standard web è la semplicità. Non è necessario conoscere le peculiarità di un particolare framework. È sufficiente creare i componenti usando HTML, JavaScript e CSS. La creazione dei componenti Web Lightning è un processo semplice come contare fino a tre. Non è una battuta. È molto semplice. Crei (1) un file JavaScript, (2) un file HTML e, se vuoi, (3) un file CSS.

HTML fornisce la struttura per il componente.
JavaScript definisce la logica di business di base e la gestione degli eventi.
CSS fornisce l'aspetto, lo stile e l'animazione per il componente.

Queste sono le parti essenziali del componente.

Ecco un componente Web Lightning molto semplice che visualizza "Hello World" in un campo di input.

HTML

<template>

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

</template>

Il tag template è un elemento fondamentale del codice HTML di un componente. Ti permette di memorizzare pezzi di codice HTML.

JavaScript

import { LightningElement } from 'lwc'; 

export default class App extends LightningElement { 

  message = 'Hello World'; 

}

In seguito, ci occuperemo anche dei dettagli dell'istruzione import e della dichiarazione di classe.

CSS

input {

  color: blue;

}

I requisiti minimi sono un file HTML e un file JavaScript con lo stesso nome nella stessa cartella (a sua volta con un nome corrispondente). Distribuisci i file a un'organizzazione con alcuni metadati ed ecco fatto. Salesforce compila i file e si occupa automaticamente della costruzione dei componenti standard.

I componenti Web Lightning e i componenti Aura funzionano insieme

Ti stai chiedendo se puoi continuare a usare i tuoi componenti Aura? Certo che puoi. Puoi utilizzare i componenti Web Lightning senza rinunciare ai componenti esistenti. È probabile che alla fine eseguirai la migrazione dei componenti esistenti al modello Componenti Web Lightning, ma stiamo introducendo i componenti Web Lightning senza togliere nulla al supporto esistente dei componenti Aura. I componenti Aura e i componenti Web Lightning coesistono benissimo.

In realtà, i componenti Aura possono contenere componenti Web Lightning (ma non viceversa). Ma un'implementazione di soli componenti Web Lightning offre un incapsulamento completo e un'aderenza adattiva a standard comuni in evoluzione.

Cose interessanti da usare

Per sviluppare in modo efficiente i componenti Web Lightning, utilizza i seguenti strumenti e ambienti.

Dev Hub e organizzazioni vuote
Le organizzazioni vuote sono organizzazioni Salesforce usa e getta che supportano lo sviluppo e il testing. Dev Hub è una funzionalità che gestisce le organizzazioni vuote. Entrambi fanno parte del set di strumenti Salesforce DX. Salesforce DX è un set integrato di strumenti di sviluppo realizzato e supportato da Salesforce.
- Interfaccia a riga di comando (Salesforce CLI)
  Salesforce CLI fornisce un modo rapido per eseguire operazioni di creazione e configurazione di organizzazioni vuote e anche di distribuzione di componenti. Anche questo strumento fa parte di Salesforce DX.
- Libreria di componenti Lightning
  La guida di riferimento sui componenti Web Aura e Lightning e sul loro utilizzo è reperibile all'indirizzo https://developer.salesforce.com/docs/component-library/overview/components. Puoi visualizzare la libreria anche nell'istanza della tua organizzazione, all'indirizzo http://<MyDomainName>.lightning.force.com/docs/component-library. Se visualizzi la libreria tramite la tua istanza, vedrai solo la versione corretta per la tua organizzazione. E non appena li crei, anche i tuoi componenti personalizzati compariranno nella libreria.

GitHub
Condividiamo estensioni, esempi e altro ancora tramite repository GitHub. Crea un account GitHub per assicurarti di usufruire di queste offerte.
- Salesforce Extension Pack (Pacchetto estensioni Salesforce) per Visual Studio Code
  Ci siamo concentrati su Visual Studio come strumento di sviluppo, fornendo un ambiente integrato dove creare i componenti. Il Salesforce Extension Pack (Pacchetto estensioni Salesforce) per Visual Studio Code offre hint di codice, avvisi di lint e comandi incorporati: https://marketplace.visualstudio.com/items?itemName=salesforce.salesforcedx-vscode.
- Lightning Web Components Recipes
  Forniamo un repository GitHub per aiutarti a vedere come funzionano i componenti Web Lightning. Puoi clonare, manipolare e pubblicare questo insieme di esempi nella tua organizzazione vuota e vederli in azione. Trovi tutto all'indirizzo https://github.com/trailheadapps/lwc-recipes.
- Demo e-Bikes
  Questo repository GitHub è un altro ottimo modo per vedere come funzionano i componenti Web Lightning. La demo e-Bikes è un'implementazione end-to-end dei componenti Web Lightning per creare un'app. Prova questo esempio nella tua organizzazione vuota. Lo trovi all'indirizzo https://github.com/trailheadapps/ebikes-lwc.
- Servizio Lightning Data (LDS, Lightning Data Service)
  Puoi accedere ai dati e ai metadati di Salesforce tramite il servizio Lightning Data. I componenti Lightning di base che funzionano con i dati sono basati su LDS. Personalizza i tuoi componenti in modo da sfruttare il caching, il tracciamento delle modifiche, le prestazioni di LDS e altro ancora.
- Lightning Locker
  I componenti Web Lightning che appartengono a un solo spazio dei nomi sono protetti dai componenti che appartengono ad un altri spazi dei nomi tramite la sicurezza con Lightning Locker. Lightning Locker promuove anche best practice che migliorano la capacità di supporto del codice, consentendo l'accesso solo alle API supportate ed eliminando l'accesso agli elementi interni del framework non pubblicati.

Uno sguardo avanti

Benvenuti nel mondo dei componenti Web Lightning

Utilizzeremo la demo eBikes per vedere cosa puoi fare con i file HTML e JavaScript.