More

    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.

    W poprzednich artykułach zaznaczyłem, że jedną z korzyści, jakie dają nam Web Components, jest możliwość używania ich w różnych aplikacjach. Nie ma znaczenia, czy tworzymy projekt z użyciem czystego JS-a, czy korzystamy z któregoś z bardziej lub mniej popularnych frameworków. W tym wpisie pokażę, jak używać Web Components z Reactem i Angularem.

    Użycie Web Components w React

    Najpierw zajmiemy się zastosowaniem komponentów w Reactcie.

    Instalacja komponentu w aplikacji

    Na początku musimy utworzony przez nas Web Component dodać do aplikacji. W tym celu skorzystamy z error boxa, którego wcześniej opublikowaliśmy w NPM. Jest to komponent, który znamy już z poprzedniego wpisu na temat Web Components, gdzie opisywałem technologię Shadow DOM.

    Error box instalujemy za pomocą komendy:

    npm i @xkamis/error-box

    Ważne jest to, że sam error box na potrzeby użycia w Reactcie musiał zostać delikatnie zmodyfikowany. Jeśli chcemy używać naszego komponentu w tym frameworku, import stylów w HTML oraz samo pobranie pliku HTML za pomocą fetch niestety nie zadziała. Dlatego wszystko zostało zdefiniowane w jednym pliku JS poprzez zapisanie stylów oraz HTML-a za pomocą template string.

    Po instalacji error boxa, możemy już użyć komponentu w Reactcie. Całość kodu będzie wyglądała następująco:

    Wyświetlanie komponentu

    W tym momencie możemy już wyświetlić nasz komponent. W JSX wygląda to tak samo, jak w zwykłym HTML – argumenty określamy w ten sam sposób. Nasz komponent error box korzysta ze slotów, dlatego treść błędu przekazujemy wewnątrz error-box

    Używając Web Componentów musimy pamiętać o dwóch różnicach. Po pierwsze, jeśli chcemy określić klasę dla naszego komponentu, korzystamy ze standardowego argumentu class, a nie className, do którego jesteśmy przyzwyczajeni w Reactcie. Działa to w następujący sposób:

    Po drugie, co już można zauważyć w naszym kodzie, stworzone przez nas eventy wewnątrz komponentu nie będą przechwytywane przez zdefiniowanie odpowiedniej akcji w JSX. Zamiast tego, musimy użyć bardziej standardowego podejścia z addEventListener. W tym celu używamy ref, na którym dodajemy eventListener.

    Użycie Web Components wraz z Angularem

    Przejdźmy teraz do wykorzystania Web Componentów w Angulerze.

    Instalacja kompenentu

    Tak jak poprzednio, musimy rozpocząć od instalacji komponentu. W module, w którym chcemy użyć naszego komponentu, musimy go zaimportować. 

    Dodatkowo do tablicy schemas musimy dodać CUSTOM_ELEMENTS_SCHEMA zaimportowane z @angular/core. To pozwoli nam na używanie w tym module komponentów nie-angularowych, zapisanych z użyciem “-”, oraz argumentów komponentów zapisanych w ten sam sposób. W skrócie, pozwala nam to na używanie Custom Elements w Angularze. 

    Teraz już tylko pozostaje użyć naszego error boxa w komponencie Angulara – na przykładzie w AppComponent.

    Kod raczej nie wymaga żadnego komentarza. Warto jednak zauważyć, że w Angularze obsługa eventów pochodzących z Web Components jest standardowa dla Angulara.

    Podsumowanie

    W powyższej instrukcji pokazałem, w jaki sposób możemy używać Web Components w Reactcie i Angular. Takie ich zastosowanie pozwala na tworzenie uniwersalnych komponentów, których będziemy mogli użyć w dowolnej aplikacji. Myślę, że taka droga stanie się popularna, ponieważ umożliwia uzyskanie niezależności od frameworka i jednorazowe stworzenie uniwersalnych komponenty, których będzie można używać w wielu różnych aplikacjach, zamiast tworzyć je za każdym razem od nowa.

    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