Polymer를 이용해서 트위터를 만들어 봤어요.

개시하다

Web Components는 피가 뜨거운 것 같아서 지금까지 Polymer를 사용해 봤습니다.
이번에는 예를 들어 트위터의 잔소리 버튼을 만들어 보자.

Web Components

WebComponents.org
작년과 재작년에 유행했기 때문에 아실 거예요. 그런데 안녕히 계세요.

특징.

설치만 하면 간편하게 재활용할 수 있다.
버튼과 UI 위젯의 HTML, CSS, JS 코드를 재사용할 수 있도록 웹 표준 기술!
그리고 CSS는 역할 범위가 있어서 거기를 변경하면 이쪽이 무너지지 않아요.

기능

Custom Elements

HTML Imports

template element

Shadow DOM

이 보도를 상세하게 총결하였다.
웹 Components의 구성 요소 요약(기본 편)

Polymer

Polymer
웹 Components 기반 라이브러리
웹 Components 하면 Polymer인 것 같은데 한번 해 볼게요.
그나저나 v2 하마터면 나올 뻔했어. 이 보도도 소용없을 거야.

차리다

polymer-cli를 사용하여 프로젝트를 만듭니다.

$ polymer init
? Which starter template would you like to use? (Use arrow keys)
❯ element - A blank element template 
  application - A blank application template 
  shop - The "Shop" Progressive Web App demo 
  starter-kit - A starter application template, with navigation and "PRPL pattern" loading 
info:    Running template element...
? Element name tweet-button
? Brief description of the element 

이번에는 부품을 만들고 싶어서 선택했다element.
bower의 프로그램 라이브러리를 설치하면 다음과 같은 파일을 만들 수 있습니다.

tweet-button.] -본체

demo/index.] - 동작 확인용 >

먼저 시동을 걸다.

$ polymer serve
Starting Polyserve...
    serving on port: 8080
    from root: /Users/k_hatano/tmp/polymer

Files in this directory are available under the following URLs
    applications: http://localhost:8080
    reusable components: http://localhost:8080/components/tweet-button/

http://localhost:8080/demo/에 액세스할 때 스크립트가 404 오류일 수 있습니다.
읽기bower_components 아래 내용에 따라 경로를 적당히 바꾸세요.
나는 Hello의 물건을 표시하고 싶다.

이루어지다

절차.

이렇게 된 기분이야.
tweet-button.html

<link rel="import" href="bower_components/polymer/polymer.html">

<!--
`tweet-button`


@demo demo/index.html 
-->

<dom-module id="tweet-button">
  <template>
    <a class="twitter-share-button"
       href="https://twitter.com/share"
       data-size$="[[size]]"
       data-text$="[[text]]"
       data-url$="[[url]]"
       data-hashtags$="[[hashTags]]"
       data-via$="[[via]]"
       data-related$="[[related]]"
       data-lang$="[[lang]]"
       data-dnt$="[[dnt]]">
      Tweet
    </a>
  </template>
  <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>

  <script>
    Polymer({

      is: 'tweet-button',

      properties: {
        size: {
          type: String
        },
        text: {
          type: String
        },
        url: {
          type: String
        },
        hashTags: {
          type: String
        },
        via: {
          type: String
        },
        related: {
          type: String
        },
        lang: {
          type: String
        },
        dnt: {
          type: Boolean
        }
      }

    });
  </script>
</dom-module>

사용법

<tweet-button url="http://example.com" text="foo" via="twitterdev" hash-tags="example,demo"></tweet-button>

가장 적합한 곳

bind의 쓰기

attribute bind와 함께 $

<a href$="{{hostProperty}}">

맞춤형property일 때 그래요.

<my-element my-property="{{hostProperty}}">

{{}}와[[]]의 차이

{{}}는 양방향이고, [[]]는 단방향 귀속이다.

총결산

Twitter는 단순한 느낌으로 만들었지만 Polymer의 사용법을 볼 수 있을 것 같다.
다만, polymer-cli 아직 익숙하지 않은 것 같아요.
Web Components 2016 & Polymer v2
위 자료에 의하면 웹 Component 근처에
v2가 나왔는데 Polymer와 웹 Component 자체를 정식으로 배우고 싶습니다.