More

    WebComponents – komponenty w HTML

    Komponenty to w zasadzie chleb powszedni w pracy frontend developera. Dostarcza je każdy z najpopularniejszych frameworków JS-owych. Dzięki komponentom możemy zamknąć pewną część logiki w obrębie jednego fragmentu kodu, a następnie wielokrotnie go użyć. To tak, jakbyśmy budowali aplikację z gotowych klocków, które mogą się powtarzać. W dzisiejszym wpisie skupię się natomiast na WebComponents. To nic innego jak implementacja mechanizmów komponentów znanych nam już z frameworków do HTML oraz JS. Ale zacznijmy od początku. 

    Czym właściwie są WebComponents?

    Pod tym pojęciem kryje się zestaw trzech głównych specyfikacji webowych, które umożliwiają tworzenie komponentów. Czemu one służą? 

    Po pierwsze, możemy stworzyć jeden komponent, w obrębie którego zamykamy pewną logikę. Może to być na przykład komponent, który renderuje label, input oraz błędy. I ten właśnie komponent zajmie się walidacją poprawności wpisanej wartości oraz wyświetleniem ewentualnych błędów. Następnie taki “klocek” możemy użyć wielokrotnie, bez potrzeby wielokrotnego powtarzania długiego kodu HTML i JS.

    Po drugie, otrzymujemy możliwość enkapsulacji kodu. Wszystko, co działa w obrębie komponentu, ma wpływ jedynie na niego. Nie musimy się przejmować, że nasze style spowodują zmianę w stylach innego obszaru aplikacji. Dodatkowo, kod naszej aplikacji nie może ingerować w działanie komponentu.

    Po trzecie, WebComponents to komponenty na poziomie samego HTML i Vanilla JS. Dzięki temu możemy ich użyć na podstawowej stronie HTML, ale także w aplikacji napisanej w React, Angular, Vue lub innym frameworku. 

    Przyjrzyjmy się teraz, jakie technologie webowe umożliwiają tworzenie komponentów. 

    Custom Elements

    W skrócie, pozwalają na tworzenie własnych elementów DOM, których możemy używać w HTML. Tworząc taki element, musimy poinstruować przeglądarkę, jak powinna go stworzyć.

    Shadow DOM

    Ta technologia pozwala stworzyć subdrzewo DOM, ukryte dla reszty naszego kodu. Dzięki Shadow DOM otrzymujemy enkapsulację.

    HTML Template

    Jest to funkcjonalność pozwalająca zdefiniować fragmenty HTML, które nie wyświetlą się na stronie, dopóki nie zostaną umieszczone w DOM za pomocą JS.

    Powyższe technologie są wspierane przez wszystkie główne przeglądarki, w tym najnowszy Edge, który działa na Chromium. WebComponents nie będą działać jedynie w IE, ale z racji tego, że Microsoft ogłosił już koniec wsparcia dla tej przeglądarki, w większości przypadków IE nie będzie nas już ograniczać.

    Przykładowa aplikacja

    Na przykładzie prostej aplikacji zobaczmy teraz jak zastosowanie WebComponents wygląda w praktyce.

    Nowo utworzony komponent ma za zadanie wyświetlić przekazany mu błąd oraz przycisk służący do zamykania. Po jego kliknięciu, zostaje wywołany event remove, na który nasza aplikacja może zareagować. Jeśli dodatkowo opcja self-remove jest ustawiona na true, to komponent zostanie od razu usunięty.

    Spójrzmy na strukturę plików:

    Katalog error-box będzie przechowywał pliki naszego komponentu. Plik index.html ma z kolei za zadanie zaprezentowanie działania naszego komponentu. Body w tym pliku wygląda następująco:

    Najpierw dodajemy nasz nowy komponent, przekazując mu argument error. Następnie podpinamy plik skryptu z naszym nowym komponentem. Dodatkowo piszemy skrypt, który będzie nasłuchiwał na event remove na komponencie error-box.

    Spójrzmy teraz na kod samego komponentu:

    Po pierwsze, nasza klasa musi dziedziczyć po HTMLElement. To daje nam możliwość wywoływania metod dostępnych w elementach HTML, jak chociażby remove, z którego korzystamy w linii 31 w celu “samodestrukcji”.

    Konstruktor tworzy nowy Shadow DOM, który pełni opcję głównego wrappera naszego komponentu. Opcja open natomiast oznacza, że za pomocą kodu JS z zewnątrz komponentu, możemy wpływać na ten właśnie komponent. Odwrotnie byłoby w przypadku opcji close.

    Funkcja getTemplate ma za zadanie pobrać kod HTML z zewnętrznego pliku. Możemy też umieścić HTML bezpośrednio w tej klasie za pomocą String Template lub w pliku index.html za pomocą HTML template.

    Funkcja connectedCallback jest jedną z funkcji callback dostępnych w WebComponents. Jest wywoływana za pierwszym razem, kiedy nasz komponent jest montowany na stronie.

    Inne funkcje callback:

    • disconnectedCallback – wywoływana podczas usuwania naszego elementu ze strony,
    • adoptedCallback – wywoływana, gdy przenosimy element na nowy dokument,
    • attributeChangedCallback – wywoływana za każdym razem, kiedy zmieniają się atrybuty komponentu.

    Z funkcji attributeChangedCallback korzystamy w linii 41 do ustawienia danych naszego komponentu na podstawie otrzymanych atrybutów. Ta funkcja jest też wywoływana za pierwszym razem, kiedy otrzymujemy atrybuty podczas montowania komponentu. 

    Aby atrybuty były “obserwowane” i funkcja attributeChangedCallback była wywoływana podczas ich zmiany, musimy zdefiniować, które atrybuty chcemy obserwować. Robimy to za pomocą gettera observedAttribute, w którym zwracamy tablicę z nazwami argumentów.

    Na samym końcu pliku definiujemy nowy customElement i od teraz możemy już go używać. Całość kodu oraz demo dostępne są na moim GitHubie.

    Podsumowanie

    WebComponents to bardzo fajna technologia, dzięki której możemy tworzyć komponenty bezpośrednio w kodzie. Znajdzie zastosowanie podczas tworzenia frontendu, niezależnie od tego czy korzystamy z frameworka, czy też nie. Wraz z tą funkcjonalnością dostajemy możliwość tworzenia reużywalnych elementów z zamkniętą wewnątrz logiką, których następnie możemy użyć w każdej frontendowej aplikacji. 

    Kamil Wilk
    Programowanie to jego pasja. Zaczynał jako samouk, poświęcił dużo czasu na własny rozwój. Obecnie pracuje w dużej korporacji jako Front-end Developer, ale back-end w JavaScript nie jest mu obcy. Nie boi się trudnych wyzwań w swojej karierze. Na bieżąco stara się śledzić nowości w branży. Lubi wyszukiwać ciekawostki ze świata dev.

    Latest articles

    Automatyzacja z Pythonem – pobieranie kolekcji filmów z YouTube

    Automatyzacja czynności, które są czasochłonne, to według mnie największa zaleta nauki programowania. Często zadania wymagające od nas klikania, czekania i przepisywania captchy...

    Programowanie funkcyjne w JS

    Jeśli bierzesz udział w rozmowach rekrutacyjnych na stanowisko regular lub senior developera, to pewnie niejednokrotnie miałeś lub miałaś do czynienia z takimi...

    Własny plugin do Figmy w React.js

    Jeśli udało Ci się kiedykolwiek pracować z Figmą, istnieje spora szansa, że narzędzie przypadło Ci do gustu. Tak przynajmniej było w moim...

    Wykorzystanie Virtual DOM na przykładzie Reacta

    Virtual DOM to bardzo popularne rozwiązanie znane z Reacta. Co to dokładnie jest? W jaki sposób działa w Reactcie? O tym opowie...

    1 Comment

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X