HTML5Rocks에 +Addy Osmani의 Yeoman, Polymer의 도구화와 관련된 포스트가 업데이트되었습니다. Whirlwind tour는 원래 '정신없이 빠르게 진행되는 여행'이라고 하네요. :)
이 포스트는 웹 컴포넌트의 Polyfill 라이브러인 폴리머(Polymer)와 이를 구축하기 위한 도구인 Yeoman의 개괄적인 사용 방법, 그리고 +Addy Osmani가 Chrome Dev Summit의 발표에서 보여준 데모인 Jukebox 앱에 대한 간략한 소개와 동영상을 담고 있습니다. 자세한 내용은 전문을 참조하세요. :)
전문
Web Components는 웹을 구축하는데 있어 여러분이 알고 있다고 생각하는 모든 것을 바꾸고 있습니다. 처음으로 웹이 우리 자신의 HTML 태그들을 생성하는 것만이 아니라 로직과 CSS를 캡슐화할 수 있는 저수준 API를 가질 예정이었습니다. 더 이상의 전역 스타일시트 수프나 보일러플레이트 코드는 없습니다! 이는 모든 것이 엘리먼트인 멋지고 새로운 세계입니다.
DotJS에서의 발표에서 저는 웹 컴포넌트가 무엇을 제공해야하는지와 최근의 도구들을 이용하여 이를 어떻게 구축할 수 있는지에 대해 자세하게 설명했습니다. 저는 여러분에게 오늘날 모던 브라우저에서 웹 컴포넌트를 사용하여 앱을 개발하기 위해 Yeoman과 Polymer를 이용하여 웹앱 생성을 간소화하는 도구들의 작업흐름, Polyfill 그리고 설탕 한 숟가락(sugar)을 보여드릴 것입니다.
커스텀 엘리먼트 생성하기와 다른 이들이 만든 엘리먼트 설치하기
이 발표에서 우리는 다음과 같은 것들을 배울 수 있을 것입니다.
- 웹 컴포넌트를 구성하는 Custom Elements, Templates, Shadow DOM 그리고 HTML imports 4가지의 각 규격들에 대해
- Bower를 이용하여 어떻게 여러분만의 커스텀 엘리먼트를 정의하고 다른 이들이 만든 엘리먼트를 설치하는지
- 적게 자바스크립트를 작성하고 페이지 구축에 더 많은 시간을 사용하기
- 폴리머와 generator-polymer를 사용하여 어플리케이션을 스캐폴딩하기 위한 모던 프론트엔드 도구(Yeoman) 사용하기
- 웹 컴포넌트의 생성을 폴리머가 얼마나 대단하게 바꾸었는가
예를 들어 폴리머의 웹 컴포넌트 폴리필들(Polymer's Web Component polyfills)과 그 자신의 라이브러리를 설치하기 위해 여러분은 다음과 같이 한줄을 실행할 수 있습니다.
bower install --save Polymer/platform Polymer/polymer
이는 bower_components 폴더와 위의 패키지들을 추가합니다. --save는 이들을 앱의 bower.json 파일에 추가합니다.
그 다음, 폴리머의 아코디언(accordion) 엘리먼트를 설치하기 위해 다음과 같이 실행합니다.
bower install --save Polymer/polymer-ui-accordion
그리고나서 이를 어플리케이션 내에 불러(import)옵니다.
<link rel="import" href="bower_components/polymer-ui-accordion/polymer-ui-accordion.html">
시간을 절약하고 앱 최적화를 위한 도구들과 보일러플레이트 코드들이 완료될 수 있도록 Yeoman을 통해 새로운 폴리머 앱을 필요한 모든 의존성들과 함께 스캐폴딩하도록 다음과 같이 또다른 한줄을 실행합니다.
yo polymer
추가 설명
또한 저는 이 발표에서 보여드린 폴리머 주크박스 앱에 대한 30분짜리 자세한 추가 설명을 기록해두었습니다.
이 추가 비디오가 다루는 것들은 다음과 같습니다.
- "모든 것이 엘리먼트(Everything is an element)"라는 주문이 무엇을 의미하는가
- 폴리머의 플랫폼 폴리필과 엘리먼트들을 설치하기 위해 어떻게 Bower를 사용하는가
- 주크박스 앱을 Yeoman generator와 sub-generator들을 사용하여 스캐폴딩하기
- 보일러플래이트를 통해 스캐폴딩된 플랫폼 기능의 이해
- 어떻게 제가 Angular 앱을 폴리머로 실용적으로 포팅했는지
또한 우리는 새로운 폴리머 엘리먼트들을 스캐폴딩하기 위해 Yeoman sub-generator를 활용하였습니다. 예를 들어 foo 엘리먼트를 위한 보일러플래이트를 생성하기 위해 다음과 같이 실행합니다.
yo polymer:element foo
엘리먼트를 자동으로 불러올지 혹은 생성자가 별도로 필요한지와 몇가지 다른 선호사항들에 대한 프롬프트가 표시될 것입니다.
앱을 위한 최종적인 소스는 발표와 GitHub에서 확인할 수 있습니다. 좀 더 구조적이고 읽기 쉽도록 약간 더 리팩토링을 해두었습니다.
앱의 미리보기는 다음과 같습니다.
추가적인 읽을거리들
요약하자면 폴리머는 웹 컴포넌트가 네이티브로 구현되기를 기다리는 동안 이를 모던 웹 브라우저에서 가능하도록 하는 자바스크립트 라이브러리입니다. 현재적인 도구화는 이들을 사용하는 여러분의 작업흐름을 개선할 수 있도록 도와주므로 여러분은 여러분만의 태그를 개발할 때 Yeoman과 Bower에 대한 시도를 즐겨볼 수 있을 것입니다.
이 주제에 대해 확인해볼만한 몇가지 다른 글들은 다음과 같습니다.
- Yeoman과 Polymer를 이용한 웹앱 구축하기
- Vulcanize를 이용한 웹 컴포넌트 결합
- 크롬 개발자 서밋: Polymer, 선언적/캡슐화/재사용가능한 컴포넌트
- 개발 자동화 훑어보기
- Web Components: 웹 개발의 미래
- Yeoman 작업흐름을 이용한 앱 구축하기
댓글 없음:
댓글 쓰기