폴리머 선언적, 캡슐화, 재사용 가능한 구성요소

Polymer는 웹 구성요소의 놀라운 미래로 향하는 하나의 게이트웨이입니다. 우리는 사용자설정 요소를 쉽게 사용하고 빌드할 수 있도록 만들고자 합니다. 지난 한 해 동안 팀은 변화하는 사양에 맞춰 폴리필 세트를 위해 열심히 노력해 왔습니다. 게다가 우리는 웹 구성 요소를 더 쉽게 빌드할 수 있도록 편리한 슈가링 라이브러리를 만들었습니다. 마지막으로 앱에서 재사용할 UI 및 유틸리티 요소 집합을 만듭니다. 2013 Chrome Dev Summit에서 저는 Polymer의 여러 부분과 '모든 것이 하나의 요소'라는 철학에 관해 자세히 알아보았습니다. 만트라입니다.

프레젠테이션: http://html5-demos.appspot.com/static/cds2013/index.html

"모든 것이 하나의 요소입니다." (<select>에서 맞춤 요소로)

프레젠테이션: http://html5-demos.appspot.com/static/cds2013/index.html#6

90년대에 웹페이지를 만드는 것은 제한적이지만 강력했습니다. 우리가 사용할 수 있는 것은 몇 가지뿐이었습니다. 가장 큰 장점은...모든 것이 선언적이었어요. 페이지를 만들고, 양식 컨트롤을 추가하고, '앱'을 만드는 것은 매우 간단했습니다. 간단한 자바스크립트 작업을 수행할 수 있습니다.

소박한 <select> 요소를 살펴보겠습니다. 이 요소에는 선언하기만 하면 많은 기능이 내장되어 있습니다.

  • HTML 속성을 통해 맞춤설정 가능
  • 기본 UI를 사용하여 하위 요소 (예: <option>)를 렌더링하지만 속성을 통해 구성할 수 있습니다.
  • <form>과(와) 같은 다른 문맥에서 유용합니다.
  • DOM API: 속성 및 메서드 있음
  • 흥미로운 일이 발생하면 이벤트를 실행합니다.

**웹 구성요소는 현재의 웹 개발 시대로 돌아갈 수 있는 도구를 제공합니다. <select>와 유사하지만 2014의 사용 사례에 맞게 설계된 새 요소를 만들 수 있습니다. 예를 들어, AJAX가 오늘 발명되었다면 이는 아마 HTML 태그일 것입니다 (예).

<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
               params='{"alt":"json"}'></polymer-ajax>

또는 queryMatches 속성에 데이터 결합되는 반응형 요소:

<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…

Polymer에서 사용하고 있는 접근 방식입니다. 이제 모놀리식 JavaScript 기반 웹 앱을 빌드하는 대신 재사용 가능한 요소를 만들어 보겠습니다. 시간이 지남에 따라 작은 요소를 함께 구성함으로써 전체 앱이 성장합니다. 그리고 앱 전체가 하나의 요소가 될 수 있습니다.

<my-app></my-app>

Polymer의 특별한 소스로 웹 구성요소 빌드

프레젠테이션: http://html5-demos.appspot.com/static/cds2013/index.html#37

Polymer에는 웹 구성요소 기반 애플리케이션을 빌드하는 데 필요한 다양한 편의성이 포함되어 있습니다.

  • 선언적 요소 등록: <polymer-element>
  • 선언적 상속: <polymer-element extends="...">
  • 선언적 양방향 데이터 결합: <input id="input" value="{{foo}}">
  • 선언적 이벤트 핸들러: <button on-click="{{handleClick}}">
  • 게시된 속성: xFoo.bar = 5 <-> <x-foo bar="5">
  • 부동산 관찰: barChanged: function() {...}
  • 기본적으로 PointerEvents / PointerGestures

폴리머 요소를 작성하는 것은 선언적이 된다는 것입니다. 작성해야 하는 코드가 적을수록 좋습니다. ;)

웹 구성요소: 웹 개발의 미래

프레젠테이션: http://html5-demos.appspot.com/static/cds2013/index.html#26

웹 구성요소의 표준을 알리지 않았다면 아쉽습니다. Polymer는 이렇게 진화하는 기본 API를 기반으로 하기 때문입니다.

지금은 웹 개발 분야에서 매우 흥미진진한 시기를 보내고 있습니다. 웹 플랫폼에 추가되는 다른 새로운 기능과는 달리 웹 구성요소를 구성하는 API는 반짝이거나 사용자에게 표시되지 않습니다. 이는 순전히 개발자 생산성을 위한 것입니다. 네 가지 주요 API는 각각 그 자체로 유용하지만, 신비한 일이 일어납니다.

  1. Shadow DOM - 스타일 및 DOM 캡슐화
  2. 맞춤 요소 - 새 HTML 요소를 정의합니다. 속성과 메서드가 포함된 API를 제공합니다.
  3. HTML 가져오기는 CSS, JS, HTML 패키지의 배포 모델입니다.
  4. 템플릿 - 나중에 스탬프할 비활성 마크업 청크를 정의하는 데 적합한 DOM 템플릿입니다.

API의 기본사항에 대해 자세히 알아보려면 ebidel.github.com/webcomponents를 확인하세요.