Polymer는 웹 구성요소의 놀라운 미래로 가는 관문입니다. Google은 맞춤 요소를 쉽게 사용하고 빌드할 수 있도록 지원하고자 합니다. 지난 1년 동안 팀은 진화하는 사양에 대한 폴리필 세트를 개발하기 위해 열심히 노력해 왔습니다. 또한 웹 구성요소를 더 쉽게 빌드할 수 있도록 편리한 슈가링 라이브러리를 만들었습니다. 마지막으로 앱에서 재사용할 수 있는 UI 및 유틸리티 요소 집합을 만들고 있습니다. 2013 Chrome Dev Summit에서 저는 Polymer의 다양한 부분과 '모든 것이 요소'라는 Google의 철학을 자세히 살펴보았습니다.
슬라이드: 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
웹 구성요소의 기반이 되는 표준을 언급하지 않을 수 없습니다. 결국 Polymer는 이러한 진화하는 기본 API를 기반으로 합니다.
웹 개발 분야에서 매우 흥미로운 시기가 다가오고 있습니다. 웹 플랫폼에 추가되는 다른 새로운 기능과 달리 웹 구성요소를 구성하는 API는 화려하거나 사용자 대상이 아닙니다. 순전히 개발자 생산성을 위한 것입니다. 네 가지 주요 API는 각각 그 자체로도 유용하지만, 함께 사용하면 놀라운 일이 일어납니다.
- Shadow DOM - 스타일 및 DOM 캡슐화
- 맞춤 요소 - 새 HTML 요소를 정의합니다. 속성과 메서드가 있는 API를 제공합니다.
- HTML 가져오기는 CSS, JS, HTML 패키지의 배포 모델입니다.
- 템플릿 - 나중에 스탬프 처리할 비활성 마크업 청크를 정의하기 위한 적절한 DOM 템플릿
API의 기본사항에 대해 자세히 알아보려면 webcomponents.org를 확인하세요.