Polymer는 웹 구성요소의 놀라운 미래로 가는 관문 중 하나입니다. 맞춤 요소를 쉽게 사용하고 빌드할 수 있도록 하려는 것입니다. 지난 1년 동안 팀은 진화하는 사양을 위한 일련의 폴리필을 위해 노력해 왔습니다. 또한 웹 구성요소를 더 쉽게 빌드할 수 있도록 편리한 슈가링 라이브러리를 만들었습니다. 마지막으로 앱에서 재사용할 UI 및 유틸리티 요소를 만들고 있습니다. 2013년 Chrome Dev Summit에서 저는 Polymer의 다양한 부분과 '모든 것이 요소다'라는 슬로건에 담긴 철학을 자세히 살펴봤습니다.
Slides: http://html5-demos.appspot.com/static/cds2013/index.html
'모든 것이 요소입니다' (<select>에서 맞춤 요소까지)
슬라이드: http://html5-demos.appspot.com/static/cds2013/index.html#6
1990년대에는 웹페이지를 만드는 것이 제한적이었지만 강력했습니다. 사용할 수 있는 요소가 몇 가지밖에 없었습니다. 강력한 점은 모든 것이 선언형이라는 점입니다. JavaScript를 많이 작성하지 않고도 페이지를 만들고, 양식 컨트롤을 추가하고, '앱'을 만드는 것이 매우 간단했습니다.
<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="">
이것이 바로 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=""> - 선언적 이벤트 핸들러:
<button on-click="" - 게시된 속성:
xFoo.bar = 5<-><x-foo bar="5"> - 속성 관찰:
barChanged: function() {...} - 기본적으로 PointerEvents / PointerGestures 사용
요약하자면 Polymer 요소를 작성할 때는 선언적 방식을 사용하는 것이 중요합니다. 작성해야 할 코드가 적을수록 좋습니다. ;)
웹 구성요소: 웹 개발의 미래
슬라이드: http://html5-demos.appspot.com/static/cds2013/index.html#26
Web Components의 기반이 되는 표준에 대해 언급하지 않으면 섭섭할 것 같습니다. Polymer는 이러한 진화하는 기본 API를 기반으로 합니다.
웹 개발의 매우 흥미로운 시기가 다가오고 있습니다. 웹 플랫폼에 추가되는 다른 새로운 기능과 달리 웹 구성요소를 구성하는 API는 눈에 띄지 않거나 사용자 대상이 아닙니다. 개발자 생산성을 위한 것입니다. 네 가지 주요 API는 각각 그 자체로 유용하지만 함께 사용하면 마법 같은 일이 일어납니다.
- Shadow DOM - 스타일 및 DOM 캡슐화
- 맞춤 요소: 새 HTML 요소를 정의합니다. 속성과 메서드가 있는 API를 제공합니다.
- HTML 가져오기는 CSS, JS, HTML 패키지의 배포 모델입니다.
- 템플릿 - 나중에 스탬프를 찍을 비활성 마크업 청크를 정의하기 위한 적절한 DOM 템플릿
API의 기본사항에 관해 자세히 알아보려면 webcomponents.org를 참고하세요.