Komponenty internetowe na konferencji I/O 2019
Na konferencji Google I/O 2019 Kevin Schaaf z projektu Polymer i Caridy Patiño z Salesforce omawiali stan komponentów stron internetowych.
Jak popularne są komponenty internetowe?
Jeśli korzystasz dziś z internetu, prawdopodobnie korzystasz z komponentów sieciowych. Według naszych szacunków około 5–8% wszystkich wczytań stron korzysta obecnie z co najmniej jednego komponentu internetowego. To sprawia, że komponenty sieciowe są jednym z najskuteczniejszych nowych funkcji platformy internetowej, które pojawiły się w ciągu ostatnich pięciu lat.
Komponenty internetowe są dostępne w witrynach, których prawdopodobnie używasz na co dzień, takich jak YouTube czy GitHub. Są też używane w wielu witrynach z wiadomościami i publikacjami utworzonych w technologii AMP – komponenty AMP też są komponentami internetowymi. Wiele firm wdraża też komponenty sieciowe.
Co to są komponenty internetowe?
Czym są komponenty sieciowe? Specyfikacje komponentów internetowych udostępniają niskopoziomowy zestaw interfejsów API, które umożliwiają rozszerzenie wbudowanego w przeglądarkę zestawu tagów HTML. Komponenty internetowe zapewniają:
- Typowa metoda tworzenia komponentu (przy użyciu standardowych interfejsów DOM API).
- Typowy sposób odbierania i wysyłania danych (przy użyciu właściwości i zdarzeń).
Poza tym standardowym interfejsem nie mają one żadnych informacji o sposobie implementacji komponentu:
- silnik renderowania, którego używa do utworzenia swojego DOM;
- sposób, w jaki się aktualizuje na podstawie zmian właściwości lub atrybutów.
Inaczej mówiąc, komponenty internetowe informują przeglądarkę, kiedy i gdzie ma utworzyć dany komponent, ale nie informują jak.
Autorzy mogą tworzyć komponenty sieciowe tak samo jak React, ale mogą też korzystać z szablonów deklaracyjnych, takich jak Angular czy Vue. Jako autor masz pełną swobodę wyboru technologii stosowanej w komponencie przy zachowaniu interoperacyjności.
Do czego służą komponenty internetowe?
Główną różnicą między komponentami internetowymi a zastrzeżonymi systemami komponentów jest współdziałanie. Dzięki standardowemu interfejsowi możesz używać komponentów sieciowych wszędzie tam, gdzie używa się elementów wbudowanych, takich jak <input> czy <video>.
Ponieważ są wyrażone jako prawdziwy kod HTML, mogą być renderowane przez wszystkie popularne platformy. Dzięki temu komponenty mogą być wykorzystywane w większym stopniu w bardziej zróżnicowanych aplikacjach bez konieczności ograniczania użytkowników do jednej platformy.
Ponieważ interfejs komponentów jest standardowy, komponenty internetowe zaimplementowane za pomocą różnych bibliotek można łączyć na tej samej stronie. Pomoże to zabezpieczyć aplikacje na przyszłość, gdy aktualizujesz stos technologiczny. Zamiast przeprowadzać ogromną zmianę między jednym a drugim systemem, w ramach której należy wymienić wszystkie komponenty, możesz aktualizować komponenty po kolei.
Kto używa komponentów sieciowych?
Z tych wszystkich tych powodów komponenty Web Komponenty odnoszą duże sukcesy w wielu różnych sytuacjach. Szczególnie popularne są 3 przypadki użycia: witryny z treścią, systemy projektowania i aplikacje dla firm.
Witryny w sieci reklamowej
Komponenty internetowe to idealna technologia do stopniowego ulepszania treści, ponieważ mogą być już wysyłane w formie standardowego kodu HTML przez wiele systemów CMS.
Technologia AMP jest doskonałym przykładem tego, jak szybko i łatwo wbudowane są komponenty sieciowe w infrastrukturę branży wydawniczej do wyświetlania treści.
Systemy projektowania
Coraz więcej firm ujednolica sposób, w jaki się prezentuje przy użyciu systemu projektowania – zestawu komponentów i wytycznych, które definiują wspólny wygląd witryn i aplikacji danej organizacji. W tym przypadku świetnie nadają się również komponenty sieciowe.
Projektanci często muszą liczyć na to, że wiele zespołów buduje własne wersje komponentów systemu projektowania na platformach React, Angular i innych, zamiast korzystać z jednego zestawu komponentów kanonicznych.
Odpowiedzią na to pytanie są komponenty sieciowe – można pisać tylko raz i wszędzie w systemie komponentów, który jednocześnie daje zespołom produkcyjnym swobodę w korzystaniu z wybranej przez nich platformy.
Firmy takie jak ING, EA i Google wdrażają swój język projektowania w komponentach internetowych.
Enterprise: komponenty sieciowe w Salesforce
Co więcej, komponenty sieciowe dokonują niezwykłego kroku w ramach firm jako bezpiecznej i przyszłej technologii do ustandaryzowania. Caridy Patiño, architekt platformy Salesforce, wyjaśnił, dlaczego stworzył ją z wykorzystaniem komponentów sieciowych.
Salesforce to zbiór aplikacji, z których wiele pochodzi od przejętych kont. Każda z nich może działać na własnym stosie technologicznym. Ponieważ są one oparte na różnych stosach, trudno jest nadać im taki sam wygląd i styl. Ponadto Salesforce umożliwia klientom tworzenie własnych niestandardowych aplikacji przy użyciu platformy Salesforce. Idealnie komponenty powinny być więc przydatne także dla programistów zewnętrznych.
Zespół Salesforce określił zestaw potrzeb klientów swojej platformy:
- Rozwiązania standardowe zamiast zastrzeżonych – ułatwiają znalezienie doświadczonych programistów i szybsze wprowadzanie nowych.
- Typowy model składowy, więc dostosowywanie aplikacji Salesforce działa tak samo.
Określili też, czego klienci nie oczekują:
- Niezbędne zmiany w komponentach i aplikacjach. Innymi słowy, zgodność wsteczna była koniecznością.
- Utknięcie przy starej technologii i niemożność ewolucji.
- Utknięcie w otoczonym murem ogrodzie
Wykorzystanie komponentów sieciowych jako podstawy nowej platformy interfejsu spełniło wszystkie te wymagania. W efekcie powstają komponenty Lightning Web.
Pierwsze kroki z komponentami internetowymi
Korzystanie z komponentów sieciowych można znaleźć na wiele sposobów.
Jeśli tworzysz aplikację internetową, rozważ skorzystanie z jednego z wielu dostępnych komponentów tego typu. Oto kilka przykładów:
- Google oferuje własny system Material Design jako komponenty internetowe: Material Web Komponenty.
- Wired Elements (Elementy przewodowe) to fajny zestaw komponentów sieciowych o szkicowym, odręcznym rysowanym wyglądzie.
- Są świetne specjalne komponenty internetowe, takie jak
<model-viewer>, które możesz przeciągnąć do dowolnej aplikacji, aby dodać zawartość 3D.
Opracowujesz system do projektowania dla swojej firmy albo udostępniasz pojedynczy komponent lub bibliotekę, z których chcesz korzystać w dowolnym środowisku. Rozważ utworzenie komponentów z wykorzystaniem komponentów sieciowych. Możesz używać wbudowanych interfejsów API komponentów sieciowych, ale są one dość niskie, dlatego dostępnych jest wiele bibliotek, które ułatwiają ten proces.
Aby zacząć tworzyć własne komponenty, możesz zapoznać się z LitElementem – opracowaną przez Google klasą bazową komponentu internetowego, która oferuje świetne funkcje renderowania podobne do React.
Inne narzędzia i biblioteki, które warto wziąć pod uwagę:
- Stencil to platforma bazująca na komponentach internetowych. Zawiera kilka popularnych funkcji platformy, takich jak JSX i TypeScript.
- Angular Elements umożliwia opakowywanie komponentów Angular jako komponentów sieciowych.
- Kod komponentu internetowego Vue.js umożliwia pakowanie komponentów Vue jako komponentów sieciowych.
Więcej materiałów
- Na stronie open-wc.org znajdziesz przydatne informacje dla początkujących, a także wskazówki i domyślne konfiguracje narzędzi do kompilacji i programowania.
- W Podstawach tworzenia witryn znajdziesz podstawowe informacje o podstawowych interfejsach API komponentów internetowych oraz sprawdzone metody ich projektowania.
- MDN zawiera dokumenty referencyjne na temat interfejsów API komponentów internetowych oraz kilka samouczków. \
Baner powitalny autorstwa Jasona Tuinstra w Unsplash.
Uwaga redaktora: wykres użycia elementów niestandardowych został zaktualizowany i przedstawia pełne miesięczne dane o użyciu dostępne na stronie chromestatus.com. W poprzedniej wersji tego posta był on wyświetlany z 6-miesięcznym poziomem szczegółowości bez ostatnich miesięcy. Serie V0 i V1 na oryginalnym wykresie były skumulowane. Teraz są wyświetlane jako nieskumulowane z linią sumy, co eliminuje niejasności. Nagły skok pod koniec 2017 roku jest spowodowany zmianą systemu zbierania danych na stronie chromestatus.com. Zmiana ta wpłynęła na statystyki wszystkich funkcji platformy internetowej i zaowocowała dokładniejszymi pomiarami.