Chrome Dev Summit 2014 - 폴리머 - 연합국

Polymer와 웹 구성요소는 최근 매우 큰 관심을 받고 있는 주제이며, 이 생태계가 빠르게 진화하고 있기 때문에 개발자가 모든 최신 변경사항을 따라가기 어려울 때가 많습니다.

Chrome Dev Summit에서 열린 Polymer 팀의 엔지니어링 관리자인 Matt McNulty는 Polymer가 무엇인지 설명하고 Polymer 1.0으로의 로드맵을 간략히 설명합니다.

Polymer란 무엇인가요?

먼저, Polymer란 무엇일까요?

Polymer는 웹 구성요소에서 요소와 앱을 빌드하는 데 도움이 되는 라이브러리입니다. 웹 구성요소는 개발자가 고유한 맞춤 요소를 사용하여 HTML 어휘를 확장할 수 있도록 하는 새로운 표준의 최신 세트입니다.

개발자가 애플리케이션을 더 빠르게 빌드할 수 있도록 지원하는 Polymer

웹 구성요소는 브라우저에서 새로운 프리미티브로 설계되었기 때문에 매우 강력하지만 그만큼 낮은 수준이며 웹 구성요소로 작업하려면 상당한 코드가 필요합니다.

웹 구성요소를 더 달콤하게 만드는 Polymer

Polymer를 사용하면 문법을 '슈가링'하여 더 쉽게 웹 구성요소를 작업할 수 있습니다. 작성해야 하는 상용구 코드의 양을 줄이고 선언적 스타일을 추가하므로 HTML을 작성하는 것만큼 쉽게 웹 구성요소를 만들 수 있습니다.

폴리머 실험

Polymer는 이러한 기술이 모든 브라우저에 출시되기 전에 웹 구성요소 표준을 폴리필(polyfill)하고 개발자들의 피드백을 받을 수 있는지 알아보기 위한 실험으로 시작했습니다. Polymer를 사용하기 시작한 개발자가 많아지면서 Polymer는 단순한 폴리필에서 벗어나 생산성 기능 (데이터 바인딩, 속성 변경 감시자, 자동 노드 찾기 등)으로 가득한 실제 라이브러리로 변화했습니다. 하지만 모든 실험에는 결과가 있습니다. 그렇다면 어떻게 결과를 도출했을까요?

Polymer 보고서 카드 개선 필요

많은 개발자가 Polymer의 웹 구성요소로 작업할 때 얻을 수 있는 표현력과 생산성이 좋아졌다고 말했지만, 성능과 전반적인 복잡성에 대해서도 우려를 표했습니다.

이는 Polymer가 계속 가졌던 자연스러운 긴장감을 강조합니다. 즉, 실험을 통해 웹 플랫폼을 한 단계 발전시키면서도 개발자가 신뢰할 수 있는 프로덕션급의 무언가를 만들 수 있습니다.

곧 적용될 변경사항

Polymer 팀은 개발자가 안심하고 사용할 수 있는 가볍고 프로덕션에 즉시 사용 가능한 버전을 만들기 위해 라이브러리의 모든 기능을 면밀히 살펴봤습니다.

레이어

Polymer는 일련의 레이어로 리팩터링되었습니다. 핵심 기능은 빠르고 간편하며, 고급 기능은 선택 가능합니다. 대부분의 사용 사례에서 핵심 기능은 개발자의 요구사항을 충족해야 합니다.

폴리머는 레이어로 리팩터링됨

단순화된 데이터 결합

Polymer의 데이터 결합 시스템도 성능에 크게 최적화되었습니다. 계층화된 접근 방식에 따라 이제 양방향 바인딩이 선택되며 기본값은 단방향 바인딩입니다. 또한 게시된 속성 유형이 명시되었으며, 이제 속성 변경으로 인해 이벤트가 발생하므로 서로 다른 라이브러리의 요소가 더 쉽게 통신할 수 있습니다.

데이터 결합이 간소화되었습니다.

더 간소화된 Shadow DOM

Shadow DOM 폴리필은 엔지니어링의 놀라운 업적입니다. 이 솔루션은 포괄적이고 사양을 준수하도록 설계되었으며, 이는 플랫폼 기본 요소를 철저히 테스트하는 데 중요하지만 안타깝게도 Polymer가 사용하지 않는 기능에 여러 성능 병목 현상을 야기합니다.

Polymer의 다음 출시 버전에서는 다른 접근 방식을 취할 예정입니다. 즉, Polymer에 필요한 항목만 폴리필하는 shim 스타일 레이어를 사용합니다.

심 그림자가 훨씬 빠릅니다.

기존 폴리필은 Polymer가 아닌 일반 웹 구성요소에 대해 유지됩니다.

webcomponents.org로 이동

폴리필 말이 되었으니 이제 새 홈이 되고 있습니다. 현재 많은 개발자가 Polymer와 웹 구성요소 간의 관계에 대해 혼란스러워하고 있습니다. 어떤 사람들은 폴리필만 있으면 되지만 웹 구성요소를 사용하려면 모든 Polymer를 사용해야 한다고 생각합니다.

이를 더 명확하게 구분하기 위해 폴리필이 webcomponents.org로 이동 중이며 이제 webcomponents.js로 이름이 변경되었습니다.

Polyfill이 webcomponents.org로 이전됨

이러한 이동은 다른 라이브러리 작성자가 혼동 없이 폴리필을 활용할 수 있도록 하기 위한 것입니다. Polymer 팀은 계속해서 폴리필에 기여할 예정이지만, 이러한 변경을 통해 Polymer가 커뮤니티를 위한 공유 리소스로 활용될 수 있기를 바랍니다.

결과

이러한 변화를 통해 어떤 결과가 도출되었을까요?

속도

이제 Chrome에서 Polymer의 속도가 5배 빨라졌고 Safari에서는 8배 속도 향상되었습니다.

Safari에서 8배 빨라진 Polymer

파일 크기

파일 크기도 123KB에서 15KB로 87% 줄었습니다 (6KB gzip).

Polymer는 이제 87% 더 작습니다

로드맵

다음 릴리스에서 새 버전 번호 (0.8)로 표시되는 일부 API 브레이킹 체인지가 있을 예정이지만, 팀은 이 변경사항이 재작성된 것이 아님을 분명히 하려고 합니다. 현재 프로젝트를 Polymer 0.5에서 0.8로 이동하는 작업은 매우 간단합니다.

또한 Polymer 팀은 개발자가 향후 릴리스에 대해 더 명확하게 이해할 수 있도록 로드맵을 작성했습니다.

Polymer 로드맵, 1분기에 베타 버전, 2분기에 1.0 출시

0.8 미리보기는 현재 GitHub에서 브랜치로 사용할 수 있습니다 (다만 이 버전은 아직 활발히 개발되고 있으며 문서에는 없음). 0.9 공식 베타는 2015년 1분기로 계획되어 있으며, 1.0은 2분기에 제공될 예정입니다.

실험 종료

최근 Polymer의 변경사항이 모두 적용되는 가운데, 이를 지원하는 팀은 웹 구성요소가 모든 개발자 스택의 필수 부분이 될 수 있는 토대를 마련하고 있습니다. 웹 구성요소를 처음 사용하는 경우, 지금이 이러한 혁신적인 기술을 살펴보고 익힐 수 있는 좋은 기회입니다. 이미 구성요소 (및 Polymer)를 사용해 작업하고 있다면 미래는 밝을 것입니다. Polymer 블로그에서 모든 최신 업데이트를 확인하고, Polymer 메일링 리스트에 가입하여 질문이나 의견을 요청하세요. 즐겁게 해킹하세요!