Wprowadzenie do Lightning Web Components

w Salesforce Lightning Web Components (LWC) to rewolucyjna zmiana w paradygmacie programowania lightning platform. Jeśli jesteś nowy na platformie Lightning i rozwijasz rozwiązania poza Salesforce za pomocą HTML i JavaScript, przekonasz się, że LWC to bułka z masłem. W tym blogu omówimy następujące aspekty:

• co to jest LWC?
• dlaczego LWC?
• a co z aurą?
• od czego zacząć?
• struktura LWC

czym są Komponenty Lightning Web?

LWC to nowy model programowania do rozwijania komponentów Salesforce lightning. Jest to framework UI, który jest zbudowany przy użyciu natywnego HTML i nowoczesnego JavaScript. Wykorzystuje podstawowe standardy komponentów internetowych i wykorzystuje niestandardowe elementy, szablony, dekoratory, Moduły, Cień DOM i inne nowe konstrukcje językowe dostępne w ECMAScript 7 i nowszych.

Rysunek 1: 2019 Web stos

komponenty Lightning wcześniej można było tworzyć przy użyciu frameworka komponentów Aura. Teraz mamy nowe ramy do opracowania tych samych komponentów lightning.

dlaczego LWC?

musimy zrozumieć, dlaczego Salesforce wprowadził LWC tam, gdzie mieliśmy już framework komponentów Aura. W tym celu musimy wrócić do 2014 i musimy spojrzeć na ten stos internetowy 2014.

w 2014 roku, kiedy Framework Lightning Components został uruchomiony wraz z modelem programowania Aura, standardy sieciowe oferowały tylko ograniczoną podstawę dla pełnego stosu, którego programiści potrzebują do tworzenia dużych aplikacji internetowych, tj. silnik renderujący, standardowe elementy, zdarzenia i podstawowy język (ECMAScript 5).

w standardach internetowych brakuje kluczowych elementów, takich jak model komponentów, szablony, moduły i cień DOM.

Rysunek 2: 2014 Web stack

oznacza to, że standardy sieciowe lub stos sieci w 2014 r.nie były wystarczająco wydajne, aby pomóc nam tworzyć komponenty interfejsu użytkownika. W tym samym czasie pojawiło się wiele różnych frameworków, takich jak Angular, React i Aura. Wszystkie te frameworki zawierały brakujące kluczowe elementy, których potrzebowaliśmy do stworzenia komponentów interfejsu użytkownika.

teraz Od 2014-2019 nastąpiła znaczna poprawa w stosie internetowym lub natywnym silniku przeglądarki internetowej.

Rysunek 3: transformacja stosu www

możesz zobaczyć szablony, elementy niestandardowe i moduły shadow DOM. Wszystkie one są częścią samego stosu sieci. Oznacza to, że najnowszy stos www jest wystarczająco potężny, aby pomóc nam tworzyć te komponenty interfejsu użytkownika. Nie potrzebujemy grubej warstwy ramy pomiędzy, która mogłaby zaszkodzić wydajności naszych komponentów. To jest powód, dla którego wprowadzono ramy LWC. Większość funkcji LWC jest częścią samego stosu sieciowego i tylko kilka rzeczy zależy od frameworków. LWC jest również wyposażony w podstawowe komponenty lightning, wszystkie te 70 + podstawowe komponenty, które są częścią struktury Aura Component, zostały przekształcone w komponenty Lightning Web i wszystkie są częścią struktury LWC. Możemy użyć tych podstawowych komponentów do projektowania w naszych komponentach interfejsu użytkownika.

dzięki mocy najnowszego stosu sieciowego LWC ma wiele różnych zalet w stosunku do komponentów aura w następujący sposób:

1. Lepsza wydajność
2. nowoczesne standardy internetowe
3. kompatybilność z komponentami Aura
4. szybsze ładowanie stron
5. lepsze bezpieczeństwo, lepsze Testowanie i lepsza kompatybilność z przeglądarkami
6. Łatwość tworzenia

co z aurą?

pewnie się zastanawiasz, że skoro LWC tu jest, to co się stanie z aurą? Czy to odejdzie?

odpowiedź brzmi “nie”, ponieważ LWC i aura idealnie pasują do siebie. Możesz umieścić komponenty LWC i aura na tej samej stronie i nie zauważysz żadnej różnicy, ponieważ twój LWC może rozmawiać z komponentem aura, a komponent Aura może również rozmawiać z Twoim LWC. Możesz nawet dołączyć swój LWC do komponentu Aura, w którym odwrotnie nie jest prawdą, ponieważ nie chcesz włączać niestandardowego frameworka wewnątrz ogólnego frameworka, którym jest LWC.

Rysunek 4: Interoperacyjność aura i LWC

patrząc na ten obraz, zauważysz, że zarówno LWC, jak i aura dzieliły te same zdarzenia przeglądarki, standardowe elementy i mechanizm renderowania. Różnica polega na tym, że Aura została zbudowana na ECMAScript 5. LWC jest zbudowany na najnowszej wersji ECMAScript, czyli ECMAScript 7. Oba mają wspólne podstawowe funkcje Salesforce, takie jak szafka oświetleniowa, usługi danych o wyładowaniach atmosferycznych i podstawowe komponenty Lightning.

podsumowując, LWC to nowy sposób na rozwój komponentów lightning. Nie oznacza to, że framework komponentu Aura zmierza donikąd. Nadal możesz używać modelu programowania Aura do tworzenia komponentów interfejsu użytkownika, jeśli jesteś bardziej zaznajomiony z frameworkiem komponentów Aura. Ale jeśli dopiero teraz zaczynasz lub od tego momentu tworzysz nowe komponenty, sugerowałbym użycie LWC, ponieważ ma wiele różnych zalet – takich jak lepsza wydajność komponentów-i wykorzystuje wszystkie funkcje stosu internetowego. Zawsze lepiej jest używać LWC zamiast aury w nowych komponentach, ale nie musisz już migrować istniejących komponentów Aura do LWC.

od czego zacząć?

aby utworzyć i rozwijać LWC oraz korzystać z ich zaawansowanych funkcji i zalet wydajności, musisz skonfigurować Salesforce DX. W przeciwieństwie do komponentów Aura, tworzenie komponentów LWC w konsoli programistycznej nie jest możliwe. Musisz napisać go lokalnie, a następnie wysłać go do swojej organizacji. W tym celu należy skonfigurować środowisko programistyczne. Potrzebujesz zestawu narzędzi, takich jak Visual Studio Code, interfejs wiersza poleceń Salesforce i Org.

oto kilka zalecanych kroków:

1. Zainstaluj kod VS i skonfiguruj go dla rozwoju Salesforce. Możesz śledzić ten moduł Trailhead.
2. Uzyskaj łatwy do zrozumienia przykładowy kod dla prawie wszystkich przypadków użycia tutaj.
3. aby uzyskać więcej próbek, odwiedź tutaj.
4. Sam Stwórz LWC i wypróbuj swój kod, uruchamiając go tutaj.
5. co najważniejsze, Ukończ rozpoczęcie pracy z LWC Trailmix.

struktura komponentów LWC

jak powstaje LWC?

podobnie jak komponent Aura, główną zawartością LWC są również HTML i JavaScript. Istnieje opcjonalna zawartość, taka jak CSS. Ale oprócz tych dla LWC dołączony jest również plik konfiguracyjny XML, który definiuje wartości metadanych dla komponentu.

Rysunek 5: struktura plików LWC

wszystkie te nazwy plików powinny być dopasowane do nazwy komponentu. Folder i pliki muszą przestrzegać pewnych zasad nazewnictwa, w następujący sposób:

• musi zaczynać się małą literą
• musi zawierać tylko znaki alfanumeryczne lub podkreślenia
• musi być unikalna w przestrzeni nazw
• nie może zawierać białych znaków
• nie może kończyć się podkreśleniem
• nie może zawierać myślnik (kreska)

struktura plików LWC wyglądałaby następująco:

teraz omówmy wszystkie te pliki jeden po drugim:

HTML

• ma znacznik główny < template>, który zawiera HTML twojego komponentu
• podczas renderowania, znacznik< template > zostaje zastąpiony znacznikiem < namespace-component-name>

JavaScript:

• aby zaimportować funkcje zadeklarowane w module, użyj polecenia import.
• aby umożliwić innym kodom korzystanie z funkcji w module, użyj instrukcji eksportu.
• LightningElement jest niestandardowym opakowaniem standardowego elementu HTML i rozszerzamy go w komponencie i eksportujemy.

Konfiguracja:

• plik XML, który definiuje wartości konfiguracyjne metadanych dla komponentu
• ustawiamy < cele>, aby wdrożyć komponenty dla różnych stron, takich jak strona Aplikacji, Strona rekordu itp.

CSS:

• aby stylizować komponent.
• arkusz stylów jest stosowany automatycznie.

pliki, które omówiliśmy-jak komponent zbudowałby się z tymi wyglądami?

komponent UI:

możesz spróbować zbudować ten komponent w konfiguracji VS code i wdrożyć go w swojej organizacji. Jeśli nie skonfigurowałeś jeszcze swojego kodu VS, nie martw się. Salesforce zapewnia również plac zabaw dla LWC-możesz wypróbować ten komponent tutaj.

to najlepszy moment, aby zacząć od Lightning Web Components, które oferują moc najnowszego standardu internetowego, lepszą wydajność i interoperacyjność z komponentami Aura.

możesz skorzystać z poniższych linków, aby dowiedzieć się więcej o komponentach 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 autorze

Sagar Zade jest Associate Technical Consultant w Perfficient. Jest certyfikowanym administratorem salesforce, twórcą aplikacji, programistą Platform i vlocity certified Platform Developer. Chętnie uczy się i eksploruje nowe technologie wykorzystywane w salesforce i chętnie dzieli się wiedzą.

więcej od tego autora