작년 Chrome Dev Summit에 대한 +Paul Kinlan의 모바일 부문 서밋 요약 포스팅에 이어서 바로 +Eric Bidelman이 Web Component에 대한 Polyfill 라이브러리인 폴리머(Polymer)에 대한 발표 요약을 포스팅했습니다. 자세한 내용은 아래를 참조하시기 바랍니다.
전문
"모든 것이 엘리먼트입니다(Everything is an element)"
- <select>에서 사용자 엘리먼트까지
90년대의 웹 페이지 구축은 제한적이었지만 강력했습니다. 단지 곧 없어질 몇가지 엘리먼트를 가지고 있었을 뿐입니다. 강력한 부분이요? ...모든 것이 선언적이었습니다. 이는 자바스크립트의 덩어리 없이도 페이지를 생성하고 폼 컨트롤을 추가하고 "앱"을 생성하는데 놀라울 정도로 간편했습니다.
겸손하기 그지없는 <select> 엘리먼트를 보세요. 여기에는 엘리먼트 내에 구축된 엄청나게 많은 기능이 있으며 다음과 같이 그를 정의하는 것으로 간편하게 사용할 수 있습니다.
- HTML 속성들을 통한 사용자화(Customizable)
- 속성을 통해 설정 가능한 기본 UI를 사용한 자식들(예. <option>)의 렌더링
- <form> 같은 다른 컨텍스트 내에서의 활용성
- DOM API: 속성들과 메소드들
- 흥미있는 것이 발생했을 때의 이벤트 전달
웹 컴포넌트는 이러한 웹 개발의 전성기로 되돌아가기 위한 도구를 제공합니다. <select>를 연상시키지만 2014의 사례를 위해 디자인된 새로운 엘리먼트를 생성할 수 있는 것입니다. 예를 들어 AJAX가 오늘날 발명되었다면 아마도 다음과 같은 HTML 태그가 될 것입니다. (예제)
<polymer-ajax url="http://gdata.youtube.com/feeds/api/videos/"
params='{"alt":"json"}'></polymer-ajax>
<polymer-media-query query="max-width:640px" queryMatches="{{isPhone}}"></…
이는 Polymer에서 우리가 취하고 있는 정확한 접근 방법입니다. 단일한 덩어리로 된 자바스크립트 기반의 웹앱을 구축하는 대신 재사용가능한 엘리먼트를 생성해봅시다. 시간이 흐르고나면 전체 앱을 작은 엘리먼트들로 구성하도록 성장할 것입니다. 그리고 전체 앱은 다음과 같이 하나의 엘리먼트가 될 수도 있습니다.
<my-app></my-app>
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
코드는 적게 작성하면서 더 나아진다는 것이죠. ;)
웹 컴포넌트: 웹 개발의 미래
만약 웹 컴포넌트 뒤의 표준을 내밀지 않았다면 제가 태만한 탓입니다. 결국 Polymer는 이러한 혁신적인 기초 API들에 기반하고 있습니다.
지금은 웹 개발의 매우 흥미진진 시기인 듯 합니다. 웹 플랫폼에 추가되는 다른 새로운 기능과는 달리, Web Components를 구성하는 API들은 눈부시거나 사용자를 대상으로 하고 있지 않습니다. 이들은 순수하게 개발자 생산성을 위한 것입니다. 4가지 API 각각이 그 자체로 유용하지만 함께 사용하면 마법과도 같은 일이 벌어집니다!
- Shadow DOM
- 스타일과 DOM의 캡슐화
- Custom Elements
- 새로운 엘리먼트의 정의
- 엘리먼트에 속성과 메소드를 이용해 API를 정의할 수 있습니다.
- HTML Imports
- CSS, JS 그리고 HTML의 패키지를 위한 배포 모델
- Templates
- 이후의 템플릿 처리를 위해 비활성화된 마크업 덩어리를 정의하기 위한 제대로된 DOM 템플릿 기능
API에 대해 더 자세하게 알고 싶으시다면, ebidel.github.com/webcomponents를 확인해보시기 바랍니다.
댓글 없음:
댓글 쓰기