Bevezetés A Lightning Web Components

a Salesforce-ban a Lightning Web Components (LWC) forradalmi változás a lightning platform programozási paradigmájában. Ha még nem ismeri a Lightning platformot, és a Salesforce-on kívüli megoldásokat fejlesztett HTML és JavaScript segítségével, akkor az LWC egy darab sütemény. Ebben a blogban a következő szempontokat fogjuk lefedni:

• mi az LWC?
• miért az LWC?
• mi a helyzet az aurával?
• hol kezdjem?
• LWC szerkezet

mik azok a Lightning Web komponensek?

az LWC egy új programozási modell a Salesforce lightning komponensek fejlesztésére. Ez egy UI keretrendszer, amely natív HTML és modern JavaScript használatával épül fel. Alapvető webes komponens szabványokat használ, és kihasználja az egyedi elemeket, sablonokat, dekorátorokat, modulokat, árnyék DOM-ot és más új nyelvi konstrukciókat, amelyek elérhetők az ECMAScript 7-ben és azon túl.

1.ábra: 2019 web stack

a Lightning komponenseket korábban az aura komponens keretrendszer segítségével lehetett kifejleszteni. Most van egy új keretünk ugyanazon villámkomponensek fejlesztésére.

miért az LWC?

meg kell értenünk, hogy a Salesforce miért vezette be az LWC-t ott, ahol már megvolt az Aura komponens keretrendszer. Ehhez vissza kell mennünk 2014-re, és meg kell néznünk ezt a 2014-es webes veremet.

2014-ben, amikor a Lightning Components keretrendszer az Aura programozási modellel együtt elindult, a webes szabványok csak korlátozott alapot kínáltak a teljes veremhez, amelyre a fejlesztőknek szükségük van nagyszabású webes alkalmazások, azaz. egy renderelő motor, standard elemek, események és egy alapnyelv (ECMAScript 5).

az olyan kulcsfontosságú elemek, mint a komponensmodell, a sablonok, a modulok és a shadow DOM, mind hiányoznak a webes szabványokból.

2.ábra: 2014 webes verem

ez azt jelenti, hogy a webes szabványok vagy a webes verem 2014-ben nem volt elég erős ahhoz, hogy segítsen nekünk felhasználói felület-összetevők létrehozásában. Ugyanakkor sok különböző keretrendszer jött a képbe, mint az Angular, a React és az Aura. Mindezek a keretek ezekkel a hiányzó kulcselemekkel érkeztek, amelyekre szükségünk volt a felhasználói felület összetevőinek létrehozásához.

a 2014-2019 közötti időszakban sok fejlesztés történt a webes veremben vagy a natív webböngésző motorjában.

3.ábra: web stack transzformáció

láthatja a sablonokat, az egyéni elemeket és az árnyék DOM modulokat. Ezek mind része a web verem maga. Ez azt jelenti, hogy a legújabb webes verem elég erős ahhoz, hogy segítsen nekünk létrehozni ezeket a felhasználói felület-összetevőket. Nincs szükségünk vastag keretrétegre a kettő között, ami károsíthatja alkatrészeink teljesítményét. Ez az oka az LWC keretrendszer bevezetésének. Az LWC legtöbb funkciója maga a webes verem része,és csak néhány dolog függ a keretrendszerektől. Az LWC base lightning komponensekkel is rendelkezik, az Aura komponens keretrendszer részét képező 70+ alapkomponenst Lightning Web komponensekké alakították át, és mindegyik az LWC keretrendszer része. Ezeket az alapkomponenseket felhasználhatjuk a felhasználói felület összetevőinek tervezéséhez.

a legújabb webes verem erejével az LWC számos különböző előnnyel rendelkezik az aura komponensekkel szemben, az alábbiak szerint:

1. jobb teljesítmény
2. Modern webes szabványok
3. kompatibilis az Aura komponensekkel
4. Gyorsabb betöltés oldalak
5. jobb biztonság, jobb tesztelés és jobb böngésző kompatibilitás
6. könnyű fejlesztés

mi a helyzet az Aura-val?

bizonyára kíváncsi, hogy mivel az LWC itt van, mi fog történni az aurával? Elmúlik?

a válasz “nem”, mert az LWC és az Aura tökéletesen illenek egymáshoz. Az LWC-t és az Aura komponenseket ugyanazon az oldalon helyezheti el, és nem fogja észrevenni a különbséget, mert az LWC beszélhet az Aura komponensével, és az Aura komponens is beszélhet az LWC-vel. Akár az LWC-t is belefoglalhatja egy Aura komponensbe, ahol a fordítva nem igaz, mert nem akar egyéni keretet beépíteni egy általános keretrendszerbe, amely egy LWC.

4. Ábra: Aura és LWC interoperabilitás

ezt a képet nézve észrevehetjük, hogy mind az LWC, mind az Aura ugyanazokkal a böngésző eseményekkel, standard elemekkel és megjelenítési mechanizmussal rendelkezik. A különbség az, hogy az Aura az ECMAScript 5-re épült. Az LWC a legújabb ECMAScript verzióra épül, amely az ECMAScript 7. Mindkettő megosztja a Salesforce alapvető funkcióit, mint például a Lighting Locker, a Lightning Data Services és az alap Lightning komponensek.

Összefoglalva, az LWC egy új módszer a lightning komponensek fejlesztésére. Ez nem azt jelenti, hogy az Aura komponens keretrendszer bárhová megy. Továbbra is használhatja az Aura programozási modelljét a felhasználói felület összetevőinek létrehozásához, ha jobban ismeri az Aura komponens keretrendszert. De ha csak most indul, vagy ha innen új összetevőket hoz létre, azt javaslom, hogy használja az LWC – t, mert sok különböző előnnyel jár – mint például a jobb komponens teljesítmény -, és kihasználja az összes webes verem funkcióját. Mindig jobb, ha az LWC-t az Aura felett használja az új komponensekhez, de mostantól nem kell áttelepítenie a meglévő Aura-összetevőket egy LWC-be.

hol kezdjem?

az LWC létrehozásához és fejlesztéséhez, valamint hatékony funkcióinak és teljesítménybeli előnyeinek használatához be kell állítania a Salesforce DX-et. Az Aura komponensekkel ellentétben az LWC komponensek fejlesztése A fejlesztői konzolban nem lehetséges. Meg kell írni helyben, majd nyomja meg a szervezet. Ehhez be kell állítania a fejlesztői környezetet. Olyan eszközökre van szüksége, mint a Visual Studio Code, a Salesforce parancssori felület és az Org.

íme néhány ajánlott lépés:

1. telepítse a VS kódot, és állítsa be a Salesforce fejlesztéshez. Akkor kövesse ezt Trailhead modul.
2. Itt könnyen érthető mintakódot kaphat szinte minden Használati esethez.
3. további mintákért látogasson el ide.
4. fejlesszen ki egy LWC-t, és próbálja ki a kódot itt futtatva.
5. a legfontosabb, hogy fejezze be az LWC Trailmix használatát.

LWC komponens szerkezete

hogyan alakul ki az LWC?

az Aura komponenshez hasonlóan az LWC fő tartalma HTML és JavaScript is. Van olyan opcionális tartalom, mint a CSS. De ezeken kívül az LWC-hez tartozik egy XML konfigurációs fájl is, amely meghatározza az összetevő metaadatértékeit.

5.ábra: LWC fájlszerkezet

ezeket a fájlneveket össze kell illeszteni az összetevő nevével. A mappának és a fájloknak bizonyos elnevezési szabályokat kell követniük, az alábbiak szerint:

• kisbetűvel kell kezdődnie
• csak alfanumerikus vagy aláhúzott karaktereket kell tartalmaznia
• egyedinek kell lennie a névtérben
• nem tartalmazhat szóközt
• nem zárulhat aláhúzással
• nem tartalmazhat aláhúzást

az LWC fájlstruktúra így néz ki:

most fedezzük le ezeket a fájlokat egyenként:

HTML

• van egy root tag < sablon> amely tartalmazza az összetevő HTML
• amikor teszi, a < sablon> tag helyébe < névtér-component-name>

JavaScript:

• a modulban deklarált funkciók importálásához használja az import utasítás.
• ha azt szeretné, hogy egy modulban más kód is használhassa a funkciókat, használja az exportálási utasítást.
• LightningElement egy egyedi wrapper a standard HTML elem és kiterjesztjük a komponens és az export.

konfiguráció:

• XML fájl, amely meghatározza a
• összetevő metaadatkonfigurációs értékeit <célokat> állítottunk be az összetevők telepítéséhez különböző oldalakhoz, például az Alkalmazásoldalhoz, a Rekordoldalhoz stb.

CSS:

• egy komponens stílusához.
• a stíluslap automatikusan alkalmazásra kerül.

az általunk megvitatott fájlok-hogyan épül fel az összetevő ezekkel a megjelenésekkel?

komponens felhasználói felület:

megpróbálhatja felépíteni ezt az összetevőt a VS kód beállításában, és telepítheti az org-ba. Ha még nem állította be a VS kódot, akkor ne aggódjon. A Salesforce játszóteret is biztosít az LWC számára-itt kipróbálhatja ezt az összetevőt.

ez a legjobb alkalom a Lightning Web komponensekkel való kezdésre, amelyek a legújabb webes szabvány erejét, jobb teljesítményt és az Aura komponensekkel való interoperabilitást kínálják.

az alábbi linkeken többet megtudhat a Lightning Web összetevőiről.

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

A szerzőről

Sagar Zade a Perfective műszaki tanácsadója. Salesforce certified Administrator, App Builder, Platform fejlesztő és Vlocity certified Platform Fejlesztő. Alig várja, hogy megtanulja és felfedezze a salesforce-ban használt új technológiákat, és izgatottan osztja meg a tudást.

még több szerző