zamknij
Polymer narzędziem do rozszerzania DOMu

Polymer narzędziem do rozszerzania DOMu

Dominika ZaleskaDominika Zaleska

Polymer-wyrozniający

 

W poprzednim artykule opowiedzieliśmy sobie ogólnie na temat Google Polymer Project, czym jest, jakie elementy posiada oraz w jakich projektach został wykorzystany. Artykuł ten będzie w całości poświęcony podstawowej misji Polymerów i sposobowi myślenia w trakcie tworzenia i używania elementów.

Logo Polymer Project, źródło: https://blog.polymer-project.org/images/logos/p-logo.png

Zacznijmy od DOMu (Document Object Model), czyli podstawowego interface’u programowania HTMLa, tworzonego przez przeglądarkę jako drzewo jego obiektów (elementów) w czasie ładowania strony. DOM definiuje elementy HTMLa jako obiekty, ich właściwości (properties), metody (methods) oraz wydarzenia (events). Jednak DOM sam w sobie ma jeszcze 1 bardzo ważną zaletę – sam złożony jest z komponentów (elementów, obiektów), takich samych jak te tworzone dzięki Polymerom. Dodatkowo posiada koncept przepływu danych w czasie rzeczywistym tylko za pomocą atrybutów (attributes) i właściwości (properties) elementów, bez używania Javascriptu. Początkowo DOM nie był rozszerzalny, a wszelkie dodatkowe fragmenty i właściwości aplikacji internetowych były budowane wokół i na podstawie samego DOMu bez ingerencji w jego podstawową strukturę. Dziś, w erze Web Componentów, sami możemy rozszerzać DOM dzięki własnym Web Componentom. Początkowo tworzenie Polymerów wiązało się z wykorzystywaniem podstawowych technik DOMu, takich jak: atrybutes, querySelectors, addEventListeners, setters, getters i templates. Misją twórców Polymer Project jest jednak ograniczenie ich do wymaganego minimum, pozwalając developerom na budowanie swoich elementów w elegancki i produktywny sposób.

Opracowanie własne na podstawie prezentacji Kevina Schaaf, “Thinking in Polymer”, Polymer Summit 2015

Tworzenie Polymerów opiera się na 3 podstawowych zasadach:

  1. Myślimy lokalnie, tworząc dany element, obracamy się tylko w jego obrębie, a po wykonaniu go zapominamy o jego wnętrzu i przechodzimy do innych części aplikacji.
  2. Polymery, elementy układają się w ramach kompozycji drzewa, czyli elementy nadrzędne (hosts) zawierają elementy podrzędne (children).
  3. W ramach wzoru pośrednika, element nadrzędny (host) pośredniczy w komunikacji pomiędzy jego elementami podrzędnymi (children) jako elementami tego samego poziomu (siblings), wykorzystując ich APIs (Application Programming Interface). Nadaje im odpowiednie właściwości (properties), odbiera wydarzenia (events) pochodzące od nich, a nawet przekazuje dane do innych elementów podrzędnych (children).

Ten prosty model pozwala na budowanie rozbudowanych aplikacji opartych w całości na kompozycji elementów, połączonych ze sobą dzięki systemowi przepływu danych (tzw. Data Binding). Zarówno podstawowa misja Polymerów jako narzędzia do rozszerzania struktury DOMu jak i sposób kompozycji elementów i struktury danych w jej ramach utwierdzają w przekonaniu o mocy drzemiącej w Polymerach.

Grafika (logo).

microsoft

Dziś ciężko być wrogiem Microsoftu

kozłowski

Lublin Startup Festival, czyli wszystko co musisz wiedzieć o startup’ach

Przeczytaj poprzedni wpis:
microsoft
Dziś ciężko być wrogiem Microsoftu

Fortuna kołem się toczy. Marki, które do niedawna były uznawane za najbardziej innowacyjne (choć to chyba najmocniej wyeksploatowane słowo w...

Zamknij