2014년 1월 7일 화요일

[업데이트/Summit] 크롬 개발자 서밋: Polymer, 선언적/캡슐화/재사용가능한 컴포넌트(Chrome Dev Summit: Polymer declarative, encapsulated, reusable components)

작년 Chrome Dev Summit에 대한 +Paul Kinlan모바일 부문 서밋 요약 포스팅에 이어서 바로 +Eric Bidelman이 Web Component에 대한 Polyfill 라이브러리인 폴리머(Polymer)에 대한 발표 요약을 포스팅했습니다. 자세한 내용은 아래를 참조하시기 바랍니다.



전문


Polymer는 웹 컴포넌트의 놀라운 미래로 가는 하나의 관문입니다. 우리는 사용자 엘리먼트(Custom element)를 쉽게 만들고 구축할 수 있기를 바래왔습니다. 작년동안 팀은 혁신적인 규격에 대한 Polyfill 세트를 위해 열심히 일했습니다. 우리는 그 최상위에 웹 컴포넌트를 더 쉽게 구축하기 위한 편리하고 간편한 라이브러리(sugaring library)를 만들었으며 마지막으로 여러분의 앱에서 재사용할 수 있는 UI와 유틸리티 엘리먼트들의 세트를 공들여 만들고 있습니다. 2013 Chrome Dev Summit에서 저는 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>

혹은 다음과 같이 queryMatches 속성으로의 데이터 바인딩을 제공하는 반응형 엘리먼트들이 될 수도 있습니다.
<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 엘리먼트의 작성은 전부 선언적이라는 것입니다.
코드는 적게 작성하면서 더 나아진다는 것이죠. ;)


웹 컴포넌트: 웹 개발의 미래



슬라이드: http://html5-demos.appspot.com/static/cds2013/index.html#26

만약 웹 컴포넌트 뒤의 표준을 내밀지 않았다면 제가 태만한 탓입니다. 결국 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를 확인해보시기 바랍니다.