폴리머 (라이브러리)

폴리머(polymer)는 웹 컴포넌트를 사용하여 웹 애플리케이션을 빌드하기 위한 오픈 소스 자바스크립트 라이브러리이다. 이 라이브러리는 구글의 개발자들과 깃허브의 기여자들에 의해 개발되고 있다. 현대의 디자인 원칙은 구글의 머티리얼 디자인 디자인 원칙을 사용하여 별개의 프로젝트로 구현되어 있다.

폴리머

개발자	구글[1] and contributors[2]
발표일	2015년 5월 29일(10년 전)(2015-05-29)[3]
안정화 버전
1.x  1.12.0 / 2019년 5월 21일(6년 전)(2019-05-21)[4] 2.x 2.8.0 / 2019년 6월 24일(6년 전)(2019-06-24)[4] 3.x 3.5.2[5]  / 2024년 10월 7일(9개월 전)(2024년 10월 7일)
저장소	(영어) polymer - 깃허브
프로그래밍 언어	자바스크립트, HTML
종류	자바스크립트 라이브러리
라이선스	3-Clause BSD[6]
웹사이트	www.polymer-project.org

폴리머는 유튜브, 유튜브 게이밍, 재설계된 구글 어스(2017년부터)^[7] 구글 I/O 2015와 2016 웹사이트, 구글 플레이 뮤직, 구글 사이트의 리디자인^[8] 웹용 알로(2019년 종료 전까지)를 포함한 수많은 구글 서비스와 웹사이트에 의해 사용된다.^[9]

다른 저명한 사용처는 넷플릭스, 일렉트로닉 아츠, 컴캐스트, Nuxeo, ING 그룹, 코카콜라, 맥도널드, BBVA, IBM, 제네럴 일렉트릭 등이 있다.

커스텀 엘리먼트

커스텀 엘리먼트는 클래스가 있는 ES(ECMA스크립트, 대부분은 자바스크립트) 모듈을 사용하여 개발이 가능하다. 커스텀 엘리먼트 정의는 CSS 스타일, 엘리먼트의 로컬 DOM의 HTML 템플릿, 엘리먼트 속성, 라이프사이클 콜백, 자바스크립트 메소드로 구성된다:

import {PolymerElement, html} from '@polymer/polymer/polymer-element.js'

class HelloElement extends PolymerElement {

    static get template() {
        return html`
        <style>
        /* Local DOM CSS style */
        </style>
        <!-- Local DOM -->
        Hello {{name}}!
        `;
    }

    static get is() { return 'hello-element'; }
    static get properties() {
        return {
            name: {
                type: String
            }
            /* Element properties */
        }
    }
    /* Custom methods */
}
window.customElements.define(HelloElement.is, HelloElement);

위에 정의된 엘리먼트는 HTML 코드 안에 사용할 수 있다:

    <hello-element name="World"></hello-element>

같이 보기

• Vue.js
• AngularJS
• React