Web Components

Web Components

Trond Klakken / @trondkla

open.bekk.no

• Eget backbone view og model?
• Javascript som søker igjennom DOM etter #star ved hvert ajax request
• Last inn hele angular?!

Custome Element

        
<polymer-ui-ratings value="3" count="5" />
        
        

• Egne tag-er
• Forbedre API til eksisterende tag-er
• Bedre semantikk, ikke div div
• personId="1337"
• Implementasjon ikke helt bestemt

Polymer Project

• Polyfill
• Utviklet av Google

Definer eget Custom Element

<polymer-element name="demo-overskrift" attributes="overskrift">
  <template>
    <style> ... </style>
    <h1>{{overskrift}}</h1>
    <input value="{{overskrift}}">
  </template>
  <script>
    Polymer('demo-overskrift', {
      overskrift: "",
      overskriftChanged: function() {
        console.log(this.overskrift)
      }
    });
  </script>
</polymer-element>
        

• Delt opp templates og javascript, men sammen
• Javascript skal være kort og enkelt, ikke store libraries

HTML Templates

        
<template>
  Navn: <input value="{{navn}}">
</template>
        
        

HTML Imports

        
<link rel="import" href="demo-overskrift.html" />
        
        

Hvordan laster jeg denne for å bruke den?

Shadow DOOM

Oops en O for mye

Shadow DOM

• Egen DOM inni DOMen
• Hindrer name-space kollisjoner i Javascript og CSS
• Legg merke til id, id. Ligger egentlig i template over

Shadow DOM

        
<template>
  <link rel="stylesheet" href="polymer-ui-ratings.css" data-inprogress="">
  <template repeat="{{star in stars}}">
    <span id="star">
    </span>
  </template>
</template>
        
        

• Egen DOM inni DOMen
• Hindrer name-space kollisjoner i Javascript og CSS
• Legg merke til id, id. Ligger egentlig i template over

Fordeler

• Nativ browser-støtte
• Single Responsibility
• Mindre namespace kollisjoner
• Modulært, DRY

Mindre kollisjoner i Javascript og CSS

Trenger bare å tenke på sin egen DOM, JS og CSS

Ulemper

• Fortsatt ungt
• Ytelse?
• Nativ browser-støtte ikke enda fullt på plass Men man har Polymer!

Takk for meg!