Google Polymer – Web Components

Tutkaan on osunut hiljattain Googlen Polymer-projekti. Projekti on vasta varhais-asteella, ei edes beta-tasolla, mutta omaan makuun varsin lupaava. Sen ohella että se on cool ja näyttää hyvältä, ja vastaa visuaalisesti omaa makua (tilankäyttö, yksinkertaisuus, animaatiot) – se tarjoaa myös puhtia ja ammattimaisuutta uudelleenkäyttöön.

 http://www.polymer-project.org/

Polymerin ideana on laajentaa selaimen tarjoamaa html-tagistöä omilla custom tageilla. Tarjolla on jo reipas määrä komponentteja, mutta kun jokainen kehittäjä voi tehdä ja paketoida niitä lisää, hommassa on potentiaalia.Uusista elementeistä syntyy ’Shadow DOM’ – eli Document Object Model mukainen rakenne jota voi tuttuun tapaan käsitellä JavaScriptistä ja viitata CSS:stä – mutta jota voi itse laajentaa tekemällä uusia komponentteja. Tässä esimerkki Polymer Shadow DOM tagista:

<google-map latitude="37.77493" longitude="-122.41942"></google-map>

Tuon takana on tietysti HTML ja JavaScript-koodia. Serveripäässä tässä ei olisi mitään ihmeellistä – mutta tämä toimiikin Polymerin ansiosta suoraan selaimessa.

Tässä esimerkki omasta custom elementistä:

<!-- Import polymer library -->
<link rel="import" href="../bower_components/polymer/polymer.html">

<!-- Define hello-world element with Polymer -->
<polymer-element name="my-element" noscript>
  <template>
    <span>Hello from <b>my-element</b>. This is my Shadow DOM.</span>
  </template>
</polymer-element>

<!-- (re)Use your element -->
<my-element/>

Lisäksi tähän liittyy Android Material Design – Polymer alustalle on määritetty jo komponenttipaketti nimellä Paper, joka esittelee näitä Material Design periaatteita. Sieltä löytyy paperisivun tapoin käyttäytyviä leiskoja, helppoja varjostus ja syvyysefektejä, animaatioita Hero-elementillä, ja ripple-efektejä joilla demonstroidaan selkeästi mitä voi klikata/koskettaa ja mitä ei.

Näyttäisi siltä että AngularJS versioon 2 on tulossa myös Polymer/Web Components komponenttimalliksi. Silti ei ehkä kannata henkeään pidätellä odotettaessa; Näyttää että Angular v2 tulee sisältämään suunnilleen kaiken mitä ihmiskunta on keksinyt joten on hyvin todennäköistä että se ei valmistu/toimi koskaan. Sinällään Polymer ja Angular toimivat jo nyt hyvin yhteen, mutta aina on nikottelua, esim. karma-testit PhantomJS:llä eivät pelaa Polymerin kanssa – phantomista kun puuttuu osia joita Polymer suorastaan vaatii.

Polymerin roolina on tuoda Polyfill tuki jo ennen kuin se virallisesti selaimista sisäänrakennettuina löytyisi. Polyfill taas luo perustan laajennettavuudelle. Mutta ihan joka selaimeen ei tukea ole tarjolla tälläkään hetkellä. IE-puolella lähdetään versiosta 10 liikkeelle.

Polymer ei keksi koko pyörää uudestaan – nykyisellään se on vain laajennettavien UI-komponenttien framework: Se ei tuo esim. mitään MVC mallia eikä sisällä esim. useita Angular-piirteitä. Polymer on yhden tempun poni, mutta se tekee sen todella hyvin.

Mutta hieno ja varsin lupaava palikka tämäkin! Sormet syyhyäisivät päästä soveltamaan isosti..

Linkkejä:

http://en.wikipedia.org/wiki/Polyfill

http://www.polymer-project.org/resources/compatibility.html

http://googlewebcomponents.github.io/google-map/components/google-map/#google-map

http://www.polymer-project.org/docs/elements/paper-elements.html

Mainokset

Vastaa

Täytä tietosi alle tai klikkaa kuvaketta kirjautuaksesi sisään:

WordPress.com-logo

Olet kommentoimassa WordPress.com -tilin nimissä. Log Out / Muuta )

Twitter-kuva

Olet kommentoimassa Twitter -tilin nimissä. Log Out / Muuta )

Facebook-kuva

Olet kommentoimassa Facebook -tilin nimissä. Log Out / Muuta )

Google+ photo

Olet kommentoimassa Google+ -tilin nimissä. Log Out / Muuta )

Muodostetaan yhteyttä palveluun %s