Polymer 및 Web Components는 최근에 매우 화제가 되고 있는 주제입니다. 이 생태계는 빠르게 진화하고 있기 때문에 개발자가 모든 최신 변경사항을 파악하기 어려울 수 있습니다.
Chrome Dev Summit에서 Polymer팀의 엔지니어링 담당자인 맷 맥널티가 Polymer가 무엇인지 설명하고 Polymer 1.0의 로드맵을 간략하게 설명했습니다.
Polymer란 무엇인가요?
먼저, Polymer란 정확히 무엇일까요?
Polymer는 웹 구성요소에서 요소와 앱을 빌드하는 데 도움이 되는 라이브러리입니다. 웹 구성요소는 개발자가 자체적인 맞춤 요소를 사용하여 HTML 어휘를 확장할 수 있도록 하는 최첨단의 새로운 표준입니다.
웹 구성요소는 브라우저를 위한 새로운 프리미티브로 설계되었기 때문에 매우 강력하면서도 매우 낮은 수준이며, 이를 다루는 데 상당한 코드가 필요합니다.
Polymer를 사용하면 구문을 '슈가링'하여 웹 구성 요소를 더 쉽게 작업할 수 있습니다. 작성해야 하는 상용구 코드의 양을 줄이고 선언적 스타일을 추가하므로 웹 구성요소를 생성하는 것이 HTML을 작성하는 것만큼 쉽습니다.
폴리머 실험
Polymer는 Web Component 표준을 폴리필할 수 있는지 확인하고 이러한 기술이 모든 브라우저에 도입되기 전에 개발자로부터 피드백을 받을 수 있는지 알아보기 위한 실험을 시작했습니다. 점점 더 많은 개발자가 Polymer를 사용하기 시작하면서 폴리필이 아닌 생산성 기능 (데이터 결합, 속성 변경 감시자, 자동 노드 찾기 등)으로 가득한 실제 라이브러리로 바뀌었습니다. 하지만 모든 실험에는 결과가 있는데, 이 경우 어떻게 진행할까요?
많은 개발자가 Polymer의 웹 구성요소로 작업할 때 얻을 수 있는 표현력과 생산성 측면에 만족한다고 말했지만, 성능 및 전반적인 복잡성에 대해서도 우려를 표했습니다.
이 모델은 Polymer가 지금까지 겪어왔던 자연스러운 긴장감을 강조합니다. 즉, 웹 플랫폼을 발전시키는 실험을 하면서도 개발자가 믿고 사용할 수 있는 프로덕션 가치가 있는 제품을 만드는 것이 바람직합니다.
곧 적용될 변경사항
Polymer팀은 개발자들이 안심하고 사용할 수 있도록 프로덕션에 즉시 사용 가능한 더 가벼운 버전을 개발하기 위해 라이브러리의 모든 기능을 면밀히 살펴봤습니다.
레이어
Polymer가 일련의 레이어로 리팩터링되었습니다. 핵심 기능은 빠르고 가벼우며 고급 기능은 선택할 수 있습니다. 대부분의 사용 사례에서 핵심 기능은 개발자의 요구를 충족하는 것이어야 합니다.
간소화된 데이터 결합
Polymer의 데이터 결합 시스템도 성능을 위해 크게 최적화되었습니다. 계층화된 접근 방식에 따라 이제 양방향 결합이 선택되며 기본값은 단방향 결합입니다. 또한 게시된 속성 유형이 명시적으로 지정되었으며, 이제 속성 변경 시 이벤트가 실행되어 다른 라이브러리의 요소가 더 쉽게 통신할 수 있습니다.
더 가벼운 Shadow DOM
Shadow DOM 폴리필은 엔지니어링의 놀라운 업적입니다. 포괄적이고 사양을 준수하도록 설계되어 플랫폼 기본 버전을 철저히 테스트하는 데 중요하지만, 안타깝게도 Polymer가 사용하지 않는 기능에 대한 성능 병목 현상이 많이 발생합니다.
Polymer의 다음 출시 버전에서는 다른 접근 방식을 취합니다. 즉, Polymer에 필요한 항목만 폴리필하는 shim 스타일 레이어를 사용합니다.
Polymer가 아닌 일반 웹 구성요소에는 기존 폴리필이 계속 사용됩니다.
webcomponents.org로 이전
폴리필에 관해서는 이 또한 새로운 보금자리가 될 것입니다. 현재 많은 개발자가 Polymer와 Web Components 간의 관계에 대해 혼란스러워합니다. 실제로는 폴리필만 필요한데 웹 구성요소를 사용하려면 Polymer를 모두 사용해야 한다고 생각하는 개발자도 있습니다.
이러한 구분을 더 명확히 하기 위해 폴리필이 webcomponents.org로 이동되었으며 이제 이름이 webcomponents.js로 변경되었습니다.
이 이동은 다른 라이브러리 작성자가 혼란 없이 폴리필을 활용할 수 있도록 고안되었습니다. Polymer 팀은 계속해서 폴리필에 기여할 것이지만, 이러한 변화를 통해 Polymer 팀이 커뮤니티의 공유 리소스가 될 수 있기를 바랍니다.
결과
그렇다면 이러한 모든 변화의 결과는 무엇일까요?
속도
이제 Chrome에서 Polymer가 5배 빨라졌으며 Safari에서 8배 빨라졌습니다.
파일 크기
파일 크기도 123KB에서 15KB (gzip으로 gzip으로 6KB)로 87% 줄었습니다.
로드맵
다음 릴리스에서는 새 버전 번호 (0.8)로 표시되는 몇 가지 API에 관한 브레이킹 체인지가 있지만, 팀에서는 재작성이 아님을 명확히 하고자 합니다. 현재 프로젝트를 Polymer 0.5에서 0.8로 옮기는 작업은 매우 간단합니다.
Polymer 팀은 또한 개발자가 예정된 출시에 대해 더 명확하게 파악할 수 있도록 로드맵을 제공했습니다.
0.8 미리보기는 현재 GitHub에서 브랜치로 제공됩니다 (아직 매우 활발히 개발 중이며 문서에는 부족함). 0.9 공식 베타는 2015년 1분기로 계획되어 있으며, 2분기에 1.0이 공개될 예정입니다.
실험이 종료되었습니다
Polymer가 최근에 변화하면서 이제 그 뒤의 팀은 웹 구성요소가 모든 개발자 스택의 필수적인 부분이 되기 위한 토대를 마련하고 있습니다. 웹 구성요소를 처음 사용하는 분은 지금이 이러한 혁신적인 기술을 살펴보고 익힐 수 있는 좋은 기회입니다. 이미 구성요소 (및 Polymer)로 작업하고 있다면 미래가 정말 밝아 보입니다. Polymer 블로그에서 최신 업데이트를 지속적으로 확인하고, Polymer 메일링 리스트에 가입하여 질문이나 의견을 보내주세요. 해킹을 즐겁게 활용하시기 바랍니다.