Úvod do Lightning Web Components

v Salesforce jsou Lightning Web Components (LWC) revoluční změnou v programovacím paradigmatu platformy lightning. Pokud jste na platformě Lightning nováčkem a vyvíjíte řešení mimo Salesforce pomocí HTML a JavaScriptu, pak zjistíte, že LWC je hračka. V tomto blogu se budeme zabývat následujícími aspekty:

• co je LWC?
• proč LWC?
• a co Aura?
• odkud začít?
• struktura LWC

co jsou komponenty Lightning Web?

LWC je nový programovací model pro vývoj komponent Salesforce lightning. Je to rámec UI, který je postaven pomocí nativního HTML a moderního JavaScriptu. Využívá základní standardy webových komponent a využívá vlastní prvky, šablony, dekoratéry, moduly, stín DOM, a další nové jazykové konstrukce dostupné v ECMAScript 7 a dále.

Obrázek 1: 2019 web stack

Lightning komponenty dříve mohly být vyvinuty pomocí aura component framework. Nyní máme nový rámec pro vývoj stejných komponent lightning.

proč LWC?

musíme pochopit, proč Salesforce zavedla LWC, kde jsme již měli rámec komponent Aura. K tomu se musíme vrátit do roku 2014 a musíme se podívat na tento webový zásobník 2014.

v roce 2014, kdy byl spuštěn rámec Lightning Components spolu s programovacím modelem Aura, nabídly webové standardy pouze omezený základ pro plný zásobník, který vývojáři potřebují k vytváření rozsáhlých webových aplikací, tj. vykreslovací engine, standardní prvky, události a základní jazyk (ECMAScript 5).

klíčové prvky, jako je model komponenty, šablony, moduly a stín DOM, chybí ve webových standardech.

Obrázek 2: 2014 web stack

to znamená, že webové standardy nebo webový stack v roce 2014 nebyly dostatečně silné, aby nám pomohly vytvořit komponenty uživatelského rozhraní. Ve stejnou dobu, mnoho různých rámců přišlo do obrazu jako Angular, reagovat, a Aura. Všechny tyto rámce přicházely s těmito chybějícími klíčovými prvky, které jsme potřebovali k vytvoření komponent uživatelského rozhraní.

nyní od 2014-2019 došlo k velkému zlepšení webového zásobníku nebo nativního webového prohlížeče.

obrázek 3: transformace webového zásobníku

můžete vidět šablony, vlastní prvky a stínové DOM moduly. Všichni jsou součástí samotného webového zásobníku. To znamená, že nejnovější webový zásobník je dostatečně výkonný, aby nám pomohl vytvořit tyto komponenty uživatelského rozhraní. Nepotřebujeme silnou rámcovou vrstvu mezi tím, což by mohlo poškodit výkon našich komponent. To je důvod zavedení rámce LWC. Většina funkcí LWC je součástí samotného webového zásobníku a na rámcích nyní závisí jen několik věcí. LWC také přichází se základními komponenty lightning, všechny tyto 70 + základní komponenty, které jsou součástí Aura Component framework byly převedeny na Lightning webové komponenty, a všechny jsou součástí rámce LWC. Tyto základní komponenty můžeme použít k návrhu v našich komponentách uživatelského rozhraní.

s výkonem nejnovějšího webového zásobníku přichází LWC s mnoha různými výhodami oproti komponentám aura následovně:

1. lepší výkon
2. moderní webové standardy
3. kompatibilní s komponenty Aura
4. rychlejší načítání stránek
5. lepší zabezpečení, lepší testování a lepší kompatibilita prohlížeče
6. snadnost vývoje

a co Aura?

musíte se divit, že vzhledem k tomu, že LWC je tady, co se stane s aurou? Zmizí to?

odpověď je “ne”, protože LWC a Aura jsou perfektní zápas pro sebe. Můžete dát své LWC a Aura komponenty na stejné stránce a nebudete si všimnout žádný rozdíl tam, protože vaše LWC může mluvit s vaší Aura komponenty a vaše Aura komponenty mohou také mluvit s vaší LWC. LWC můžete dokonce zahrnout do komponenty Aura, kde naopak není pravda, protože nechcete zahrnout vlastní rámec do obecného rámce, což je LWC.

Obrázek 4: Aura a LWC interoperabilita

při pohledu na tento obrázek si všimnete, že LWC i Aura sdílely stejné události prohlížeče, standardní prvky a mechanismus Vykreslování. Rozdíl je v tom, že Aura byla postavena na ECMAScript 5. Lwc je postaven na nejnovější verzi ECMAScript, což je ECMAScript 7. Oba sdílejí základní funkce Salesforce, jako je skříňka osvětlení, bleskové datové služby a základní komponenty blesku.

abychom to shrnuli, LWC je nový způsob, jak rozvíjet své lightning komponenty. To neznamená, že rámec komponent Aura nikam nevede. Stále můžete použít programovací model Aura k vytvoření komponent uživatelského rozhraní, pokud jste více obeznámeni s rámcem komponent Aura. Ale pokud začínáte právě teď nebo pokud vytváříte nové komponenty od této chvíle, doporučil bych vám použít LWC, protože přichází s mnoha různými výhodami – jako je lepší výkon komponent – a využívá všechny vaše funkce webového zásobníku. Pro nové komponenty je vždy lepší používat LWC over Aura, ale již nyní nemusíte migrovat své stávající komponenty Aura na LWC.

kde začít?

Chcete-li vytvořit a rozvíjet LWC a využívat jejich výkonné funkce a výhody výkonu, musíte nastavit Salesforce DX. Na rozdíl od komponent Aura není vývoj komponent LWC v konzole pro vývojáře možný. Musíte to napsat lokálně a pak ji tlačit do svého org. Tímto způsobem budete muset nastavit vývojové prostředí. Potřebujete sadu nástrojů, jako je Visual Studio Code, rozhraní příkazového řádku Salesforce a Org.

zde jsou některé doporučené kroky:

1. nainstalujte VS kód a nastavte jej pro vývoj Salesforce. Můžete sledovat tento modul Trailhead.
2. Získejte snadno srozumitelný ukázkový kód pro téměř všechny případy použití zde.
3. další ukázky naleznete zde.
4. Vytvořte si LWC sami a vyzkoušejte svůj kód spuštěním zde.
5. a co je nejdůležitější, dokončete Začínáme s LWC Trailmix.

struktura komponent LWC

jak vzniká LWC?

podobně jako komponenta Aura je hlavním obsahem LWC také HTML a JavaScript. K dispozici je volitelný obsah, jako je CSS. Ale kromě těchto pro LWC je také zahrnut konfigurační soubor XML, který definuje hodnoty metadat pro komponentu.

obrázek 5: struktura souboru lwc

všechny tyto názvy souborů by měly být přiřazeny k názvu komponenty. Složka a soubory musí dodržovat některá pravidla pro pojmenování, a to následovně:

• musí začínat malým písmenem
• musí obsahovat pouze alfanumerické nebo podtržítkové znaky
• musí být jedinečné v jmenném prostoru
• nemůže obsahovat mezery
• nemůže končit podtržítkem
• nemůže obsahovat spojovník (pomlčka))

struktura souboru LWC by vypadala takto:

nyní pokryjeme všechny tyto soubory jeden po druhém:

HTML

• má kořenovou značku <template>, která obsahuje HTML Vaší komponenty
• při vykreslení je značka <template> nahrazena značkou <namespace-component-name>

JavaScript:

• Chcete-li importovat funkce deklarované v modulu, použijte příkaz import.
• Chcete-li povolit jinému kódu používat funkce v modulu, použijte příkaz export.
• LightningElement je vlastní obal standardního HTML prvku a rozšiřujeme jej v komponentě a exportujeme.

konfigurace:

• XML soubor, který definuje konfigurační hodnoty metadat pro komponentu
• nastavili jsme < cíle> pro nasazení komponent pro různé stránky, jako je stránka Aplikace, stránka záznamu atd.

CSS:

• Chcete-li upravit komponentu.
• styl se použije automaticky.

soubory, o kterých jsme diskutovali-jak by se komponenta stavěla s tímto vzhledem?

uživatelské rozhraní komponent:

tuto komponentu můžete zkusit vytvořit v nastavení VS kódu a nasadit ji na org. Pokud jste dosud nenastavili VS kód, pak se nebojte. Salesforce také poskytuje hřiště pro LWC-tuto komponentu můžete vyzkoušet zde.

Toto je nejlepší čas začít s webovými komponenty Lightning, které nabízejí sílu nejnovějšího webového standardu, lepší výkon a interoperabilitu s komponenty Aura.

můžete se podívat na níže uvedené odkazy, kde se dozvíte více o komponentách Lightning Web.

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

o autorovi

Sagar Zade je přidruženým technickým konzultantem společnosti Perficient. Je certifikovaným správcem salesforce, tvůrcem aplikací, vývojářem platformy a vývojářem platformy Vlocity. Touží se učit a zkoumat nové technologie používané v salesforce a nadšený, že sdílí znalosti.

Více od tohoto autora