een introductie tot Lightning Web Components

in Salesforce is Lightning Web Components (LWC) een revolutionaire verandering in het lightning platform programmeer paradigma. Als je nieuw bent bij Lightning Platform en je hebt oplossingen ontwikkeld buiten Salesforce met behulp van HTML en JavaScript, dan zul je merken dat LWC een fluitje van een cent is. In deze blog zullen we de volgende aspecten behandelen:

• Wat is LWC?
• waarom LWC?
• hoe zit het met Aura?
• waar moet ik beginnen?
• LWC-structuur

Wat zijn Lightning-webcomponenten?

LWC is een nieuw programmeermodel voor de ontwikkeling van Salesforce lightning-componenten. Het is een UI framework dat is gebouwd met behulp van native HTML en moderne JavaScript. Het maakt gebruik van core web component normen en maakt gebruik van aangepaste elementen, sjablonen, decorateurs, modules, schaduw DOM, en andere nieuwe taal constructies beschikbaar in ECMAScript 7 en daarbuiten.

figuur 1: 2019 web stack

Lightning-componenten konden eerder worden ontwikkeld met behulp van het aura component framework. Nu hebben we een nieuw kader om dezelfde bliksemcomponenten te ontwikkelen.

waarom LWC?

we moeten begrijpen waarom Salesforce LWC heeft geïntroduceerd waar we al het Aura Component framework hadden. Voor deze, we moeten teruggaan naar 2014 en moeten een kijkje nemen op deze 2014 web stack.

in 2014, toen het Lightning Components framework samen met het aura programmeermodel werd gelanceerd, bood web standards slechts een beperkte basis voor de volledige stack die ontwikkelaars nodig hebben om grootschalige webapplicaties te bouwen, d.w.z. een rendering engine, standaard elementen, gebeurtenissen, en een kerntaal (ECMAScript 5).

de belangrijkste elementen zoals een componentmodel, sjablonen, modules en schaduwdom ontbreken allemaal in de webstandaarden.

Figuur 2: 2014 web stack

dit betekent dat de webstandaarden of de web stack in 2014 niet krachtig genoeg was om ons te helpen UI-componenten te maken. Tegelijkertijd kwamen veel verschillende kaders in beeld zoals hoekig, React en Aura. Al deze frameworks kwamen met deze ontbrekende sleutelelementen die we nodig hadden om UI-componenten te maken.

vanaf 2014-2019 is er veel verbetering in de web stack of de native web browser engine.

Figuur 3: webstack transformatie

u kunt de templates, aangepaste elementen en schaduw DOM modules zien. Ze maken allemaal deel uit van de web stack zelf. Dit betekent dat de nieuwste web stack krachtig genoeg is om ons te helpen deze UI-componenten te maken. We hebben geen dikke kaderlaag nodig die onze prestaties van componenten kan schaden. Dat is de reden achter de introductie van het LWC framework. De meeste functies van LWC zijn onderdeel van de web stack zelf, en slechts een paar dingen zijn afhankelijk van de frameworks nu. LWC wordt ook geleverd met basis lightning componenten, al die 70 + basiscomponenten die deel uitmaken van het Aura Component framework zijn omgezet in Lightning Web componenten, en ze maken allemaal deel uit van het LWC framework. We kunnen deze basiscomponenten gebruiken om onze UI-componenten te ontwerpen.

met de kracht van de nieuwste web stack heeft LWC veel verschillende voordelen ten opzichte van Aura-componenten.:

1. betere prestaties
2. moderne webstandaarden
3. Compatibel met aura-componenten
4. snellere laadsites
5. betere beveiliging, betere testen en betere browsercompatibiliteit
6. Ontwikkelingsgemak

hoe zit het met Aura?

u vraagt zich vast af wat er gaat gebeuren met Aura, aangezien LWC hier is? Gaat het weg?

het antwoord is “nee” omdat LWC en Aura perfect bij elkaar passen. U kunt uw LWC en de Aura componenten op dezelfde pagina zetten en u zult daar niets van het verschil merken omdat uw LWC met uw Aura Component kan praten en uw Aura Component ook met uw LWC kan praten. U kunt zelfs uw LWC in een aura-Component opnemen waar het vice versa niet waar is omdat u geen aangepast framework wilt opnemen in een generiek framework, dat een LWC is.

Figuur 4: Aura en LWC interoperabiliteit

Als u naar deze afbeelding kijkt, zult u merken dat zowel LWC als Aura dezelfde browsergebeurtenissen, standaardelementen en renderings-mechanisme hebben gedeeld. Het verschil is dat Aura werd gebouwd op ECMAScript 5. LWC is gebouwd op de nieuwste ECMAScript-versie, dat is ECMAScript 7. Beide delen de essentiële functies van Salesforce, zoals Lighting Locker, Lightning Data Services en de basis Lightning componenten.

om samen te vatten, LWC is een nieuwe manier om uw lightning componenten te ontwikkelen. Het betekent niet dat de Aura Component framework gaat ergens heen. U kunt nog steeds uw aura programmeermodel gebruiken om uw UI-componenten te maken als u meer bekend bent met het Aura Component framework. Maar als u net begint of als u nieuwe componenten vanaf hier aan het maken bent, stel ik voor dat u LWC gebruikt, omdat het wordt geleverd met een heleboel verschillende voordelen – zoals betere prestaties van componenten – en het maakt gebruik van al uw web stack functies. Het is altijd beter om LWC over Aura te gebruiken voor je nieuwe componenten, maar je hoeft je bestaande Aura componenten vanaf nu niet te migreren naar een LWC.

waar moet ik beginnen?

om LWC te creëren en te ontwikkelen en hun krachtige functies en prestatievoordelen te gebruiken, moet u Salesforce DX instellen. In tegenstelling tot Aura componenten, het ontwikkelen van LWC componenten in de developer console is niet mogelijk. Je moet het lokaal schrijven en dan pushen naar je org. Door dit te doen, je nodig hebt om het opzetten van uw Ontwikkelaar omgeving. Je hebt een set tools nodig zoals Visual Studio Code, Salesforce Command Line Interface en een Org.

hier zijn enkele aanbevolen stappen:

1. installeer VS Code en stel deze in voor Salesforce Development. U kunt deze Trailhead module volgen.
2. Hier vindt u gemakkelijk te begrijpen voorbeeldcode voor bijna alle use cases.
3. voor meer monsters, bezoek hier.
4. ontwikkel zelf een LWC en probeer je code door het hier uit te voeren.
5. het belangrijkste is, voltooi de aan de slag met LWC Trailmix.

LWC-component structuur

Hoe wordt een LWC gevormd?

net als een aura-Component zijn de belangrijkste inhoud van een LWC ook HTML en JavaScript. Er is Optionele Inhoud zoals CSS. Maar naast deze voor LWC, is er ook een XML configuratie bestand opgenomen, die de metadata waarden voor de component definieert.

Figuur 5: LWC-bestandsstructuur

al deze bestandsnamen moeten overeenkomen met de naam van de component. De map en bestanden moeten een aantal naamgevingsregels volgen, als volgt:

• moet beginnen met een kleine letter
• mag alleen alfanumerieke tekens bevatten
• moet uniek zijn in de naamruimte
• kan geen witruimte bevatten
• kan niet eindigen met een underscore
• kan geen koppelteken bevatten (streepje)

de bestandsstructuur van LWC zou er zo uitzien:

laten we al deze dossiers één voor één behandelen.:

HTML

• heeft een root-tag <sjabloon> die de HTML
• van uw component bevat wanneer het wordt weergegeven, wordt de tag <sjabloon> vervangen door <namespace-component-name>

JavaScript:

• als u de in een module gedeclareerde functionaliteit wilt importeren, gebruikt u het import statement.
• om andere code toe te staan functionaliteit in een module te gebruiken, gebruikt u het export statement.
• LightningElement is een aangepaste wrapper van het standaard HTML-element en we breiden het uit in de component en exporteren.

configuratie:

• XML-bestand dat de metagegevensconfiguratiewaarden definieert voor het component
• we stellen <doelen> in om componenten te implementeren voor verschillende pagina ‘ s zoals de App-pagina, recordpagina, enz.

CSS:

• om een component te stylen.
• het typogram wordt automatisch toegepast.

de bestanden die we hebben besproken-hoe zou de component te bouwen met deze looks?

Component UI:

u kunt proberen dit onderdeel te bouwen in uw VS-code setup en implementeren op uw org. Als u uw VS-code nog niet hebt ingesteld, maak je dan geen zorgen. Salesforce biedt ook een speeltuin voor LWC-je kunt deze component hier proberen.

Dit is het beste moment om te beginnen met Lightning-webcomponenten, die de kracht van de nieuwste webstandaard, betere prestaties en interoperabiliteit met Aura-componenten bieden.

u kunt verwijzen naar de onderstaande links voor meer informatie over Lightning webcomponenten.

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

Over de Auteur

Sagar Zade is Universitair Technisch Consultant bij Perficient. Hij is een salesforce certified Administrator, App Builder, Platform Developer, en Vlocity certified Platform Developer. Hij is enthousiast om te leren en te verkennen van nieuwe technologieën die worden gebruikt in salesforce en enthousiast om de kennis te delen.

meer van deze auteur