Polymer는 웹 구성요소의 놀라운 미래로 향하는 관문 중 하나입니다. 사용자설정 요소를 쉽게 사용하고 제작할 수 있도록 만들고자 합니다. 지난 한 해 동안 Google팀에서는 변화하는 사양에 맞는 폴리필 세트를 만들기 위해 노력해 왔습니다. 그 위에, 웹 구성 요소를 더 쉽게 빌드할 수 있도록 편리한 슈가링 라이브러리를 만들었습니다. 마지막으로, 앱에서 재사용할 UI 및 유틸리티 요소 집합을 만들고 있습니다. 2013년 Chrome Dev Summit에서 저는 Polymer의 다양한 부분을 살펴보고 '모든 것은 요소는 요소'라는 철학을 담았습니다.
Slides: http://html5-demos.appspot.com/static/cds2013/index.html
'모든 것이 요소입니다' (<select>에서 맞춤 요소까지)
Slides: 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의 특별한 소스로 웹 구성요소 빌드
Slides: 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
도덕적으로 폴리머 요소를 작성하는 것은 선언적이라는 것입니다. 작성해야 하는 코드가 적을수록 좋습니다. ;)
웹 구성요소: 웹 개발의 미래
Slides: http://html5-demos.appspot.com/static/cds2013/index.html#26
웹 컴포넌트의 표준에 대해 언급하지 않는다면 아쉬울 것 같습니다. 결국 Polymer는 이렇게 진화하는 기본 API를 기반으로 합니다.
우리는 웹 개발 분야에서 매우 흥미진진한 시기를 앞두고 있습니다. 웹 플랫폼에 추가되는 다른 새로운 기능과 달리 웹 구성요소를 구성하는 API는 빛나지 않으며 사용자 대상도 아닙니다. 순수한 개발자 생산성을 위한 것입니다. 네 가지 기본 API는 각각 그 자체로 유용하지만 함께 사용하면 마법 같은 일이 벌어집니다.
- Shadow DOM - 스타일 및 DOM 캡슐화
- 맞춤 요소 - 새 HTML 요소를 정의합니다. 속성과 메서드가 포함된 API를 제공합니다.
- HTML 가져오기는 CSS, JS 및 HTML 패키지의 배포 모델입니다.
- 템플릿 - 나중에 스탬핑할 마크업의 비활성 청크를 정의하기 위한 적절한 DOM 템플릿
API의 기본 사항에 대해 자세히 알아보려면 webcomponents.org를 확인하세요.