Komponenty internetowe na konferencji I/O 2019
Opublikowano: 18 czerwca 2019 r.
Na konferencji Google I/O 2019 Kevin Schaaf z zespołu projektu Polymer i Caridy Patiño z firmy Salesforce rozmawiali o stanie komponentów internetowych.
Jak popularne są komponenty sieciowe?
Jeśli dziś korzystałeś(-aś) z internetu, prawdopodobnie używałeś(-aś) komponentów sieciowych. Według naszych szacunków od 5% do 8% wszystkich wczytań stron korzysta obecnie z co najmniej 1 komponentu internetowego. Dzięki temu komponenty internetowe są jedną z najpopularniejszych nowych funkcji platformy internetowej wprowadzonych w ciągu ostatnich 5 lat.
Komponenty internetowe znajdziesz w witrynach, z których prawdopodobnie korzystasz na co dzień, takich jak YouTube i GitHub. Są one też używane w wielu witrynach z wiadomościami i publikacjami utworzonych w technologii AMP – komponenty AMP są też komponentami internetowymi. Wiele przedsiębiorstw również wdraża komponenty internetowe.
Czym są komponenty internetowe?
Czym są komponenty sieciowe? Specyfikacje komponentów internetowych udostępniają zestaw interfejsów API niskiego poziomu, 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 API DOM).
- Powszechny sposób odbierania i wysyłania danych (za pomocą usług/zdarzeń).
Poza tym standardowym interfejsem standardy nie mówią nic o tym, jak komponent jest faktycznie wdrażany:
- jakiego silnika renderowania używa do tworzenia interfejsu DOM;
- Jak aktualizuje się na podstawie zmian właściwości lub atrybutów.
Innymi słowy, komponenty internetowe informują przeglądarkę, kiedy i gdzie ma utworzyć komponent, ale nie mówią jej, jak to zrobić.
Autorzy mogą tworzyć komponenty internetowe, wybierając funkcjonalne wzorce renderowania, tak jak w przypadku Reacta, lub korzystać z deklaratywnych szablonów, takich jak w Angularze 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?
Kluczową różnicą między komponentami internetowymi a systemami komponentów własnych jest współdziałanie. Dzięki standardowemu interfejsowi możesz używać komponentów internetowych wszędzie tam, gdzie używasz wbudowanego elementu, np. <input> lub <video>.
Można je wyrazić w postaci prawdziwego kodu HTML, więc mogą być renderowane przez wszystkie popularne platformy. Dzięki temu komponenty mogą być używane w większej liczbie aplikacji, bez zmuszania użytkowników do korzystania z jednej platformy.
A 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ą działać bez problemów, gdy zaktualizujesz stos technologiczny. Zamiast dokonywać ogromnej zmiany między jedną platformą a drugą, polegającej na wymianie wszystkich komponentów, możesz aktualizować komponenty pojedynczo.
Kto używa komponentów sieciowych?
Z tych wszystkich powodów komponenty internetowe odnoszą ogromny sukces w różnych zastosowaniach. Szczególną popularnością cieszą się 3 przypadki użycia: witryny z treściami, systemy projektowania i aplikacje dla przedsiębiorstw.
Witryny z treściami
Komponenty internetowe to idealna technologia do stopniowego ulepszania treści, ponieważ mogą być już wyświetlane jako standardowy kod HTML przez niezliczoną liczbę systemów CMS.
AMP to świetny przykład tego, jak szybko i łatwo komponenty WWW zostały włączone do infrastruktury branży wydawniczej na potrzeby wyświetlania treści.
Systemy projektowania
Coraz więcej firm ujednolica sposób prezentowania się za pomocą systemu projektowania, czyli zestawu komponentów i wytycznych, które określają wspólny wygląd i styl witryn i aplikacji organizacji. Komponenty sieciowe też świetnie się tu sprawdzają.
Często projektanci muszą zmagać się z wieloma zespołami, które tworzą własne wersje komponentów systemu projektowania na podstawie Reacta, Angulara i innych frameworków, zamiast korzystać z jednego zestawu kanonicznych komponentów.
Odpowiedzią są komponenty internetowe – system komponentów, który można napisać raz i uruchomić wszędzie, a jednocześnie daje zespołom tworzącym aplikacje swobodę korzystania z wybranego przez siebie frameworka.
Firmy takie jak ING, EA i Google wdrażają język projektowania swojej firmy w komponentach internetowych.
Enterprise: Web components at Salesforce
Komponenty internetowe zyskują też coraz większą popularność w przedsiębiorstwach jako bezpieczna technologia przyszłości, która umożliwia standaryzację. Caridy Patiño, architekt platformy interfejsu Salesforce, wyjaśnia, dlaczego do jej budowy wykorzystano komponenty internetowe.
Salesforce to zbiór aplikacji, z których wiele zostało przejętych. 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 wszystkim ten sam wygląd. Salesforce umożliwia też klientom tworzenie własnych aplikacji niestandardowych na platformie Salesforce. Dlatego komponenty powinny być też użyteczne dla deweloperów zewnętrznych.
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, dzięki czemu dostosowywanie dowolnej aplikacji Salesforce działa w ten sam sposób.
Ustalili też, czego klienci nie chcą:
- zmiany powodujące niezgodność wsteczną w komponentach i aplikacjach, Innymi słowy, zgodność wsteczna była konieczna.
- utknięcie w starej technologii i brak możliwości rozwoju;
- bycie uwięzionym w zamkniętym ogrodzie.
Wykorzystanie komponentów sieciowych jako podstawy nowej platformy interfejsu użytkownika spełniło wszystkie te potrzeby, a wynikiem tego są nowe komponenty sieciowe 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 Material Design jako komponenty internetowe: Material Web Components.
- Wired Elements to ciekawy zestaw komponentów internetowych o szkicowym, ręcznie rysowanym wyglądzie.
- Istnieją świetne komponenty internetowe specjalnego przeznaczenia, takie jak
<model-viewer>, które możesz dodać do dowolnej aplikacji, aby wzbogacić ją o treści 3D.
Jeśli tworzysz system projektowania dla swojej firmy lub sprzedajesz pojedynczy komponent lub bibliotekę, które mają być użyteczne w każdym środowisku, rozważ utworzenie komponentów za pomocą komponentów internetowych. Możesz używać wbudowanych interfejsów API komponentów sieciowych, 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 zapewnia doskonałe renderowanie funkcji podobne do React.
Inne narzędzia i biblioteki, które warto rozważyć:
- Stencil to platforma oparta na komponentach sieciowych. Zawiera kilka popularnych funkcji platformy, takich jak JSX i TypeScript.
- Angular Elements umożliwia opakowywanie komponentów Angular jako komponentów internetowych.
- Otoczka komponentu internetowego 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ą wprowadzenie do podstawowych interfejsów API komponentów internetowych oraz sprawdzone metody projektowania komponentów internetowych.
- MDN udostępnia dokumentację interfejsów API komponentów internetowych oraz kilka samouczków.