Web Components(웹 컴포넌트)는 W3C에서 나왔다. 웹 도큐먼트의 표현을 위젯이나 컴포넌트로 빌딩하는 개념으로 핵심은 HTML 앨리먼트끼리 상호작용하고 인캡슐레이션되게 만드는 기술이다. 2013년과 2014년 Google I/O 에서 Web Components에 대해 바이들맨이 설명을 상세히 하고 있다. 또한 Web Components org 사이트가 존재하여 관련 정보를 얻을 수있다.
Web Components 구성 요소
- Shadow DOM
+ DOM과 Style을 인캡슐레이션 해준다.
+ 예전에는 iframe등을 통해 위의 효과를 얻었다.
+ shadow dom 외부의 js는 접근이 안된다.
+ shadow boundary의 style은 외부로 영향을 미치지 않는다.
+ polyfill 이라고 브라우져가 지원하지않으면 기능을 지원할 수 있게 도와주는 스크립트 파일이라고 보면된다.
webcomponents.js 파일 같은 경우가 polyfill 파일이고 이것을 <script src="webcomponents.js"/> 하면 Shadow DOM에 대해
모든 브라우져에서 사용할 수 있다. 하지만 브라우져 버전은 확인해야 함.
- HTML Templates
+ <template id="name"> ... </template> 형태로 DOM에서 작용할 테그를 정의한다.
+ <template> 태그에 있는 것은 DOM에 들어가지 않는다.
+ 스크립트를 통해 DOM에 포함되는 구조이다.
+ <template> 태그는 크롬과 몇개 브라우져만 지원하고 있다. 그러나 이것 역시 polyfill을 설치하면 모든 브라우져에서 수행가능함
- Custom Elements
+ HTML에 새로운 태그를 정의하는 것이다. 마치 Angular의 Directive(지시자)와 유사하다.
+ <element name="x-dowon"> ...</element> 으로 하면 <x-dowon> 태그를 사용할 수 있다.
+ 앨러먼트의 lifecycle 콜백이 존재한다.
+ 사용자 정의 앨러먼트를 만들기 위해 Shadow DOM, HTML Template 등이 필요한 것이다.
+ document에 register(<custom elements>)를 등록한다.
- HTML Imports
+ <link rel="import" href="x-dowon.html"> 설정을 <head> 태그안에 둔다.
+ 사용하려는 웹 컴포넌트의 확장자 .html을 import 타입으로 link 태그를 사용한다.
* 발표 자료 링크
** Web Components 스팩에 준수하여 개발된 Custom Element는 서로 조합하여 사용가능하다.
Polymer와 Web Components
- 구글이 웹 컴포넌트 스팩에 따라 구현한 것이 Polymer 이다. 파이어폭스는 X-Tags
- Web Components의 구성요소를 지원하기 위해 Polymer는 다음과 같은 스택을 가진다.
+ Native는 브라우져
+ Web Components 스팩 및 실제 필요한 몇가지 기능이 포함된 polyfill로서 platform.js 파일이 존재
현재는 WebComponents org의 webcomponents.js와 같은 명칭을 사용한다. 단 Chrome 36+ 부터는 polyfill이 전혀 필요없지만
Web Components 기능을 구현하지 않은 브라우져들은 polyfill 파일을 포함해야 polymer.js를 통한 기능을 사용할 수 있다.
+ Polymer 만의 API가 있는 polymer.js 코어
+ 구글의 API를 웹 컴포넌트로 만들어 놓은 Elements (Core, Paper)들이 있고 이를 토대로 Application을 만들 수 있는 길을 닦아 놓았다.
- Polymer와 Web Components에 대한 요약 정리
- Polymer에서는 어떻게 쓰는지 바이들맨의 설명을 들어보자. (2014년 구글 I/O)
+ <polymer-element name="hi-dowon"> .. </polymer-element> 태그를 통해 Custom Elements를 만든다.
+ <template> 태그를 사용하고 탬플릿안에서 {{ }} 머스태쉬를 사용해 Data Binding을 한다. (AngularJS 디렉티브의 @ 과 유사)
+ 물론 트위터 부트스트랩같은 UI F/W의 사용도 가능하다.(22분)
+ http://customelements.io/ 이나 http://component.kitchen/ 같은 곳에서 컴포넌트를 찾고 Bower를 통해 설치해서 사용한다.
+ 구글의 다양한 서비스 API를 Polymer 기반 Custom Element로 만들어 놓았다.
- Material Design을 구현한 Polymer의 Paper Element 사용방법 (2014년 구글 I/O)
+ 머터리얼 디자인으로 웹/모바일 화면을 구현하고 싶다면 참조하자.
+ RWD(Responsive Web Design, 반응형 웹 디자인)는 구글에서 Web Starter Kit 강좌에서 잘 설명해 주고 있다.
+ Polymer Designer를 가지고 화면을 작성할 수 있다. (23분)
+ 하이브리드 앱 (Cordova)를 통한 예도 보여줌 (29분)
+ Layout : core-* element
Material : paper-* element
Theming : core-style
Transition : core-animated-page
을 통해 일반적으로 모바일에서 원하는 효과를 바로 얻을 수 있다.
+ 그외 매튜 맥널티의 2014년 구글 I/O 마지막 동영상도 보자
폴리머의 장점은 재사용성에 있다고 본다. 디자이너와 같은 툴을 통해 미리 정의한 컴포넌트를 비즈니스에 맞게 가지고 있다면 사용자의 레벨에 따라 원하는 모바일/웹 환경을 쉽게 만들 수 있을 것이다. 따라서 반복적인 코드가 줄어 들 것이고 일관성있는 유지보수와 확장성을 보장할 것이다. 2년전 MEAN Stack을 통해 만들고 싶었던 것은 시각화 대시보드 저작도구 였다. HTML의 태그가 Custom Element처럼 표현이 되고 저작도구(Poly Designer)나 실시간에 해석되어 데이터를 실시간 차트로 보여줄 수 있는 BtoB 솔루션을 만들 수 있을 것이다. 이미 Flex 버전의 대시보드 저작도구를 개발해 보았지만 이제는 모바일/웹이 원활히 지원되는 기술로 바뀌어야 하기 때문에 Web Components는 나에게 더욱 필요한 머스트 아이템이 되겠다.
<참조>
- 2013년 구글 I/O - Web Components Tectonic Shift
- 2014년 구글 I/O - Web Components & Polymer (바이들맨의 Custom Element 정리)
- Vulcanize : import 웹 컴포넌트 합쳐주는 도구
'Angular > Prototyping' 카테고리의 다른 글
| [Web Components] Angular와 Web Components 관계 - 2 (0) | 2016.01.12 |
|---|---|
| [Web Components] Angular와 Web Components 관계 - 1 (0) | 2016.01.11 |
| [Polymer] 폴리머기반 웹 컴포넌트 만들기 (0) | 2015.01.03 |
| [Polymer] Dart로 시작하는 폴리머 (0) | 2014.12.26 |