Polymer의 기술기반인 Web Componets를 구성하는 표준 스펙들인 Custom Elements, HTML Imports, HTML Templates 그리고 Shadow DOM을 간략히 살펴본다.
Polymer의 아키텍처 및 기본적인 사용방법 그리고 material design이 적용된 paper elements 등을 살펴본다.
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
알아봅시다, Polymer: Web Components & Web AnimationsChang W. Doh
GDG Korea WebTech : 시작하세요, Polymer, Oct, 11, 2014.
Let's learn about specifications before diving into Polymer:
- Web Components
- Web Animations
This slide includes resources from HTML5Rocks, Polymer and PolyTechnic.
Adied 2014, 봄싹 세미나에서 발표한 `Resource Handling in Spring MVC`의 발표자료입니다.
주요 내용으로 Spring MVC에서 정적 자원(css, js, etc)을 다루는 방법을 다루고 있습니다.
데모 코드 : https://github.com/arawn/resource-handling-in-springmvc
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
[Angularjs 도입 선택 가이드]
본 문서는 네이버 개발자 블로그 hello world 를 통해서 공개되었습니다.
[문서개요]
이 문서는 AngularJS를 사용한 애플리케이션 개발을 계획하고 있거나 AngularJS 도입을 고려 중일 때 참고 할 만한 내용을 기술한다. AngularJS를 사용하는 방법을 다루지는 않는다.
이 문서의 모든 내용은 AngularJS 버전 1.3.x를 기준으로 작성되었다.
Angular2는 컴포넌트 중심의 개발 접근 방식에 대한 내용을 가집니다. 따라서 본 슬라이드도 컴포넌트 중심의 개발 접근 방식으로 Angular2를 바라보았습니다.
대략적인 내용은 다음과 같습니다.
- Angular2 History
- Angular2 핵심구성요소
- 컴포넌트 중심의 개발
- Angular2 주요개념
- Type Script에대한 설명
- 기타
필요하신 분에게 도움이 되었으면 좋겠습니다. 관련 코드는 다음 주소에 공유하였습니다.
https://github.com/DaeguDevGroup/angular2-bootstrap
- 내용이 업데이트되거나, 추가되면 설명에 이력을 남기겠습니다.
- 본 슬라이드에 오류가 있다면 코멘트 바랍니다.
*Change Log*
- 2016-05-14 : 슬라이드 첫 버전을 업로드
AngularJS 2는 올해 릴리징된 프론트엔드 도구 중 가장 쿨하고 섹시한 도구라고 독자는 믿고있습니다.
AngularJS 2를 실무환경에 적용함으로 얻는 이점.
AngularJS 2와 1의 차이점과 성능.
그리고 ReactJS와 AngularJS 2를 비교하여 퍼포먼스 데이터를 보여줍니다.
마지막으로 AngularJS 2 사용을 위한 번들러(Bundler) 그 중 Webpack, Systemjs, JSPM에 대해서도 안내합니다.
해당 자료는 XECon 2016에 발표되었습니다.
서버 개발자가 바라 본 Functional Reactive Programming with RxJava - SpringCamp2015NAVER / MusicPlatform
youtube : https://youtu.be/E_Bgv9upahI
비동기 이벤트 기반의 라이브러리로만 생각 했던 RxJava가 지금 이 시대 프로그래머에게 닥쳐 올 커다란 메시지라는 사실을 알게 된 지금. 현장에서 직접 느낀 RxJava의 본질인 Function Reactive Programming(FRP)에 대해 우리가 잘 아는 Java 이야기로 풀어 보고 ReactiveX(RxJava) 개발을 위한 서버 환경에 대한 이해와 SpringFramework, Netty에서의 RxJava를 어떻게 이용 하고 개발 했는지 공유 하고자 합니다.
Angular 2는 HTML 5 웹 컴포넌트 기술을 포함합니다. 이 기술은 Angular 2 컴포넌트를 존재케한 기반기술입니다. 본 슬라이드는 이와 관련하여 2가지 흐름을 가지고 있습니다.
- 전반부는 웹 컴포넌트가 Angular 2 컴포넌트가 되기까지의 과정을 설명합니다.
- 후반부는 컴포넌트 트리 구조를 기반으로한 컴포넌트 상호작용에 대해 설명합니다.
필요하신 분에게 조금이라도 도움이 되었으면 좋겠습니다. 감사합니다.
CHANGE LOG
2016-06-27 : @input 데코레이터 설명교정
2016-06-26 : 쉐도우 돔 / 쉐도우 호스트관련 보다 정확한 문장으로 수정
2016-06-25 : 업로드
[SOSCON 2018] 오픈소스 개발: Behind the scenesJae Sung Park
오픈 소스 개발에 참여한다는 것은 여러분들에게 어떤 의미가 있나요? 포트폴리오 작성을 위해? 불편함을 개선하기 위해? 무언가 멋져 보이기 때문에?
외적으로 보이는 오픈 소스 개발/운영은 여러분들이 생각하는 '모습'과 아주 다를 수 있습니다. 성공적인 오픈 소스가 되기 위해서는 무엇이 필요할까요?
오픈소스 개발자로 성공(또는 살아남기) 할 수 있을까요?
billboard.js 프로젝트를 운영하면서 경험한 내용을 바탕으로, 여러분들이 알지 못하는 오픈소스 운영 과정에서의 경험을 전달하고자 합니다.
[DEVIEW 2017] 14일만에 GitHub 스타 1K 받은 차트 오픈소스 개발기Jae Sung Park
차트란 무엇일까요? 차트는 우리가 일상에서 아주 쉽게 자주 접하지만, 막상 개발자로써의 경험을 하는 동안 차트 개발(적용)은 쉽게 경험해 보기 어려운 영역이기도 합니다.
본 발표는 '차트'라는 영역에 대한 개발 경험기와 함께 오픈소스로 공개 후, 단 기간 내에 많은 주목을 받기 까지의 과정을 통해 어떻게 의미있는 성과를 글로벌 하게 얻을 수 있었는가에 대한 오픈소스 성장에 대한 경험도 같이 공유합니다.
이를 통해 다양한 오픈소스 개발 시도와 참여가 활발히 이루어 지는데 도움을 줄수 있게 되기를 기대 합니다.
2. Polymer is a library that makes
building applications easier.
Is built on Web Components.
”
“
3. 재사용 가능한 컴포넌트를 만들 수 있는 표준 기술들의 모
음
Custom Elements – 커스텀 태그를 통한 요소 생성
HTML Imports – HTML 페이지 로딩
HTML Templates - 템플릿
Shadow DOM – DOM과 스타일의 캡슐화
4. 커스텀 태그를 통한 요소 생성
▪ 새로운 HTML 요소를 생성
▪ 다른 요소를 확장해 생성가능
▪ 단일 태그에 커스텀 기능의 묶음 가능
▪ 기존 DOM 요소의 API를 확장
// 1. HTML 객체 생성
var XFooProto = Object.create(HTMLElement.prototype);
// 2. ‘hi’ 메서드 추가
XFooProto.hi = function() { alert('foo() called'); };
// 3. 읽기 전용 ‘bar’ 속성 설정
Object.defineProperty(XFooProto, "bar", {value: 5});
// 4. <x-foo> 태그 등록
var XFoo = document.registerElement('x-foo', {prototype: XFooProto});
5. HTML Imports – HTML 페이지를 로딩
▪ JS/HTML/CSS를 묶음 형태로 사용 단일 URL 호출
▪ HTML import를 통한 추가되는 컴포넌트들은 중복되는 경우라도 호출,
파싱 및 실행은 단 한 번만 수행
▪ 다른 도메인의 리소스를 로딩하기 위해선 CORS 활성화 필요
▪ Import 내의 스크립트는 메인 문서의 파싱을 블럭하지 않음
▪ 스크립트는 import 시 실행되나, 다른 요소(마크업, CSS 등)들은
메인 페이지에 추가되는 시점에 활성화
6. HTML Imports – HTML 페이지를 로딩
some.html
main.html
<head><link rel="import" href="some.html"></head>
<body>
<script>
var link = document.querySelector('link[rel="import"]');
var content = link.import;
var el = content.querySelector('.warning');
document.body.appendChild(el.cloneNode(true));
</script>
</body>
<script> console.log(123);</script>
<div class="warning">
<style> h3 { color: red; } </style>
<h3>Warning!</h3>
<p>This page is under construction</p>
</div>
7. ▪ 비활성화 상태의 복제 가능한 DOM chunk
▪ 새로운 태그 : <template> … </template>
▪ 태그 내의 태그들은 사용되기 전까진 파싱은 되나 렌더링되지 않음
▪ 컨텐츠는 클론/사용 되기전까진 비활성
▪ 페이지의 일부분이 아님
재사용을 위한 템플릿
8. 재사용을 위한 템플릿
// 1. 템플릿 컨텐츠를 얻어온다.
var content = document.getElementById("count").content;
// 2. 템플릿내의 DOM에 대한 작업을 한다.
var span = content.querySelector('span');
span.textContent = parseInt(span.textContent) + 1;
// 3. 메인 DOM에 추가한다.
document.body.appendChild(document.importNode(content, true));
<template id="count">
<div>Template used: <span>0</span></div>
<script>alert('클릭하셨네요!');</script>
</template>
9. ▪ 별도의 스코프를 갖는 DOM
▪ 폴리머에서 생성하는 모든 요소들은 shadow DOM으로 처리
DOM과 스타일의 캡슐화
10. <h3>제목</h3>
<div id="scoped"><h3>Light DOM</h3></div>
<script>
var el = document.getElementById('scoped');
var root = el.createShadowRoot();
root.innerHTML = '<style>h3{ color: red; }</style><h3>Shadow DOM</h3>';
</script>
DOM과 스타일의 캡슐화
<button id="btn" onclick="shadow()">Hello, world!</button>
<script>
function shadow() {
var host = document.getElementById("btn");
// 1. shadow root 생성
var root = host.createShadowRoot();
// 2. shadow DOM의 내용 변경
root.textContent = '안녕하세요!';
}
</script>
document.
getElementById("btn").
innerHTML?
11. 태그 형태로 특정 기능을 갖는 UI 컴포넌트들을 손쉽게 삽입할 수 있으며,
재사용이 가능해 진다.
<body>
<google-map
latitude="37.3596274“
longitude="127.105464“
zoom="17“
fitToMarkers="true">
<google-map-marker
latitude="37.3596274“
longitude="127.105464“
title="그린팩토리"></google-map-marker>
</google-map>
</body>
14. 브라우저가 네이티브 하게 지원하지 않는 기능을 사용 가능하도록 만들어
주는 코드 모음
Web Components polyfill :
▪ Mozilla X-Tag : http://www.x-tags.org/
▪ Google Polymer : http://www.polymer-project.org/
http://remysharp.com/2010/10/08/what-is-a-polyfill/
15. Chrome Firefox IE Android iOS
HTML Templates 26+ 22+ N/A 4.4+ 8+
HTML Imports 36+ N/A N/A N/A N/A
Custom Elements 33+ N/A N/A N/A N/A
Shadow DOM 25+ 32+ N/A 4.4+ N/A
16. ▪ Polymer는 Evergreen Browser*에서 문제없는 실행을 목표
http://www.polymer-project.org/resources/compatibility.html
*Evergreen Web Browser is a web browser that automatically updates itself on startup.
17. 유틸리티 요소와 공통적 UI 요소들의 모음
Ajax, 애니메이션, 드래그&드롭, 아이콘 모음, 툴팁, etc.
http://www.polymer-project.org/docs/elements/core-elements.html
Material design*이 적용된 UI 요소들의 모음
버튼, 체크박스, 다이얼로그, 입력요소, 탭, 토스트, etc.
http://www.polymer-project.org/docs/elements/paper-elements.html
http://www.polymer-
project.org/docs/elements/paper-elements.html
18. ▪ 이미 만들어진 요소들을 사용하는 방법
1. 사용할 요소를 페이지에 삽입
2. 새로 추가된 요소를 태그로 선언
$ bower install Polymer/paper-checkbox
현재 폴더의 ./components/paper-checkbox/
<link rel="import" href="components/paper-checkbox/paper-checkbox.html">
<paper-checkbox></paper-checkbox>
19. ▪ 직접 요소를 생성하는 방법
1. 요소에 해당되는 페이지 작성
a) Polymer core를 페이지에 삽입
b) <polymer-element>를 사용해 새로운 태그 등록
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="사용자정의-태그" noscript>
<template>
<span>내용</span>
</template>
</polymer-element>
20. 2. 사용될 페이지에서 요소 페이지 삽입 후, 태그로 선언
<head>
<script src="../components/platform/platform.js"></script>
<link rel="import" href="./파일.html">
</head>
<body>
<사용자정의-태그></사용자정의-태그>
</body>
21. ▪ 사용되는 웹 컴포넌트 파일들을 병합해 HTTP request를 줄일 수 있도록
해주는 도구
$ vulcanize 대상파일.html --inline --strip -o 결과파일.html
https://github.com/Polymer/vulcanize
23. ▪ WebComponents.org
http://webcomponents.org/
▪ Google I/O 2014 - Polymer and Web Components change everything you know about Web
development
https://www.youtube.com/watch?v=8OJ7ih8EE7
▪ Google I/O 2014 - Polymer and the Web Components revolution
https://www.youtube.com/watch?v=yRbOSdAe_JU
▪ Google I/O 2014 - Unlock the next era of UI development with Polymer
https://www.youtube.com/watch?v=HKrYfrAzqFA
▪ Custom Elements
http://www.html5rocks.com/en/tutorials/webcomponents/customelements/
▪ HTML Imports
http://www.html5rocks.com/en/tutorials/webcomponents/imports/
▪ HTML's New Template Tag
http://www.html5rocks.com/en/tutorials/webcomponents/template/
▪ Shadow DOM
http://www.html5rocks.com/en/tutorials/webcomponents/shadowdom/