en introduktion till Lightning Web Components

i Salesforce är Lightning Web Components (LWC) en revolutionerande förändring i lightning platform programmeringsparadigm. Om du är ny på Lightning Platform och du har utvecklat lösningar utanför Salesforce med hjälp av HTML och JavaScript, så hittar du LWC är en bit av kakan. I den här bloggen kommer vi att täcka följande aspekter:

• Vad är LWC?
• varför LWC?
• vad sägs om Aura?
• var ska man börja från?
• LWC-struktur

Vad är Lightning Web Components?

LWC är en ny programmeringsmodell för att utveckla Salesforce lightning-komponenter. Det är ett användargränssnitt som är byggt med inbyggd HTML och modern JavaScript. Den använder grundläggande webbkomponentstandarder och utnyttjar anpassade element, mallar, dekoratörer, moduler, shadow DOM och andra nya språkkonstruktioner tillgängliga i ECMAScript 7 och därefter.

Figur 1: 2019 web stack

Lightning-komponenter kunde tidigare utvecklas med hjälp av aura component framework. Nu har vi ett nytt ramverk för att utveckla samma lightning-komponenter.

varför LWC?

vi måste förstå varför Salesforce har introducerat LWC där vi redan hade Aura Component framework. För detta måste vi gå tillbaka till 2014 och måste titta på denna 2014 webbstack.

i 2014, när Lightning Components framework lanserades tillsammans med Aura programming model, erbjöd webbstandarder endast en begränsad grund för den fulla stacken som utvecklare behöver för att bygga storskaliga webbapplikationer, dvs. en renderingsmotor, standardelement, händelser och ett kärnspråk (ECMAScript 5).

nyckelelementen som en komponentmodell, mallar, moduler och shadow DOM saknas alla i webbstandarderna.

Figur 2: 2014 webbstacken

detta innebär att webbstandarderna eller webbstacken 2014 inte var tillräckligt kraftfulla för att hjälpa oss att skapa gränssnittskomponenter. Samtidigt kom många olika ramar in i bilden som Angular, React och Aura. Alla dessa ramar kom med dessa saknade nyckelelement som vi behövde för att skapa UI-komponenter.

nu från 2014-2019 har det skett en hel del förbättringar i webbstacken eller den inbyggda webbläsarmotorn.

Figur 3: Web stack transformation

du kan se mallar, anpassade element och shadow DOM-moduler. De är alla en del av själva webbstacken. Det betyder att den senaste webbstacken är kraftfull nog för att hjälpa oss att skapa dessa UI-komponenter. Vi behöver inte ett tjockt ramlager däremellan, vilket kan skada vår komponentprestanda. Det är anledningen till att införa LWC-ramverket. De flesta funktionerna i LWC är en del av själva webbstacken, och bara några saker beror på ramarna nu. LWC kommer också med base lightning-komponenter, alla de 70 + baskomponenterna som ingår i Aura Component framework har konverterats till Lightning Web Components, och de är alla en del av LWC framework. Vi kan använda dessa baskomponenter för att designa i våra UI-komponenter.

med kraften i den senaste webbstacken kommer LWC med många olika fördelar jämfört med aura-komponenter enligt följande:

1. bättre prestanda
2. moderna webbstandarder
3. kompatibel med Aura-komponenter
4. snabbare laddningsplatser
5. bättre säkerhet, bättre testning och bättre webbläsarkompatibilitet
6. enkel utveckling

vad sägs om Aura?

du måste undra att eftersom LWC är här, vad kommer att hända med Aura? Går det bort?

svaret är “nej” eftersom LWC och Aura är en perfekt match för varandra. Du kan sätta din LWC och Aura komponenter på samma sida och du kommer inte att märka någon av skillnaden där eftersom din LWC kan prata med din Aura komponent och din Aura komponent kan också prata med din LWC. Du kan till och med inkludera din LWC i en Aura-komponent där vice versa inte är sant eftersom du inte vill inkludera en anpassad ram i en generisk ram, som är en LWC.

Figur 4: Aura och LWC interoperabilitet

om du tittar på den här bilden kommer du att märka att både LWC och Aura delade samma webbläsarhändelser, standardelement och renderingsmekanism. Skillnaden är att Aura byggdes på ECMAScript 5. LWC bygger på den senaste ECMAScript-versionen, som är ECMAScript 7. Båda delar Salesforce viktiga funktioner som Lighting Locker, Lightning Data Services och Base Lightning-komponenterna.

Sammanfattningsvis är LWC ett nytt sätt att utveckla dina lightning-komponenter. Det betyder inte att Aura Component framework går någonstans. Du kan fortfarande använda din Aura-programmeringsmodell för att skapa dina UI-komponenter om du är mer bekant med Aura Component framework. Men om du börjar just nu eller om du skapar nya komponenter härifrån, föreslår jag att du använder LWC eftersom det kommer med många olika fördelar – till exempel bättre komponentprestanda – och det använder alla dina webbstackfunktioner. Det är alltid bättre att använda LWC över Aura för dina nya komponenter, men du behöver inte migrera dina befintliga Aura-komponenter till en LWC från och med nu.

var ska man börja?

för att skapa och utveckla LWC och använda deras kraftfulla funktioner och prestandafördelar måste du konfigurera Salesforce DX. Till skillnad från Aura-komponenter är det inte möjligt att utveckla LWC-komponenter i utvecklarkonsolen. Du måste skriva det lokalt och sedan trycka det på din organisation. Om du gör detta måste du ställa in din utvecklarmiljö. Du behöver en uppsättning verktyg som Visual Studio Code, Salesforce Command Line Interface och en organisation.

här är några rekommenderade steg:

1. installera VS-kod och ställ in den för Salesforce-utveckling. Du kan följa den här Trailhead-modulen.
2. få lättförståelig exempelkod för nästan alla användningsfall här.
3. för fler prover, besök här.
4. utveckla en LWC själv och prova din kod genom att köra den här.
5. viktigast, slutföra komma igång med LWC Trailmix.

LWC komponentstruktur

hur bildas en LWC?

i likhet med en Aura-komponent är huvudinnehållet i en LWC också HTML och JavaScript. Det finns valfritt innehåll som CSS. Men förutom dessa för LWC ingår också en XML-konfigurationsfil som definierar metadatavärdena för komponenten.

Figur 5: LWC-filstruktur

alla dessa filnamn ska matchas med komponentnamnet. Mappen och filerna måste följa vissa namnregler, enligt följande:

• måste börja med en liten bokstav
• måste innehålla endast alfanumeriska eller understreck tecken
• måste vara unik i namnrymden
• kan inte innehålla blanksteg
• kan inte sluta med ett understreck
• kan inte innehålla ett understreck
• kan inte innehålla ett understreck

LWC-filstrukturen skulle se ut så här:

låt oss nu täcka alla dessa filer en efter en:

HTML

• har en rottagg < Mall> som innehåller din komponents HTML
• när den återges ersätts taggen <Mall> med < namnområde-komponentnamn>

JavaScript:

• om du vill importera funktioner som deklarerats i en modul använder du importdeklarationen.
• om du vill tillåta annan kod att använda funktionalitet i en modul använder du exportdeklarationen.
• LightningElement är ett anpassat omslag av standard HTML-elementet och vi utökar det i komponenten och exporten.

konfiguration:

• XML-fil som definierar metadatakonfigurationsvärdena för komponenten
• vi ställer in <mål> för att distribuera komponenter för olika sidor som appsidan, postsidan etc.

CSS:

• att forma en komponent.
• formatmallen tillämpas automatiskt.

filerna som vi har diskuterat – hur skulle komponenten bygga med dessa utseende?

Komponentgränssnitt:

du kan försöka bygga den här komponenten i din VS-kodinställning och distribuera den till din organisation. Om du inte har ställt in din VS-kod ännu, oroa dig inte. Salesforce tillhandahåller också en lekplats för LWC – du kan prova den här komponenten här.

Detta är den bästa tiden att börja med Lightning Web Components, som erbjuder kraften i den senaste webbstandarden, bättre prestanda och interoperabilitet med Aura Components.

du kan hänvisa till länkarna nedan för att lära dig mer om Lightning Web Components.

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 författaren

Sagar Zade är associerad teknisk konsult på Perficient. Han är en salesforce-certifierad administratör, appbyggare, Plattformsutvecklare och Vlocity-certifierad Plattformsutvecklare. Han är angelägen om att lära sig och utforska ny teknik som används i salesforce och glada att dela kunskapen.

mer från denna författare