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