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

    11 bibliotek, które powinien znać każdy iOS developer

    Przez dwanaście lat, App Store mocno zadomowił się na naszych urządzeniach mobilnych, oferując coraz to większą różnorodność aplikacji. W tym roku ich...

    Jak używać Web Components w Reactcie i Angularze

    Kontynuujemy temat użycia Web Components w budowaniu aplikacji. W tym wpisie przyjrzymy się ich zastosowaniu wraz z popularnymi frameworkami JS-wymi.

    Hacktoberfest – ten hackathon to małe piwo

    Hackathon to wydarzenie programistyczne polegające na zrealizowaniu w określonym czasie projektu zgodnego założeniami organizatora. Większość z was pewnie kojarzy słowo Hackathon. Najczęściej...

    #IThotStory, czyli największe wpadki programistów

    Co prawda programista to nie saper i może pomylić się więcej niż raz, ale każda wpadka niesie za sobą jakieś ryzyko. Zaliczyliście...

    Leave a reply

    Please enter your comment!
    Please enter your name here

    Related articles

    X