Un’introduzione a Lightning Web Components

In Salesforce, Lightning Web Components (LWC) sono un cambiamento rivoluzionario nel paradigma di programmazione della piattaforma lightning. Se sei nuovo di Lightning Platform e hai sviluppato soluzioni al di fuori di Salesforce con l’aiuto di HTML e JavaScript, allora troverai che LWC è un pezzo di torta. In questo blog, ci occuperemo dei seguenti aspetti:

• Che cosa è LWC?
• Perché LWC?
• Che dire di Aura?
• Da dove cominciare?
• Struttura LWC

Cosa sono i componenti Lightning Web?

LWC è un nuovo modello di programmazione per sviluppare componenti Salesforce lightning. È un framework UI costruito utilizzando HTML nativo e JavaScript moderno. Utilizza gli standard dei componenti Web di base e sfrutta elementi personalizzati, modelli, decoratori, moduli, DOM shadow e altri nuovi costrutti linguistici disponibili in ECMAScript 7 e oltre.

Figura 1: 2019 web stack

I componenti Lightning in precedenza potevano essere sviluppati utilizzando aura component framework. Ora abbiamo un nuovo framework per sviluppare gli stessi componenti lightning.

Perché LWC?

Dobbiamo capire perché Salesforce ha introdotto LWC dove avevamo già il framework dei componenti Aura. Per questo, dobbiamo tornare al 2014 e abbiamo bisogno di dare un’occhiata a questo stack web 2014.

Nel 2014, quando il framework Lightning Components è stato lanciato insieme al modello di programmazione Aura, gli standard Web hanno offerto solo una base limitata per lo stack completo di cui gli sviluppatori hanno bisogno per costruire applicazioni Web su larga scala, ad es. un motore di rendering, elementi standard, eventi e un linguaggio di base (ECMAScript 5).

Gli elementi chiave come un modello di componente, modelli, moduli e DOM shadow mancano tutti dagli standard web.

Figura 2: 2014 web stack

Ciò significa che gli standard web o lo stack web nel 2014 non erano abbastanza potenti da aiutarci a creare componenti dell’interfaccia utente. Allo stesso tempo, molti quadri diversi sono entrati in scena come Angular, React e Aura. Tutti questi framework sono dotati di questi elementi chiave mancanti di cui avevamo bisogno per creare componenti dell’interfaccia utente.

Ora dal 2014-2019, ci sono stati molti miglioramenti nello stack web o nel motore del browser Web nativo.

Figura 3: trasformazione dello stack web

È possibile visualizzare i modelli, gli elementi personalizzati e i moduli DOM shadow. Tutti fanno parte dello stack web stesso. Ciò significa che l’ultimo stack web è abbastanza potente da aiutarci a creare questi componenti dell’interfaccia utente. Non abbiamo bisogno di uno spesso strato di framework intermedio, che potrebbe danneggiare le prestazioni dei nostri componenti. Questa è la ragione dietro l’introduzione del framework LWC. La maggior parte delle funzionalità di LWC fanno parte dello stack web stesso e solo alcune cose dipendono dai framework ora. LWC viene fornito anche con componenti lightning base, tutti quei 70 + componenti di base che fanno parte del framework componenti Aura sono stati convertiti in componenti Lightning Web, e tutti fanno parte del framework LWC. Possiamo utilizzare questi componenti di base per progettare nei nostri componenti dell’interfaccia utente.

Con la potenza dell’ultimo stack web, LWC offre molti vantaggi diversi rispetto ai componenti aura come segue:

1. Migliori prestazioni
2. Standard web moderni
3. Compatibile con i componenti Aura
4. Siti di caricamento più veloci
5. Migliore sicurezza, test migliori e migliore compatibilità del browser
6. Facilità di sviluppo

Che dire di Aura?

Ti starai chiedendo che dal momento che LWC è qui, cosa succederà con Aura? Sta andando via?

La risposta è “no” perché LWC e Aura sono una corrispondenza perfetta l’uno per l’altro. Puoi mettere il tuo LWC e i componenti Aura sulla stessa pagina e non noterai alcuna differenza perché il tuo LWC può parlare con il tuo componente Aura e il tuo componente Aura può anche parlare con il tuo LWC. Puoi persino includere il tuo LWC all’interno di un componente Aura in cui il viceversa non è vero perché non vuoi includere un framework personalizzato all’interno di un framework generico, che è un LWC.

Figura 4: Interoperabilità Aura e LWC

Guardando questa immagine, noterai che sia LWC che Aura condividevano gli stessi eventi del browser, elementi standard e meccanismo di rendering. La differenza è che Aura è stato costruito su ECMAScript 5. LWC è costruito sull’ultima versione di ECMAScript, che è ECMAScript 7. Entrambi condividono le funzionalità essenziali di Salesforce come Lighting Locker, Lightning Data Services e i componenti Lightning di base.

Per riassumere, LWC è un nuovo modo per sviluppare i componenti lightning. Ciò non significa che il framework dei componenti Aura stia andando da nessuna parte. È comunque possibile utilizzare il modello di programmazione Aura per creare i componenti dell’interfaccia utente se si ha maggiore familiarità con il framework dei componenti Aura. Ma se stai iniziando proprio ora o se stai creando nuovi componenti da qui in poi, ti suggerirei di usare LWC perché ha molti vantaggi diversi, come le migliori prestazioni dei componenti, e utilizza tutte le funzionalità dello stack web. È sempre meglio utilizzare LWC su Aura per i nuovi componenti, ma non è necessario migrare i componenti Aura esistenti in un LWC a partire da ora.

Da dove cominciare?

Per creare e sviluppare LWC e utilizzare le loro potenti funzionalità e vantaggi in termini di prestazioni, è necessario configurare Salesforce DX. A differenza dei componenti Aura, lo sviluppo di componenti LWC nella developer console non è possibile. Devi scriverlo localmente e poi spingerlo alla tua organizzazione. In questo modo, è necessario impostare il proprio ambiente di sviluppo. Hai bisogno di un set di strumenti come Visual Studio Code, Salesforce Command Line Interface e un’organizzazione.

Ecco alcuni passaggi consigliati:

1. Installa il codice VS e configuralo per lo sviluppo di Salesforce. È possibile seguire questo modulo Trailhead.
2. Ottieni un codice di esempio facile da capire per quasi tutti i casi d’uso qui.
3. Per ulteriori campioni, visitare qui.
4. Sviluppa tu stesso un LWC e prova il tuo codice eseguendolo qui.
5. Soprattutto, completa la Guida introduttiva con LWC Trailmix.

Struttura dei componenti LWC

Come si forma un LWC?

Simile a un componente Aura, i contenuti principali di un LWC sono anche HTML e JavaScript. C’è contenuto opzionale come CSS. Ma poi oltre a questi per LWC, è incluso anche un file di configurazione XML, che definisce i valori dei metadati per il componente.

Figura 5: Struttura dei file LWC

Tutti questi nomi di file devono essere abbinati al nome del componente. La cartella e i file devono seguire alcune regole di denominazione, come segue:

• Deve iniziare con una lettera minuscola
• Deve contenere solo lettere o caratteri di sottolineatura
• Deve essere univoco nel namespace
• non Può includere spazi
• non Possono terminare con un carattere di sottolineatura
• non Può contenere un trattino (dash)

IWC struttura del file sarà simile a questa:

Ora, cerchiamo di coprire tutti i file uno per uno:

HTML

• È un tag principale <modello> che contiene il componente HTML
• Quando si esegue il rendering, il <modello> è sostituita con <namespace-componente-nome>

JavaScript:

• Per l’importazione di funzionalità dichiarate in un modulo, è possibile utilizzare l’istruzione import.
• Per consentire ad un altro codice di utilizzare la funzionalità in un modulo, utilizzare l’istruzione export.
• LightningElement è un wrapper personalizzato dell’elemento HTML standard e lo estendiamo nel componente ed esportiamo.

Configurazione:

• File XML che definisce i valori di configurazione dei metadati per il componente
• Impostiamo < target> per distribuire componenti per pagine diverse come la pagina dell’app, la pagina dei record, ecc.

CSS:

• Per modellare un componente.
• Il foglio di stile viene applicato automaticamente.

I file che abbiamo discusso-come sarebbe il componente costruire con questi sguardi?

Componente UI:

Puoi provare a creare questo componente nella configurazione del codice VS e distribuirlo alla tua organizzazione. Se non hai ancora configurato il tuo codice VS, non preoccuparti. Salesforce fornisce anche un parco giochi per LWC-puoi provare questo componente qui.

Questo è il momento migliore per iniziare con i componenti Lightning Web, che offrono la potenza del più recente standard web, prestazioni migliori e interoperabilità con i componenti Aura.

È possibile fare riferimento ai seguenti link per ulteriori informazioni sui componenti Lightning Web.

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

Circa l’Autore

Sagar Zade è Associato Consulente Tecnico Perficient. È un amministratore certificato salesforce, un costruttore di app, uno sviluppatore di piattaforme e uno sviluppatore di piattaforme certificato Vlocity. È desideroso di apprendere ed esplorare le nuove tecnologie utilizzate in salesforce ed entusiasta di condividere le conoscenze.

Più da questo autore