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 internetowych.
Jak popularne są komponenty sieciowe?
Jeśli korzystasz z Internetu, prawdopodobnie używasz komponentów internetowych. Według naszych obliczeń około 5–8% wszystkich wczytanych stron korzysta z co najmniej jednego komponentu internetowego. Dzięki temu komponenty internetowe są jedną z najbardziej udanych nowych funkcji platformy internetowej w ostatnich 5 latach.
Komponenty internetowe znajdziesz w witrynach, z których korzystasz codziennie, np. w YouTube i GitHub. Są one też używane na wielu stronach z wiadomościami i publikacjami utworzonych w technologii AMP – komponenty AMP to też komponenty internetowe. Wiele firm stosuje też komponenty internetowe.
Czym są komponenty internetowe?
Czym są komponenty sieciowe? Specyfikacje komponentów internetowych udostępniają interfejsy API niskiego poziomu, które umożliwiają rozszerzanie wbudowanego zestawu tagów HTML przeglądarki. Komponenty internetowe zapewniają:
- Typowa metoda tworzenia komponentu (korzystająca ze standardowych interfejsów DOM).
- Powszechny sposób odbierania i wysyłania danych (za pomocą usług lub zdarzeń).
Poza tym standardowym interfejsem standardy nie określają, jak komponent jest faktycznie implementowany:
- silnika renderowania używanego do tworzenia DOM.
- Jak aktualizuje się na podstawie zmian właściwości lub atrybutów.
Innymi słowy, komponenty webowe mówią przeglądarce, kiedy i gdzie utworzyć komponent, ale nie jak.
Autorzy mogą wybierać funkcjonalne wzorce renderowania, takie jak React, aby tworzyć komponenty internetowe, lub używać deklaratywnych szablonów, takich jak w przypadku Angulara czy Vue. Jako autor masz pełną swobodę wyboru technologii używanej w komponencie, przy zachowaniu interoperacyjności.
Do czego służą komponenty internetowe?
Główna różnica między komponentami internetowymi a systemami komponentów zastrzeżonych polega na współdziałaniu. Ze względu na standardowy interfejs komponentów internetowych możesz ich używać wszędzie tam, gdzie używasz wbudowanych elementów, takich jak <input> lub <video>.
Ponieważ można je zapisać jako prawdziwy kod HTML, mogą być renderowane przez wszystkie popularne frameworki. Dzięki temu komponenty mogą być używane w szerszym zakresie i w różnorodnych aplikacjach bez konieczności wiązania użytkowników z żadną konkretną platformą.
Ponieważ interfejs komponentów jest standardowy, na jednej stronie można mieszać komponenty internetowe zaimplementowane za pomocą różnych bibliotek. Dzięki temu aplikacje będą gotowe na przyszłość, gdy zaktualizujesz swój ekosystem technologiczny. Zamiast wprowadzać ogromne zmiany w ramach, które wymagają zastąpienia wszystkich komponentów, możesz aktualizować komponenty pojedynczo.
Kto korzysta z komponentów sieciowych?
Z tych wszystkich powodów komponenty internetowe są bardzo skuteczne w różnych zastosowaniach. Szczególnie popularne były 3 przypadki użycia: witryny z treściami, systemy projektowania i aplikacje korporacyjne.
witryny z treściami;
Komponenty internetowe to idealna technologia do stopniowego ulepszania treści, ponieważ można je już wyprowadzać jako standardowy kod HTML za pomocą niezliczonych systemów CMS.
AMP to świetny przykład tego, jak szybko i łatwo można wdrożyć komponenty internetowe w infrastrukturze branży wydawniczej do wyświetlania treści.
Systemy projektowania
Coraz więcej firm łączy sposób, w jaki się przedstawiają, za pomocą systemu projektowania – zestawu komponentów i wytycznych, które określają wspólny wygląd i wrażenia w przypadku witryn i aplikacji organizacji. Tutaj również świetnie sprawdzą się komponenty sieciowe.
Projektanci często muszą rywalizować z wielu zespołami, które tworzą własne wersje komponentów systemu projektowania na podstawie React, Angular i wszystkich innych frameworków, zamiast mieć jeden zestaw kanoniczny komponentów.
Rozwiązaniem są komponenty internetowe – system komponentów, który pozwala pisać raz, a używać wszędzie. Nadal daje on zespołom aplikacji swobodę korzystania z ram wybranych przez nich frameworków.
Firmy takie jak ING, EA i Google implementują w komponentach internetowych język projektowania swojej firmy.
Enterprise: komponenty internetowe w Salesforce
Komponenty internetowe stają się też coraz popularniejsze w firmach, ponieważ są bezpieczną i przyszłościową technologią, którą można stosować w ramach standaryzacji. Caridy Patiño, architekt platformy UI w Salesforce, wyjaśnił, dlaczego Salesforce stworzył swoją platformę UI, używając komponentów internetowych.
Salesforce to zbiór aplikacji, z których wiele powstało w wyniku przejęć. Każdy z nich może działać na osobnym składzie technologicznym. Są one tworzone na podstawie różnych pakietów, więc trudno jest zapewnić im taki sam wygląd i działanie. Salesforce umożliwia też klientom tworzenie własnych aplikacji niestandardowych na platformie Salesforce. Dlatego komponenty powinny być przydatne także dla zewnętrznych deweloperów.
Salesforce zidentyfikowała zestaw potrzeb klientów swojej platformy:
- standardowe, a nie zastrzeżone rozwiązania, aby łatwiej było znaleźć doświadczonych programistów i szybciej szkolić nowych;
- Powszechny model komponentów, dzięki któremu dostosowywanie dowolnej aplikacji Salesforce działa w ten sam sposób.
Zidentyfikowaliśmy też kilka rzeczy, których klienci nie chcieli:
- wprowadzają zmiany w swoich komponentach i aplikacjach, które mogą spowodować problemy. Innymi słowy, zgodność wsteczna była koniecznością.
- Używanie przestarzałej technologii i brak możliwości jej unowoczeszczania.
- Uzależnienie od zamkniętego ekosystemu.
Użycie komponentów sieciowych jako podstawy nowej platformy interfejsu użytkownika pozwoliło spełnić wszystkie te wymagania. Efektem jest nowy zestaw komponentów sieciowych Lightning.
Pierwsze kroki z komponentami internetowymi
Istnieje wiele świetnych sposobów na rozpoczęcie korzystania ze składników internetowych.
Jeśli tworzysz aplikację internetową, rozważ użycie jednego z wielu dostępnych gotowych komponentów internetowych. Oto kilka przykładów:
- Google sprzedaje własny system Material Design w postaci komponentów internetowych: Material Web Components.
- Wired Elements to fajny zestaw komponentów internetowych o nieregularnym, ręcznie rysowanym wyglądzie.
- Dostępne są świetne komponenty internetowe do specjalnych celów, takie jak
<model-viewer>, które możesz wstawiać do dowolnej aplikacji, aby dodawać treści 3D.
Jeśli opracowujesz system projektowania dla swojej firmy lub sprzedajesz pojedynczy komponent lub bibliotekę, które mają być użyte w dowolnym środowisku, rozważ użycie komponentów internetowych. Możesz użyć wbudowanych interfejsów API komponentów sieciowych, ale są one dość niskiego poziomu, więc istnieje wiele bibliotek, które ułatwiają ten proces.
Aby zacząć tworzyć własne komponenty, możesz skorzystać z LitElement, podstawowej klasy komponentów internetowych opracowanej przez Google, która zapewnia świetne renderowanie podobne do React.
Inne narzędzia i biblioteki, które warto wziąć pod uwagę:
- Stencil to środowisko programistyczne oparte na komponentach sieciowych. Obejmuje ono kilka popularnych funkcji platformy, takich jak JSX i TypeScript.
- Elementy Angular umożliwiają owinięcie komponentów Angular jako komponentów internetowych.
- Opakowanie 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 temat korzystania z tej usługi, a także porady i domyślne konfiguracje narzędzi do kompilacji i tworzenia.
- Podstawy tworzenia witryn zawierają wprowadzenie do podstawowych interfejsów API komponentów internetowych oraz sprawdzone metody projektowania komponentów internetowych.
- MDN zawiera dokumenty referencyjne interfejsów API komponentów internetowych oraz samouczki. \
Baner powitalny autorstwa Jasona Tuinstra z Unsplash.
Uwaga redaktora: wykres dotyczący użycia elementów niestandardowych został zaktualizowany, aby wyświetlać pełne dane o użyciu miesięcznym, zgodnie z danymi podanymi na stronie chromestatus.com. W poprzedniej wersji tego posta był to wykres z poziomem szczegółowości 6 miesięcy, bez uwzględnienia ostatnich miesięcy. Na pierwotnym wykresie serie V0 i V1 były ułożone jedna na drugiej. Teraz są one pokazane bez nakładania się, a aby uniknąć niejednoznaczności, dodano linię łączną. Nagły wzrost pod koniec 2017 r. jest spowodowany zmianą w systemie gromadzenia danych na stronie chromestatus.com. Ta zmiana wpłynęła na statystyki dotyczące wszystkich funkcji platformy internetowej i doprowadziła do dokładniejszych pomiarów w przyszłości.