Polymer to brama do niezwykłej przyszłości komponentów sieciowych. Chcemy ułatwić korzystanie z niej i tworzenie niestandardowych elementów. Przez ostatni rok zespół ciężko pracował nad zestawem plików polyfill na potrzeby zmieniających się specyfikacji. Utworzyliśmy także wygodną bibliotekę dodawania cukru, która ułatwia tworzenie komponentów sieciowych. Na koniec przygotowujemy zestaw elementów interfejsu i elementów narzędziowych, których możesz użyć w swoich aplikacjach. Podczas konferencji Chrome Dev Summit w 2013 roku zgłębiłam różne aspekty technologii Polymer i filozofię, która kryje się za naszym stwierdzeniem „Wszystko jest elementem”. mantra.
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html
„Wszystko jest pierwiastkiem” (od <select> do elementów niestandardowych)
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html#6
Tworzenie stron internetowych w latach 90. było ograniczające, ale skuteczne. Mieliśmy do dyspozycji tylko kilka elementów. Co jest ważniejsze?...Wszystko było deklaratywne. Tworzenie strony, dodawanie elementów sterujących i zbudowanie „aplikacji” było niezwykle łatwe. bez konieczności pisania kodu JavaScript.
Postaw na skromny element <select>. Element ma mnóstwo funkcji – wystarczy go zadeklarować:
- Możliwość dostosowania za pomocą atrybutów HTML
- Renderuje elementy podrzędne (np.
<option>) przy użyciu domyślnego interfejsu, ale można je skonfigurować za pomocą atrybutów. - Przydatny w innych kontekstach, takich jak
<form> - Ma interfejs DOM API: właściwości i metody
- Uruchamia zdarzenia, gdy wydarzy się coś interesującego
**Komponenty internetowe zapewniają narzędzia, dzięki którym możesz wrócić do czasów rozkwitu programowania stron internetowych. Jeden z nich, w którym możemy tworzyć nowe elementy przypominające <select>, ale zaprojektowane z myślą o zastosowaniach z 2014 roku. Jeśli na przykład wynaleziono dzisiaj technologię AJAX, prawdopodobnie będzie to tag HTML (przykład):
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
Elementy elastyczne, które łączą dane z atrybutem queryMatches:
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…Takie podejście stosujemy w przypadku platformy Polymer. Zamiast tworzyć monolityczne aplikacje internetowe oparte na języku JavaScript, twórz elementy wielokrotnego użytku. Z czasem cała aplikacja składa się z mniejszych elementów. A cała aplikacja może być elementem:
<my-app></my-app>
Tworzenie komponentów sieciowych przy użyciu specjalnego sosu Polymer
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html#37
Polymer ma szereg udogodnień, które pozwalają tworzyć aplikacje oparte na komponentach internetowych:
- Rejestracja elementu deklaracyjnego:
<polymer-element> - Dziedziczenie deklaratywne:
<polymer-element extends="..."> - Deklaracyjne dwukierunkowe wiązanie danych:
<input id="input" value="{{foo}}"> - Deklaracyjne moduły obsługi zdarzeń:
<button on-click="{{handleClick}}"> - Opublikowane usługi:
xFoo.bar = 5<-><x-foo bar="5"> - Obserwacja obiektu:
barChanged: function() {...} - Zdarzenia PointerZdarzenia / Gesty wskaźnika domyślnie
Morał tej historii jest taki, że w tworzeniu pierwiastków w polimerach chodzi przede wszystkim o deklaratywność. Im mniej kodu musisz napisać, tym lepiej ;)
Komponenty sieciowe: przyszłość w tworzeniu stron internetowych
Prezentacje: http://html5-demos.appspot.com/static/cds2013/index.html#26
Byłoby mi szkodą, gdybym nie wspomniał o standardach stojących za komponentami internetowymi. Ostatecznie platforma Polymer opiera się na tych stale rozwijających się podstawowych interfejsach API.
Zbliżamy się do bardzo ekscytującego okresu tworzenia stron internetowych. W przeciwieństwie do innych nowych funkcji wprowadzanych do platformy internetowej interfejsy API, które składają się na komponenty sieciowe, nie są atrakcyjne ani widoczne dla użytkownika. Służą 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 dzieje się coś niezwykłego.
- 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.
- Importy HTML to model dystrybucji pakietów CSS, JS i HTML.
- Szablony – prawidłowe szablony DOM do definiowania obojętnych fragmentów znaczników do późniejszego stempla.
Jeśli chcesz dowiedzieć się więcej o podstawach interfejsów API, odwiedź stronę ebidel.github.com/webcomponents.