Chrome Dev Summit 2014 – Polymer – „State of the Union”

Polymer i komponenty internetowe to ostatnio bardzo popularne tematy, a ponieważ ten ekosystem rozwija się bardzo szybko, deweloperzy często mają problemy z śledzeniem wszystkich najnowszych zmian.

Podczas Chrome Dev Summit Matt McNulty, menedżer ds. inżynieryjnych w zespole Polymer, wyjaśnił, czym jest Polymer, i przedstawił plan rozwoju Polymer 1.0.

Czym jest Polymer?

Na początek: czym dokładnie jest Polymer?

Polymer to biblioteka, która ułatwia tworzenie elementów i aplikacji z komponentów internetowych. Komponenty internetowe to najnowszy zestaw nowych standardów, który pozwala deweloperom rozszerzać słownictwo HTML o własne elementy niestandardowe.

Polymer pomaga programistom szybciej tworzyć aplikacje

Komponenty internetowe zostały zaprojektowane jako nowy element podstawowy dla przeglądarki, co oznacza, że są bardzo wydajne, ale też bardzo niskie, a praca z nimi wymaga sporo kodu.

Polymer ułatwia korzystanie z komponentów internetowych

Polymer ułatwia pracę z komponentami internetowymi dzięki „upiększeniu” składni. Zmniejsza ilość powtarzającego się kodu, który trzeba napisać, i dodaje styl deklaratywny, dzięki czemu tworzenie komponentów internetowych jest tak proste jak pisanie kodu HTML.

Polimerowy eksperyment

Polymer powstał jako eksperyment mający na celu sprawdzenie, czy uda się nam zastosować polyfill do standardów komponentów internetowych i uzyskanie opinii od deweloperów, zanim te technologie zostaną udostępnione we wszystkich przeglądarkach. Wraz z tym, jak coraz więcej programistów zaczęło używać Polymer, biblioteka przekształciła się z tego, co było tylko polyfillem, w prawdziwą bibliotekę pełną funkcji zwiększających produktywność (wiązanie danych, obserwowanie zmian atrybutów, automatyczne znajdowanie węzłów itp.). Ale wszystkie eksperymenty dają wyniki, więc jak nam poszło?

Karta raportu polimeru wymaga ulepszenia

Wielu deweloperów twierdzi, że podoba im się możliwości i produktywność, jakie daje praca z elementami webowymi w Polymerze, ale mają też obawy dotyczące wydajności i ogólnej złożoności.

To pokazuje naturalne napięcie, które towarzyszyło Polymerowi od samego początku: być eksperymentem, który rozwija platformę internetową, ale też tworzyć coś, co nadaje się do wdrożenia i na co deweloperzy mogą polegać.

Nadchodzące zmiany

Zespół Polymer dokładnie przeanalizował wszystkie funkcje biblioteki, aby stworzyć szczuplejszą wersję gotową do wdrożenia, której deweloperzy będą mogli używać bez obaw.

Warstwy

Polymer został przekształcony w serię warstw. Podstawowe funkcje są szybkie i nieskomplikowane, a zaawansowane funkcje będą wymagały rejestracji. W większości przypadków funkcje podstawowe powinny spełniać potrzeby deweloperów.

Polymer został przebudowany na warstwy

Uproszczone wiązanie danych

System wiązania danych Polymer został też znacznie zoptymalizowany pod kątem wydajności. Zgodnie z podwójnym podejściem wiązanie dwukierunkowe wymaga teraz wyrażenia zgody, a domyślnie stosowane są wiązania jednokierunkowe. Ponadto opublikowane typy właściwości zostały wyraźnie określone, a zmiana właściwości powoduje teraz wywołanie zdarzenia, aby ułatwić elementom z różnych bibliotek łatwiejszą komunikację.

Uproszczone zostało wiązanie danych

Zwinne cienie DOM

Rozszerzenie do obsługi interfejsu Shadow DOM to niesamowity wyczyn inżynieryjny. Został on zaprojektowany tak, aby był kompleksowy i zgodny ze specyfikacją, co jest ważne dla dokładnego przetestowania platformy, ale niestety powoduje pewne problemy z wydajnością w przypadku funkcji, których Polymer nie używa.

W następnej wersji Polymer zastosujemy inne podejście, wykorzystując warstwę typu shim, która wypełnia tylko te funkcje, których potrzebuje Polymer.

Shim shadowdom jest znacznie szybszy

Istniejący polyfill będzie nadal działać w przypadku ogólnych komponentów internetowych innych niż Polymer.

Przenoszenie do webcomponents.org

Wracając do polyfilli, również one mają nowe miejsce. Obecnie wielu deweloperów ma problemy ze zrozumieniem relacji między Polymer a Web Components. Niektórzy uważają, że do korzystania z komponentów internetowych trzeba używać całej biblioteki Polymer, podczas gdy w rzeczywistości wystarczy tylko polyfill.

Aby wyraźniej zaznaczyć to rozróżnienie, przenosimy polyfille do witryny webcomponents.org i zmieniamy ich nazwę na webcomponents.js.

Przenoszenie wypełniaczy do webcomponents.org

Ma to pomóc innym autorom bibliotek korzystać z polyfillów bez żadnych problemów. Zespół Polymer będzie nadal rozwijać polyfille, ale mamy nadzieję, że ta zmiana sprawi, że staną się one bardziej przydatnym zasobem dla społeczności.

Wyniki

Jakie są wyniki po wprowadzeniu tych wszystkich zmian?

Szybkość

W Chrome biblioteka Polymer działa teraz 5 razy szybciej, a w Safari 8 razy szybciej.

Polymer jest teraz 8 razy szybszy w Safari

Rozmiar pliku

Rozmiar pliku został również zmniejszony o 87%, z 123 KB do 15 KB (6 KB w formacie skompresowanym).

Polimer jest teraz mniejszy o 87%

Plan działań

W następnej wersji pojawią się zmiany powodujące niezgodność z interfejsem API, co oznacza nowy numer wersji (0.8), ale zespół chce podkreślić, że nie jest to całkowite przebudowanie. Przeniesienie bieżącego projektu z wersji Polymer 0.5 do 0.8 powinno być dość proste.

Zespół Polymer przedstawił też plan rozwoju, aby pomóc deweloperom w lepszym zrozumieniu nadchodzących wersji.

roadmapa Polymer, wersja beta w I kwartale, wersja 1.0 w II kwartale

Wersja 0.8 w wersji podglądowej jest teraz dostępna jako gałąź na GitHubie (chociaż nadal jest intensywnie rozwijana i brakuje jej dokumentacji). Wersja beta 0.9 jest planowana na I kwartał 2015 r., a wersja 1.0 – na II kwartał.

Eksperyment zakończony

Dzięki ostatnim zmianom w Polymer zespół odpowiedzialny za ten projekt tworzy podstawy, które pozwolą na to, aby Web Components stały się integralną częścią zestawu narzędzi każdego programisty. Jeśli dopiero zaczynasz korzystać z komponentów internetowych, teraz jest dobry moment, aby zapoznać się z tymi przełomowymi technologiami. Jeśli korzystasz już z komponentów (i z Polymer), przyszłość wygląda naprawdę obiecująco. Najnowsze informacje znajdziesz na blogu Polymer. Aby zadawać pytania lub przekazywać komentarze, zasubskrybuj listę mailingową Polymer. Powodzenia!