Komponenty internetowe na konferencji I/O 2019
Opublikowano: 18 czerwca 2019 r.
Podczas konferencji Google I/O 2019 Kevin Schaaf z Polymer Project i Caridy Patiño z Salesforce rozmawiali o stanie komponentów internetowych.
Jak popularne są komponenty internetowe?
Jeśli korzystasz z internetu, prawdopodobnie używasz komponentów internetowych. Według naszych obliczeń od 5% do 8% wszystkich wczytań stron korzysta obecnie z co najmniej 1 komponentu internetowego. Dzięki temu komponenty internetowe są jedną z najbardziej udanych nowych funkcji platformy internetowej, które zostały wprowadzone w ciągu ostatnich 5 lat.
Komponenty internetowe znajdziesz w witrynach, z których prawdopodobnie korzystasz na co dzień, takich jak YouTube czy GitHub. Są też używane w wielu witrynach z wiadomościami i witrynach wydawców utworzonych za pomocą AMP – komponenty AMP to również komponenty internetowe. Wiele firm również wdraża komponenty internetowe.
Czym są komponenty internetowe?
Czym są komponenty internetowe? Specyfikacje komponentów internetowych udostępniają zestaw interfejsów API niskiego poziomu, które umożliwiają rozszerzenie wbudowanego zestawu tagów HTML przeglądarki. Komponenty internetowe zapewniają:
- Typowa metoda tworzenia komponentu (przy użyciu standardowych interfejsów API DOM).
- Typowy sposób odbierania i wysyłania danych (za pomocą właściwości i zdarzeń).
Poza tym standardowym interfejsem standardy nie mówią nic o tym, jak komponent jest faktycznie implementowany:
- silnik renderowania, którego używa do tworzenia DOM;
- jak aktualizuje się na podstawie zmian we właściwościach lub atrybutach.
Innymi słowy, komponenty internetowe informują przeglądarkę, kiedy i gdzie utworzyć komponent, ale nie jak to zrobić.
Autorzy mogą wybierać funkcjonalne wzorce renderowania, takie jak React, do tworzenia komponentów internetowych lub używać szablonów deklaratywnych, takich jak Angular czy Vue. Jako autor masz pełną swobodę wyboru technologii, której używasz w komponencie, przy jednoczesnym zachowaniu interoperacyjności.
Do czego służą komponenty internetowe?
Główną różnicą między komponentami internetowymi a zastrzeżonymi systemami komponentów jest interoperacyjność. Dzięki standardowemu interfejsowi komponentów internetowych możesz używać ich wszędzie tam, gdzie używasz wbudowanego elementu, takiego jak <input> lub <video>.
Ponieważ można je wyrazić jako rzeczywisty kod HTML, mogą być renderowane przez wszystkie popularne platformy. Dzięki temu komponenty mogą być używane szerzej, w bardziej zróżnicowanych aplikacjach, bez ograniczania użytkowników do jednej platformy.
Ponieważ interfejs komponentu jest standardowy, komponenty internetowe zaimplementowane przy użyciu różnych bibliotek można łączyć na tej samej stronie. Dzięki temu Twoje aplikacje będą gotowe na przyszłe aktualizacje stosu technologicznego. Zamiast przechodzić z jednego frameworka na inny i wymieniać wszystkie komponenty, możesz aktualizować je pojedynczo.
Kto używa komponentów internetowych?
Z tych wszystkich powodów komponenty internetowe cieszą się ogromnym powodzeniem w różnych przypadkach użycia. Szczególnie popularne są 3 przypadki użycia: witryny z treściami, systemy projektowania i aplikacje dla przedsiębiorstw.
Witryny z treścią
Komponenty internetowe to idealna technologia do progresywnego ulepszania treści, ponieważ mogą być już generowane jako standardowy kod HTML przez niezliczoną liczbę systemów CMS.
AMP to świetny przykład tego, jak szybko i łatwo komponenty internetowe zostały włączone do infrastruktury branży wydawniczej służącej do udostępniania treści.
systemy projektowania,
Coraz więcej firm ujednolica sposób prezentowania się za pomocą systemu projektowania – zestawu komponentów i wytycznych, które określają wspólny wygląd i styl witryn oraz aplikacji organizacji. Komponenty internetowe również świetnie się tu sprawdzą.
Często projektanci muszą zmagać się z wieloma zespołami, które tworzą własne wersje komponentów systemu projektowania na bazie React, Angular i wszystkich innych platform, zamiast mieć jeden zestaw komponentów kanonicznych.
Odpowiedzią są komponenty internetowe – system komponentów, który można napisać raz i uruchamiać wszędzie, a który jednocześnie daje zespołom tworzącym aplikacje swobodę korzystania z wybranej platformy.
Firmy takie jak ING, EA i Google wdrażają język projektowania swojej firmy w komponentach internetowych.
Enterprise: Web components at Salesforce
Komponenty internetowe są też coraz częściej wykorzystywane w firmach jako bezpieczna, przyszłościowa technologia, którą można ustandaryzować. Caridy Patiño, architekt platformy UI Salesforce, wyjaśnił, dlaczego platforma UI została utworzona przy użyciu komponentów internetowych.
Salesforce to zbiór aplikacji, z których wiele pochodzi z przejęć. 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 aplikacji niestandardowych za pomocą platformy Salesforce. Najlepiej, aby komponenty mogły być używane również przez zewnętrznych deweloperów.
Firma Salesforce zidentyfikowała zestaw potrzeb klientów korzystających z jej platformy:
- standardowe, a nie zastrzeżone rozwiązania, dzięki czemu łatwiej jest znaleźć doświadczonych programistów i szybciej wdrożyć nowych;
- Wspólny model komponentów – dostosowywanie dowolnej aplikacji Salesforce działa w ten sam sposób.
Zidentyfikowali też kilka rzeczy, których klienci nie chcieli:
- zmiany powodujące niezgodność w komponentach i aplikacjach; Innymi słowy, zgodność wsteczna była koniecznością.
- utknięcie w starej technologii i brak możliwości rozwoju;
- utknięcie w zamkniętym ekosystemie;
Wykorzystanie komponentów internetowych jako podstawy nowej platformy interfejsu użytkownika spełniło wszystkie te potrzeby, a rezultatem są nowe komponenty internetowe Lightning.
Pierwsze kroki z komponentami internetowymi
Istnieje wiele świetnych sposobów na rozpoczęcie pracy z komponentami internetowymi.
Jeśli tworzysz aplikację internetową, rozważ użycie niektórych z wielu dostępnych standardowych komponentów internetowych. Oto kilka przykładów:
- Google udostępnia własny system projektowania Material Design w postaci komponentów internetowych: Material Web Components.
- Wired Elements to ciekawy zestaw komponentów internetowych, które wyglądają jak szkice narysowane odręcznie.
- Istnieją świetne komponenty internetowe do specjalnych zastosowań, takie jak
<model-viewer>, które można umieścić w dowolnej aplikacji, aby dodać treści 3D.
Jeśli tworzysz system projektowania dla swojej firmy lub sprzedajesz pojedynczy komponent lub bibliotekę, które mają być używane w dowolnym środowisku, rozważ tworzenie komponentów za pomocą komponentów internetowych. Możesz używać wbudowanych interfejsów API komponentów internetowych, ale są one dość niskiego poziomu, więc dostępnych jest wiele bibliotek, które ułatwiają ten proces.
Aby zacząć tworzyć własne komponenty, możesz zapoznać się z LitElement, klasą bazową komponentów internetowych opracowaną przez Google, która ma świetne funkcje renderowania podobne do React.
Inne narzędzia i biblioteki do rozważenia:
- Stencil to platforma oparta na komponentach internetowych. Obejmuje kilka popularnych funkcji platformy, takich jak JSX i TypeScript.
- Angular Elements umożliwia opakowywanie komponentów Angular jako komponentów internetowych.
- Komponent internetowy Vue.js umożliwia pakowanie komponentów Vue jako komponentów internetowych.
Więcej zasobów:
- Na stronie open-wc.org znajdziesz przydatne informacje na początek, a także wskazówki i domyślne konfiguracje narzędzi do kompilacji i programowania.
- Podstawy tworzenia witryn zawierają podstawowe informacje o interfejsach API komponentów internetowych oraz sprawdzone metody projektowania komponentów internetowych.
- MDN zawiera dokumentację referencyjną interfejsów API komponentów internetowych oraz kilka samouczków.