Polymer to jedna z drzwi do niesamowitej przyszłości Web Components. Chcemy ułatwić tworzenie i używanie elementów niestandardowych. W ciągu ostatniego roku zespół ciężko pracował nad zestawem polyfilli dla rozwijających się specyfikacji. Dodatkowo stworzyliśmy wygodną bibliotekę do tworzenia komponentów internetowych. Na koniec tworzymy zestaw elementów interfejsu i użytecznych elementów, które można ponownie wykorzystać w aplikacjach. Podczas szczytu Chrome Dev Summit 2013 omówiłem różne części Polymer i filozofię stojącą za 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 w. było ograniczone, ale skuteczne. Mieliśmy tylko kilka elementów. Najważniejsze jest to, że wszystko jest deklaratywne. Stworzenie strony, dodanie elementów sterujących formularzem i utworzenie „aplikacji” bez konieczności pisania mnóstwa kodu JavaScript było niesamowicie proste.
Weźmy na przykład prosty element <select>. Element ma wiele wbudowanych funkcji, które są dostępne po jego zadeklarowaniu:
- możliwość dostosowania za pomocą atrybutów HTML;
- Renderuje elementy podrzędne (np.
<option>) za pomocą domyślnego interfejsu użytkownika, ale można je skonfigurować za pomocą atrybutów. - Przydatne w innych kontekstach, np.
<form> - Posiada interfejs DOM API: właściwości i metody
- Uruchamia zdarzenia, gdy dzieją się interesujące rzeczy
Komponenty internetowe zapewniają narzędzia, które pozwolą Ci wrócić do tych złotych czasów rozwoju stron internetowych. Możemy tworzyć nowe elementy przypominające <select>, ale zaprojektowane z myślą o użytkowaniu w 2014 roku. Jeśli na przykład AJAX zostałby wynaleziony dzisiaj, prawdopodobnie byłby 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 danymi za pomocą atrybutu queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="">
Właśnie tego używamy w Polymer. Zamiast tworzyć monolityczne aplikacje internetowe oparte na JavaScriptzie, utwórz elementy, które można wielokrotnie używać. Z czasem cała aplikacja powstaje z kombinacji mniejszych elementów. Cała aplikacja może być elementem:
<my-app></my-app>
Tworzenie komponentów internetowych z dodatkiem specjalnego sosu Polymer
Slajdy: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer zawiera kilka udogodnień ułatwiających tworzenie aplikacji opartych na komponentach WWW:
- Rejestracja elementu deklaratywnego:
<polymer-element> - Dziedziczenie deklaratywnie:
<polymer-element extends="..."> - Deklaratywne dwukierunkowe powiązanie danych:
<input id="input" value=""> - Deklaratywna obsługa zdarzeń:
<button on-click="" - Opublikowane usługi:
xFoo.bar = 5<-><x-foo bar="5"> - Obserwowanie usługi:
barChanged: function() {...} - Domyślnie zdarzenia wskaźnika / gesty wskaźnika
Morał z tego jest taki, że pisanie elementów Polymer powinno być deklaracyjne. 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 sposób nie wspomnieć o standardach dotyczących komponentów internetowych. Polymer opiera się przecież na tych rozwijających się podstawowych interfejsach API.
Wchodzimy w bardzo ekscytujący okres rozwoju stron internetowych. W przeciwieństwie do innych nowych funkcji dodawanych do platformy internetowej interfejsy API, które składają się na Web Components, nie są nowatorskie ani nie są przeznaczone dla użytkowników. Są one przeznaczone wyłącznie do zwiększenia produktywności programistów. Każdy z tych 4 głównych interfejsów API jest przydatny sam w sobie, ale razem dzieją się prawdziwe cuda.
- Shadow DOM – styl i enkapsulacja DOM
- Elementy niestandardowe – definiowanie nowych elementów HTML. Udostępnij im interfejs API z właściwościami i metodami.
- Import HTML to model dystrybucji pakietu CSS, JS i HTML.
- Szablony – prawidłowe szablony DOM do definiowania nieaktywnych fragmentów znaczników, które mają być później wymazywane.
Jeśli chcesz dowiedzieć się więcej o podstawach interfejsów API, odwiedź stronę webcomponents.org.