Polymer to brama do niesamowitej przyszłości komponentów sieciowych. Chcemy ułatwić korzystanie z niej i tworzenie elementów niestandardowych. Przez ostatni rok zespół intensywnie pracował nad zestawem kodu polyfill na potrzeby zmieniających się specyfikacji. Ponadto stworzyliśmy wygodną bibliotekę cukrowania, która ułatwia tworzenie komponentów internetowych. Na koniec przygotowujemy zestaw elementów interfejsu i narzędzi użytkowych do ponownego wykorzystania w swoich aplikacjach. Na konferencji Chrome Dev Summit w 2013 roku zagłębię się w różne aspekty projektu Polymer i filozofię stojącą za naszym mantrą „Wszystko jest elementem”.
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html
„Wszystko jest elementem” (od <select> do elementów niestandardowych),
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html#6
Tworzenie stron internetowych w latach 90. XX wieku było ograniczeniem, ale bardzo potężnym. Mieliśmy do dyspozycji tylko kilka elementów. A najważniejsze jest to, że...wszystko było deklaratywne. Przygotowanie strony, elementów sterujących formularza i „aplikacji” bez konieczności pisania dużych ilości kodu JavaScript było niezwykle proste.
Przyjmij skromny element <select>. Element ma mnóstwo przydatnych funkcji – wystarczy go zadeklarować:
- Dostosowywane za pomocą atrybutów HTML
- Renderuje elementy podrzędne (np.
<option>) za pomocą domyślnego interfejsu użytkownika, ale z możliwością konfiguracji za pomocą atrybutów. - Przydaje się w innych kontekstach, np.
<form> - Ma interfejs DOM API: właściwości i metody
- Wywołuje zdarzenia, gdy dzieje się coś ciekawego
Komponenty Web Komponenty zapewniają narzędzia umożliwiające powrót do świetności w tworzeniu stron internetowych. Umożliwia tworzenie nowych elementów przypominających usługę <select>, ale zaprojektowanych pod kątem przypadków użycia z 2014 roku. Na przykład, gdyby wynalezione dzisiaj technologie AJAX zostały prawdopodobnie wymyślone, byłby to tag HTML (przykład):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
lub elementy elastyczne, które są powiązane z atrybutem queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Właśnie takie podejście stosujemy w przypadku platformy Polymer. Zamiast tworzyć monolityczne aplikacje internetowe oparte na języku JavaScript, twórzmy elementy wielokrotnego użytku. Z czasem cała aplikacja składa się z mniejszych elementów. A w całości aplikacji może być jednym z elementów:
<my-app></my-app>
Tworzenie komponentów sieciowych za pomocą specjalnego sosu Polymer
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer udostępnia wiele udogodnień do tworzenia aplikacji opartych na komponentach internetowych:
- Deklaratywna rejestracja elementu:
<polymer-element> - Deklaracja dziedziczenia:
<polymer-element extends="..."> - Deklaracja dwukierunkowego powiązania danych:
<input id="input" value=""> - Deklarowane moduły obsługi zdarzeń:
<button on-click="" - Opublikowane usługi:
xFoo.bar = 5<-><x-foo bar="5"> - Obserwacja obiektu:
barChanged: function() {...} - Domyślne zdarzenia PointerEvents / PointerGes
Moral w historii jest taki, że pisanie elementów Polymer polega na deklaracjach. Im mniej kodu musisz pisać, tym lepiej ;)
Komponenty internetowe: przyszłość tworzenia stron internetowych
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html#26
To byłoby niegrzeczne, gdyby nie wspomnieć o standardach związanych z komponentami internetowymi. Ostatecznie Polymer bazuje na tych rozwijających się podstawowych interfejsach API.
Nadszedł ekscytujący moment w tworzeniu stron internetowych. W przeciwieństwie do innych nowych funkcji dodawanych do platformy internetowej interfejsy API, które składają się na komponenty internetowe, nie są atrakcyjne ani widoczne dla użytkowników. Służą one wyłącznie do zwiększania produktywności programistów. Każdy z 4 głównych interfejsów API jest przydatny sam w sobie, ale razem dzieją się magiczne rzeczy.
- Shadow DOM – styl i enkapsulacja DOM.
- Elementy niestandardowe – definiowanie nowych elementów HTML. Przekaż im interfejs API z właściwościami i metodami.
- Importy HTML to model dystrybucji pakietu plików CSS, JS i HTML.
- Szablony – odpowiednie szablony DOM do definiowania bezwładnych fragmentów znaczników do późniejszego wyostrzenia.
Jeśli chcesz dowiedzieć się więcej o podstawach związanych z interfejsami API, wejdź na webcomponents.org.