en introduktion til Lightning-komponenter

i Salesforce er Lightning-komponenter en revolutionerende ændring i Lightning-platformens programmeringsparadigme. Hvis du er ny til Lightning Platform, og du har udviklet løsninger uden for Salesforce ved hjælp af HTML og JavaScript, så vil du finde LVC er et stykke kage. I denne blog, vi vil dække følgende aspekter:

• Hvad er LVC?
• hvorfor LV?
• hvad med Aura?
• hvor skal man starte fra?
• LVC struktur

Hvad er lynnet komponenter?

LVC er en ny programmeringsmodel til udvikling af Salesforce lightning-komponenter. Det er en UI ramme, der er bygget ved hjælp af native HTML og moderne JavaScript. Det bruger centrale netkomponentstandarder og udnytter brugerdefinerede elementer, skabeloner, dekoratører, moduler, skygge DOM og andre nye sprogkonstruktioner, der er tilgængelige i ECMAScript 7 Og videre.

Figur 1: 2019 netstabel

Lynkomponenter kunne tidligere udvikles ved hjælp af aura-komponentrammen. Nu har vi en ny ramme til at udvikle de samme lynkomponenter.

hvorfor LV?

vi er nødt til at forstå, hvorfor Salesforce har introduceret LVC, hvor vi allerede havde Aura-Komponentrammen. Til dette er vi nødt til at gå tilbage til 2014 og skal se på denne 2014-stack.

i 2014, da Lightning Components-rammen blev lanceret sammen med Aura-programmeringsmodellen, tilbød internetstandarder kun et begrænset fundament for den fulde stak, som udviklere har brug for til at bygge store internetapplikationer, dvs. en gengivelsesmotor, standardelementer, begivenheder og et kernesprog (ECMAScript 5).

nøgleelementerne som en komponentmodel, skabeloner, moduler og skygge DOM mangler alle fra internetstandarderne.

figur 2: 2014 internetstabel

dette betyder, at internetstandarderne eller internetstakken i 2014 ikke var stærke nok til at hjælpe os med at oprette UI-komponenter. Samtidig kom mange forskellige rammer ind i billedet som Angular, React og Aura. Alle disse rammer kom med disse manglende nøgleelementer, som vi havde brug for for at oprette UI-komponenter.

nu fra 2014-2019 har der været en masse forbedringer i netstakken eller den oprindelige netsøgermotor.

figur 3: stack transformation

du kan se skabeloner, brugerdefinerede elementer og skygge DOM moduler. De er alle en del af selve nettet stakken. Dette betyder, at den nyeste internetstak er kraftig nok til at hjælpe os med at oprette disse UI-komponenter. Vi har ikke brug for et tykt rammelag imellem, hvilket kan skade vores komponentydelse. Det er grunden til at indføre LVD-rammen. De fleste af funktionerne i LVC er en del af selve netstakken, og kun få ting afhænger af rammerne nu. Alle de 70+ basiskomponenter, der er en del af Aura-Komponentrammen, er blevet konverteret til Lynbanekomponenter, og de er alle en del af LVC-rammen. Vi kan bruge disse basiskomponenter til at designe i vores UI-komponenter.

med kraften i den nyeste netstabel kommer LVC med mange forskellige fordele i forhold til aura-komponenter som følger:

1. bedre ydelse
2. moderne internetstandarder
3. kompatibel med Aura-komponenter
4. hurtigere indlæsningssteder
5. bedre sikkerhed, bedre test og bedre bro. ser-Kompatibilitet
6. let udvikling

hvad med Aura?

du må undre dig over, at siden LVC er her, hvad vil der ske med Aura? Går det væk?

svaret er “nej”, fordi LVC og Aura er et perfekt match for hinanden. Du kan placere din Aura-komponent på samme side, og du vil ikke bemærke nogen af forskellen der, fordi din Aura-komponent kan tale med din Aura-komponent, og din Aura-komponent også kan tale med din aura-komponent. Du kan endda inkludere din LVC i en Aura-komponent, hvor omvendt ikke er sandt, fordi du ikke ønsker at inkludere en brugerdefineret ramme inden for en generisk ramme, som er en LVC.

Figur 4: Aura og LVC interoperabilitet

når du ser på dette billede, vil du bemærke, at både LVC og Aura delte de samme bro.serhændelser, standardelementer og gengivelsesmekanisme. Forskellen er, at Aura blev bygget på ECMAScript 5. ECMAScript er bygget på den nyeste ECMAScript version, som er ECMAScript 7. Begge deler Salesforce væsentlige funktioner som Lighting Locker, Lightning Data Services, og basen Lightning komponenter.

for at opsummere er LVC en ny måde at udvikle dine lynkomponenter på. Det betyder ikke, at Aura-Komponentrammen går overalt. Du kan stadig bruge din Aura-programmeringsmodel til at oprette dine UI-komponenter, hvis du er mere fortrolig med Aura-Komponentrammen. Men hvis du starter lige nu, eller hvis du opretter nye komponenter herfra, vil jeg foreslå, at du bruger LVC, fordi det kommer med mange forskellige fordele – som bedre komponentydelse – og det bruger alle dine stack-funktioner. Det er altid bedre at bruge Aura over Aura til dine nye komponenter, men du behøver ikke at migrere dine eksisterende Aura-komponenter til en Aura fra nu af.

hvor skal man starte?

hvis du vil oprette og udvikle LVC og bruge deres kraftfulde funktioner og ydelsesfordele, skal du konfigurere Salesforce. I modsætning til Aura-komponenter er det ikke muligt at udvikle LVC-komponenter i udviklerkonsollen. Du skal skrive det lokalt og derefter skubbe det til din organisation. Hvis du gør dette, skal du oprette dit udviklermiljø. Du har brug for et sæt værktøjer som Visual Studio Code, Salesforce kommandolinjegrænseflade og en organisation.

her er nogle anbefalede trin:

1. installer VS kode og sæt den op til Salesforce udvikling. Du kan følge dette Trailhead modul.
2. få letforståelig prøvekode til næsten alle brugssager her.
3. For flere prøver, besøg her.
4. udvikle en LVK selv og prøv din kode ved at køre den her.
5. det vigtigste er, at du er færdig med at komme i gang.

LVC-komponentstruktur

hvordan dannes en LVC?

i lighed med en Aura-komponent er hovedindholdet i en LVC også HTML og JavaScript. Der er valgfrit indhold som CSS. Men ud over disse er der også inkluderet en konfigurationsfil, der definerer metadataværdierne for komponenten.

figur 5: LVC-filstruktur

alle disse filnavne skal matches med komponentnavnet. Mappen og filerne skal følge nogle navngivningsregler som følger:

• skal begynde med et lille bogstav
• må kun indeholde alfanumeriske eller understregningstegn
• skal være unik i navneområdet
• kan ikke indeholde mellemrum
• kan ikke slutte med en understregning
• kan ikke indeholde et bindestreg (bindestreg)

LVC-filstrukturen ville se sådan ud:

lad os nu dække alle disse filer en efter en:

HTML

• har et rodmærke <skabelon> der indeholder din komponents HTML
• når det gengives, erstattes <skabelon> tag med < navneområde-komponentnavn>

JavaScript:

• hvis du vil importere funktionalitet, der er angivet i et modul, skal du bruge importerklæringen.
• hvis du vil tillade, at anden kode bruger funktionalitet i et modul, skal du bruge eksporterklæringen.
• LightningElement er en brugerdefineret indpakning af standard HTML-elementet, og vi udvider det i komponenten og eksporterer.

konfiguration:

• metadatakonfigurationsværdierne for komponenten
• vi indstiller <mål> for at implementere komponenter til forskellige sider som App-siden, Postsiden osv.

CSS:

• at style en komponent.
• stilarket anvendes automatisk.

de filer – vi har diskuteret – hvordan ville komponenten bygge med disse udseende?

komponent UI:

du kan prøve at opbygge denne komponent i din VS-kodeopsætning og implementere den til din organisation. Hvis du ikke har konfigureret din VS-kode endnu, skal du ikke bekymre dig. Salesforce tilbyder også en legeplads til LVC – du kan prøve denne komponent her.

dette er det bedste tidspunkt at starte med Lightning-netkomponenter, der tilbyder kraften i den nyeste netstandard, bedre ydelse og interoperabilitet med Aura-komponenter.

du kan se nedenstående links for at lære mere om Lightning-komponenter.

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

om forfatteren

Sagar er associeret teknisk konsulent hos Perficient. Han er salesforce – certificeret Administrator, appbygger, Platformudvikler og Vlocity-certificeret Platformudvikler. Han er ivrig efter at lære og udforske nye teknologier, der bruges i salesforce og glade for at dele viden.

mere fra denne forfatter