En Introduksjon Til Lightning Web Components

I Salesforce Er Lightning Web Components (LWC) en revolusjonerende endring i programmeringsparadigmet for lightning platform. Hvis Du er ny På Lightning Platform, og du har utviklet løsninger utenfor Salesforce ved HJELP AV HTML og JavaScript, vil DU finne LWC er et stykke kake. I denne bloggen vil vi dekke følgende aspekter:

• Hva ER LWC?
• Hvorfor LWC?
• Hva med Aura?
• Hvor skal du begynne fra?
• LWC structure

Hva Er Lightning Web Components?

LWC er en ny programmeringsmodell for å utvikle Salesforce lightning-komponenter. DET ER EN UI rammeverk som er bygget ved hjelp av innfødte HTML og moderne JavaScript. Den bruker kjerne web komponent standarder og utnytter tilpassede elementer, maler, dekoratører, moduler, shadow DOM, og andre nye språkkonstruksjoner tilgjengelig I ECMAScript 7 og utover.

Figur 1: 2019 web stack

Lightning-Komponenter som tidligere kunne utvikles ved hjelp av aura component framework. Nå har vi et nytt rammeverk for å utvikle de samme lightning-komponentene.

Hvorfor LWC?

Vi må forstå hvorfor Salesforce har introdusert LWC der Vi allerede hadde Aura Component framework. For dette må vi gå tilbake til 2014 og trenger å se på denne 2014 webstakken.

i 2014, da Lightning Components framework ble lansert sammen Med Aura-programmeringsmodellen, tilbød webstandarder bare et begrenset grunnlag for hele stabelen som utviklere trenger for å bygge store webapplikasjoner, dvs. en gjengivelsesmotor, standardelementer, hendelser og et kjernespråk (ECMAScript 5).

nøkkelelementene som en komponentmodell, maler, moduler OG shadow DOM mangler alle fra webstandardene.

Figur 2: 2014 webstack

dette betyr at webstandardene eller webstakken i 2014 ikke var kraftige nok til å hjelpe oss med å lage UI-komponenter. Samtidig kom mange forskjellige rammer inn i bildet som Angular, React og Aura. Alle disse rammene kom med disse manglende nøkkelelementene som vi trengte for å lage UI-komponenter.

nå fra 2014-2019 har det vært mye forbedring i webstakken eller den innfødte nettlesermotoren.

Figur 3: web stack transformasjon

du kan se maler, egendefinerte elementer OG skygge DOM moduler. De er alle en del av webstakken selv. Dette betyr at den nyeste webstakken er kraftig nok til å hjelpe oss med å lage DISSE UI-komponentene. Vi trenger ikke et tykt rammelag i mellom, noe som kan skade komponentytelsen vår. Det er grunnen til å introdusere LWC-rammen. De fleste funksjonene I LWC er en del av webstakken selv,og bare noen få ting avhenger av rammene nå. LWC kommer også med base lightning-komponenter, alle de 70 + basekomponentene som er en del Av Aura Component framework, er konvertert Til Lightning Web Components, og de er alle en del AV LWC-rammen. Vi kan bruke disse basekomponentene til å designe I VÅRE UI-komponenter.

med kraften i den nyeste webstakken kommer LWC med mange forskjellige fordeler over aura-komponenter som følger:

1. Bedre ytelse
2. Moderne webstandarder
3. Kompatibel Med Aura-komponenter
4. Raskere lastesider
5. Bedre sikkerhet, bedre testing og bedre nettleserkompatibilitet
6. Enkel utvikling

Hva med Aura?

du må lure på at SIDEN LWC er her, hva kommer til å skje Med Aura? Går det bort?

svaret er “nei” fordi LWC og Aura er en perfekt match for hverandre. Du kan sette DIN Lwc Og Aura Komponenter på samme side, og du vil ikke merke noen av forskjellen der fordi DIN LWC kan snakke Med Din Aura Komponent og Din Aura Komponent kan også snakke MED DIN LWC. Du kan til og MED inkludere LWC i En Aura-Komponent der omvendt ikke er sant fordi du ikke vil inkludere et tilpasset rammeverk i et generisk rammeverk, som er EN Lwc.

Figur 4: Aura og Lwc interoperabilitet

Når du Ser på dette bildet, vil du legge merke til at BÅDE Lwc og Aura delte samme nettleserhendelser, standardelementer og gjengivelsesmekanisme. Forskjellen er At Aura ble bygget På ECMAScript 5. LWC er bygget på den nyeste ECMAScript-versjonen, Som Er ECMAScript 7. Begge deler Salesforce viktige funksjoner som Lighting Locker, Lightning Data Services, Og Base Lightning Komponenter.

for å oppsummere ER LWC en ny måte å utvikle lightning-komponentene på. Det betyr ikke At Aura Component framework går hvor som helst. Du kan fortsatt bruke Din Aura programmeringsmodell til å lage DINE UI-komponenter hvis Du er mer kjent med Aura Component framework. Men hvis du starter akkurat nå, eller hvis du lager nye komponenter herfra, vil jeg foreslå at du bruker LWC fordi den kommer med mange forskjellige fordeler-for eksempel bedre komponentytelse-og den bruker alle webstackfunksjonene dine. Det er alltid bedre å bruke LWC over Aura for dine nye komponenter, men du trenger ikke å migrere dine eksisterende Aura-Komponenter til EN LWC fra nå av.

Hvor skal du begynne?

hvis Du vil opprette OG utvikle LWC og bruke de kraftige funksjonene og ytelsesfordelene deres, må Du konfigurere Salesforce DX. I motsetning Til Aura-Komponenter er det ikke mulig å utvikle lwc-komponenter i utviklerkonsollen. Du må skrive det lokalt og deretter skyve det til din org. Når du gjør dette, må du sette opp utviklermiljøet ditt. Du trenger et sett med verktøy som Visual Studio Code, Salesforce Command Line Interface og en Org.

her er noen anbefalte trinn:

1. Installer VS-Kode og sett den opp for Salesforce-Utvikling. Du kan følge Denne Trailhead modulen.
2. Få enkel å forstå eksempelkode for nesten alle brukstilfeller her.
3. for flere prøver, besøk her.
4. Utvikle EN LWC selv og prøv koden din ved å kjøre den her.
5. Viktigst, fullfor Kom I Gang med Lwc Trailmix.

lwc komponentstruktur

hvordan dannes EN LWC?

i Likhet Med En Aura-Komponent er hovedinnholdet I EN LWC OGSÅ HTML og JavaScript. Det er valgfritt innhold som CSS. Men i tillegg til DISSE FOR LWC, er EN XML-konfigurasjonsfil også inkludert, som definerer metadataverdiene for komponenten.

Figur 5: lwc filstruktur

alle disse filnavnene skal samsvare med komponentnavnet. Mappen og filene må følge noen navngivningsregler, som følger:

• må begynne med små bokstaver
• må bare inneholde alfanumeriske eller understrekingstegn
• Må være unik i navneområdet
• kan ikke inkludere mellomrom
• kan ikke slutte med understrekingstegn
• Kan ikke inneholde en bindestrek (bindestrek))

LWC – filstrukturen vil se slik ut:

nå, la oss dekke alle disse filene en etter en:

HTML

• har en rotkode < mal > som inneholder komponentens HTML
• når den gjengis, erstattes <mal> taggen med <namespace-component-name>

JavaScript:

• hvis du vil importere funksjonalitet deklarert i en modul, bruker du import-setningen.
• hvis du vil tillate at annen kode bruker funksjonalitet i en modul, bruker du export-setningen.
• LightningElement Er en tilpasset innpakning av standard HTML-elementet, og vi utvider det i komponenten og eksporterer.

Konfigurasjon:

• XML-fil som definerer metadatakonfigurasjonsverdiene for komponenten
• vi setter < mål> for å distribuere komponenter for forskjellige sider som Appsiden, Postsiden, etc.

CSS:

• å style en komponent.
• stilarket brukes automatisk.

filene som vi har diskutert-hvordan ville komponenten bygge med disse utseende?

Komponentgrensesnitt:

Du kan prøve å bygge denne komponenten I VS-kodeoppsettet og distribuere den til organisasjonen din. Hvis DU ikke har satt OPP VS-koden din ennå, så vær ikke bekymret. Salesforce gir også en lekeplass FOR LWC – du kan prøve denne komponenten her.

Dette er den beste tiden å starte Med Lightning Web Components, som tilbyr kraften til den nyeste webstandarden, bedre ytelse og interoperabilitet med Aura Components.

du kan se koblingene nedenfor for å lære 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 Forfatteren

Sagar Zade Er Tilknyttet Teknisk Konsulent Hos Perficient. Han er salesforce – Sertifisert Administrator, Appbygger, Plattformutvikler og Vlocity-sertifisert Plattformutvikler. Han er ivrig etter å lære og utforske nye teknologier som brukes i salesforce og glade for å dele kunnskapen.

Mer fra Denne Forfatteren