Polymer to jedna z bram do niesamowitej przyszłości komponentów internetowych. Chcemy ułatwić korzystanie z elementów niestandardowych i ich tworzenie. Przez ostatni rok zespół intensywnie pracował nad zestawem polyfilli dla rozwijających się specyfikacji. Oprócz tego stworzyliśmy wygodną bibliotekę, która ułatwia tworzenie komponentów internetowych. Na koniec tworzymy zestaw elementów interfejsu i narzędzi, które można wykorzystać w aplikacjach. Podczas Chrome Dev Summit 2013 omówiłem różne części Polymer i filozofię, która kryje się za naszą mantrą „Wszystko jest elementem”.
Slajdy: http://html5-demos.appspot.com/static/cds2013/index.html
„Wszystko jest elementem” (od <select> do elementów niestandardowych)
Slajdy: http://html5-demos.appspot.com/static/cds2013/index.html#6
Tworzenie stron internetowych w latach 90. było ograniczone, ale miało duży potencjał. Mieliśmy do dyspozycji tylko kilka elementów. Najlepsze jest to, że wszystko było deklaratywne. Tworzenie strony, dodawanie elementów sterujących formularza i tworzenie „aplikacji” bez pisania dużej ilości kodu JavaScript było niezwykle proste.
Weźmy na przykład prosty element <select>. Element ten ma wiele funkcji, które można wykorzystać, po prostu go deklarując:
- Możliwość dostosowywania za pomocą atrybutów HTML
- Renderuje elementy podrzędne (np.
<option>) z domyślnym interfejsem, ale z możliwością konfiguracji za pomocą atrybutów. - Przydatne w innych kontekstach, takich jak
<form> - ma interfejs DOM API: właściwości i metody;
- Uruchamia zdarzenia, gdy dzieje się coś interesującego.
Komponenty internetowe zapewniają narzędzia, które pozwalają wrócić do tych czasów świetności tworzenia stron internetowych. Takiego, w którym możemy tworzyć nowe elementy, przypominające <select>, ale zaprojektowane pod kątem przypadków użycia z 2014 roku. Jeśli na przykład technologia AJAX zostałaby wynaleziona dzisiaj, prawdopodobnie byłaby tagiem HTML (przykład):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Możesz też użyć elementów elastycznych, 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 Polymer. Zamiast tworzyć monolityczne aplikacje internetowe oparte na języku JavaScript, utwórzmy elementy wielokrotnego użytku. Z czasem cała aplikacja powstaje z połączenia mniejszych elementów. Elementem może być nawet cała aplikacja:
<my-app></my-app>
Tworzenie komponentów internetowych z użyciem specjalnych funkcji Polymer
Slajdy: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer zawiera szereg udogodnień do tworzenia aplikacji opartych na komponentach internetowych:
- Deklaratywna rejestracja elementów:
<polymer-element> - Dziedziczenie deklaratywne:
<polymer-element extends="..."> - Deklaratywne dwukierunkowe wiązanie danych:
<input id="input" value=""> - Deklaratywne moduły obsługi zdarzeń:
<button on-click="" - Opublikowane właściwości:
xFoo.bar = 5<-><x-foo bar="5"> - Obserwacja właściwości:
barChanged: function() {...} - PointerEvents / PointerGestures domyślnie
Morał z tej historii jest taki, że pisanie elementów Polymer polega na deklaratywności. Im mniej kodu musisz napisać, tym lepiej ;)
Komponenty internetowe: przyszłość tworzenia stron internetowych
Slajdy: http://html5-demos.appspot.com/static/cds2013/index.html#26
Nie byłbym sobą, gdybym nie wspomniał o standardach, na których opierają się komponenty internetowe. W końcu Polymer opiera się na tych rozwijających się podstawowych interfejsach API.
W dziedzinie tworzenia stron internetowych nastały ekscytujące czasy. W przeciwieństwie do innych nowych funkcji dodawanych do platformy internetowej interfejsy API, które tworzą komponenty internetowe, nie są efektowne ani widoczne dla użytkownika. Służą wyłącznie do zwiększania produktywności deweloperów. Każdy z 4 głównych interfejsów API jest przydatny sam w sobie, ale razem dają niesamowite możliwości.
- Shadow DOM – enkapsulacja stylu i DOM
- Elementy niestandardowe – definiowanie nowych elementów HTML. Udostępnij im interfejs API z właściwościami i metodami.
- Importy HTML to model dystrybucji pakietu CSS, JS i HTML.
- Szablony – prawidłowe tworzenie szablonów DOM do definiowania nieaktywnych fragmentów znaczników, które zostaną później usunięte.
Jeśli chcesz dowiedzieć się więcej o podstawach interfejsów API, odwiedź stronę webcomponents.org.