Polymer Getting Started ( 폴리머 시작하기) 페이지에 폴리머의 예가 표시됩니다.
<html>
<head>
<!-- 1. Shim missing platform features -->
<script src="polymer-all/platform/platform.js"></script>
<!-- 2. Load a component -->
<link rel="import" href="x-foo.html">
</head>
<body>
<!-- 3. Declare the component by its tag. -->
<x-foo></x-foo>
</body>
</html>
주목할 것은 and에 <x-foo></x-foo>의해 정의되는 것 입니다.platform.jsx-foo.html
이것은 AngularJS의 지시문 모듈과 같습니다.
angular.module('xfoo', [])
.controller('X-Foo', ['$scope',function($scope) {
$scope.text = 'hey hey!';
})
.directive('x-foo', function() {
return {
restrict: 'EA',
replace: true,
controller: 'X-Foo',
templateUrl: '/views/x-foo.html',
link: function(scope, controller) {
}
};
});
-
둘의 차이점은 무엇입니까?
-
AngularJS가 가지고 있지 않은 폴리머는 어떤 문제를 해결합니까?
-
향후 AngularJS와 Polymer를 연계 할 계획이 있습니까?
답변
이 질문을 가장 먼저하는 사람은 아닙니다. 🙂 질문을하기 전에 몇 가지 사항을 명확히하겠습니다.
-
Polymer
webcomponents.js는 Web Components 우산에 해당하는 다양한 W3C API에 대한 여러 개의 폴리 필을 포함하는 라이브러리입니다. 이것들은:- 맞춤 요소
- HTML 가져 오기
<template>- 그림자 DOM
- 포인터 이벤트
- 다른 사람
문서 ( polymer-project.org ) 의 왼쪽 탐색 메뉴 에는 이러한 “플랫폼 기술”에 대한 페이지가 있습니다. 이러한 각 페이지에는 개별 폴리 필에 대한 포인터도 있습니다.
-
<link rel="import" href="x-foo.html">HTML 가져 오기입니다. 가져 오기는 다른 HTML에 HTML을 포함시키는 데 유용한 도구입니다. 당신은 포함 할 수 있습니다<script>,<link>마크 업 또는 가져 오기에 어떤 다른 사람을. -
<x-foo>x-foo.html에 “링크” 되는 것은 없습니다 . 귀하의 예에서<x-foo>(예<element name="x-foo">🙂 의 맞춤 요소 정의가 x-foo.html에 정의되어 있다고 가정합니다 . 브라우저가 해당 정의를 보면 새 요소로 등록됩니다.
질문에!
Angular와 Polymer의 차이점은 무엇입니까?
우리는 Q & A 비디오 에서이 중 일부를 다루었습니다 . 일반적으로 Polymer는 웹 구성 요소를 사용하고 사용하는 방법을 보여주는 라이브러리입니다. 기본 요소는 사용자 지정 요소 (예 : 빌드하는 모든 것이 웹 구성 요소 임)이며 웹이 진화함에 따라 진화합니다. 이를 위해 최신 버전의 최신 브라우저 만 지원합니다.
이 이미지를 사용하여 Polymer의 전체 아키텍처 스택을 설명합니다.
적색 층 : 우리는 일련의 폴리 필을 통해 내일의 웹을 얻습니다. 브라우저가 새로운 API를 채택함에 따라 이러한 라이브러리는 시간이 지남에 따라 사라집니다.
노란색 레이어 : 일부 설탕에 polymer.js를 뿌립니다. 이 계층은 지정된 API를 함께 사용하는 방법에 대한 의견입니다. 또한 데이터 바인딩, syntatic sugar, change watcher, 게시 된 속성 등이 추가됩니다. 웹 컴포넌트 기반 앱을 구축하는 데 도움이된다고 생각합니다.
녹색 : 포괄적 인 UI 구성 요소 세트 (녹색 계층)가 여전히 진행 중입니다. 이것들은 모든 빨강 + 노랑 레이어를 사용하는 웹 컴포넌트입니다.
각도 지시어 대 사용자 정의 요소?
Alex Russell의 답변을 참조하십시오 . 기본적으로 Shadow DOM은 약간의 HTML 작성을 허용하지만 해당 HTML을 캡슐화하는 도구이기도합니다. 이것은 기본적으로 웹의 새로운 개념이며 다른 프레임 워크가 활용할 것입니다.
AngularJS가 가지고 있지 않은 폴리머는 어떤 문제를 해결합니까?
유사성 : 선언적 템플릿, 데이터 바인딩.
차이점 : Angular는 서비스, 필터, 애니메이션 등에 대한 고급 API를 보유하고 있으며 IE8을 지원하며 현재 프로덕션 앱을 구축하기위한 훨씬 강력한 프레임 워크입니다. 폴리머는 알파에서 시작됩니다.
향후 AngularJS와 Polymer를 연계 할 계획이 있습니까?
그들은 별도의 프로젝트 입니다. 그러나 Angular 팀과 Ember 팀 은 결국 자체 플랫폼에서 기본 플랫폼 API를 사용 하기로 했다고 발표했습니다 .
^ 이것은 큰 승리 IMO입니다. 웹 개발자가 강력한 도구 (Shadow DOM, Custom Elements)를 사용하는 세계에서 프레임 워크 작성자는 이러한 기본 요소를 활용하여 더 나은 프레임 워크를 작성할 수 있습니다. 그들 대부분은 현재 “일을 끝내기”위해 큰 농구를 겪고있다.
최신 정보:
이 주제에 대한 훌륭한 기사가 있습니다. ” 여기에 Polymer와 Angular의 차이점이 있습니다. “
답변
질문 :
향후 AngularJS와 Polymer를 연계 할 계획이 있습니까?
AngularJS의 공식 트위터 계정에서 : “angularjs는 위젯에 폴리머를 사용할 것입니다. 그것은 상생입니다”
출처 : https://twitter.com/angularjs/status/335417160438542337
답변
이 비디오에서 AngularJS의 두 사람은이 두 프레임 워크 (AngularJS 1.2와 Beyond)의 차이점과 유사점에 대해 이야기했습니다.
이 링크는 올바른 Q & A로 연결됩니다.
답변
1 & 2) 폴리머 구성 요소는 그림자 돔에 숨겨진 트리로 인해 범위가 지정됩니다. 그것은 그들의 스타일과 행동이 번질 수 없다는 것을 의미합니다. Angular는 폴리머 웹 컴포넌트처럼 작성하는 특정 지시문에 적용되지 않습니다. 각도 지시문은 전역 범위의 무언가와 충돌 할 수 있습니다. IMO는 폴리머에서 얻을 수있는 이점은 내가 설명한 것입니다. CSS 및 JavaScript의 범위가 지정된 모듈 형 구성 요소는 아무 것도 건드릴 수없는 특정 구성 요소로 구성됩니다. 만질 수없는 DOM!
각도 지시문은 여러 기능으로 요소에 주석을 달 수 있도록 만들 수 있습니다. 그렇지 않은 Polymer 웹 구성 요소. 구성 요소의 기능을 결합하려면 두 구성 요소를 다른 구성 요소에 포함 시키거나 다른 구성 요소로 랩핑하거나 기존 구성 요소를 확장 할 수 있습니다. 여전히 주된 차이점은 각 구성 요소가 폴리머 웹 구성 요소에 적용된다는 것입니다. 여러 구성 요소에서 CSS 및 js 파일을 공유하거나 인라인 할 수 있습니다.
3) 예, Angular는 Rob Dodson과 Eric Bidelman에 따르면 버전 2 이상에서 폴리머를 통합 할 계획입니다.
여기서 아무도 스코프라는 단어를 언급하지 않은 것은 재밌습니다. 나는 이것이 가장 큰 차이점 중 하나라고 생각합니다.
많은 차이점이 있지만 앱의 모듈 식 레고와 같은 기능을 만들 때 공통점이 많습니다. Angular는 응용 프로그램 프레임 워크이며 폴리머는 언젠가 범위가 다른 주요 지침과 함께 측면 지침과 함께 동일한 앱에 살 수 있지만 폴리머는 현재 많은 지침을 대체 할 수 있다고 말하는 것이 안전하다고 생각합니다. 그러나 Angular가 그대로 작동하지 않고 폴리머 구성 요소도 포함시키는 이유는 없습니다.
이 글을 쓰는 동안 답을 다시 읽으면서 Eric Bidelman (ebidel)이 자신의 답변 에서 그 내용을 다루는 것을 발견했습니다 .
“Shadow DOM은 약간의 HTML 작성을 허용하지만 HTML을 캡슐화하는 도구이기도합니다.”
신용이 필요한 곳에서 신용을주기 위해 Rob Dodson 과 Eric Bidelman 과의 많은 인터뷰를 듣고 답을 얻었습니다 . 그러나 나는 그 사람의 질문에 그가 원하는 것을 이해하도록 대답하지 않았다고 생각합니다. 그 말로, 나는 그가 찾고있는 대답을 만졌다 고 생각하지만 Rob Dodson과 Eric Bidelman보다 주제에 대한 더 많은 정보를 가지고 있지 않습니다.
내가 수집 한 정보의 주요 출처는 다음과 같습니다.
답변
폴리머는 웹 컴포넌트 심입니다
-
” 웹 구성 요소 “는 웹 응용 프로그램에 재사용 가능한 빌딩 블록을 제공하도록 설계된 HTML 5에 포함 된 새로운 표준 세트입니다.
-
브라우저는 “웹 구성 요소”사양을 구현하는 다양한 상태에 있으므로 웹 구성 요소를 사용하여 HTML을 작성하기에는 너무 이릅니다.
-
그러나 아아! 구조에 폴리머! Polymer는 HTML 코드에 추상화 계층을 제공하는 라이브러리로, 모든 브라우저에서 완전히 구현 된 것처럼 웹 구성 요소 API를 사용할 수 있습니다. 이를 poly-filling 이라고 하며 Polymer 팀은이 라이브러리를 webcomponents.js 로 배포 합니다 . 이것을 platform.js btw 라고했습니다 .
그러나 Polymer는 웹 구성 요소를위한 폴리 필 라이브러리 이상입니다 …
Polymer는 Elements를 통해 개방적이고 재사용 가능한 웹 컴포넌트 빌딩 블록을 제공합니다.
모든 요소를 사용자 정의하고 확장 할 수 있습니다. 이들은 소셜 위젯에서 애니메이션, 웹 API 클라이언트에 이르기까지 모든 구성 요소로 사용됩니다.
폴리머는 웹 애플리케이션 프레임 워크가 아닙니다
-
폴리머는 프레임 워크보다 더 많은 라이브러리입니다.
-
Polymer는 경로, 응용 범위, 컨트롤러 등과 같은 것을 지원하지 않습니다.
- 그러나 양방향 바인딩이 있으며 Angular 지시문을 사용하는 것처럼 구성 요소를 사용하는 것이 “느낌”입니다.
-
Polymer와 AngularJS간에 겹치는 부분이 있지만 동일하지 않습니다. 실제로 AngularJS 팀은 다음 릴리스에서 Polymer 라이브러리를 사용한다고 언급했습니다.
-
또한 AngularJS가 안정화되는 동안 폴리머는 여전히 “블리딩 에지”로 간주됩니다.
-
이 두 Google 프로젝트가 모두 진화하는 것을 보는 것은 흥미로울 것입니다!
답변
실용적인 관점에서, 결국 각도 지시문의 템플릿 기능과 폴리머가 활용하는 웹 구성 요소 방법론이 동일한 작업을 수행한다고 생각합니다. 내가 볼 수있는 주요 차이점은 폴리머가 웹 API를 활용하여 템플릿을 렌더링 할 때 Angular가 프로그래밍 방식으로 수행하는 것을보다 구문 적으로 정확하고 간단하게 달성하는 HTML 비트를 포함한다는 것입니다. 그러나 폴리머는 구성 요소를 사용하여 선언적이고 대화 형 템플릿을 작성하기위한 작은 프레임 워크입니다. UI 디자인 목적으로 만 사용 가능하며 최신 브라우저에서만 지원됩니다. AngularJS는 데이터 바인딩, 종속성 및 지시문을 사용하여 웹 응용 프로그램을 선언하도록 설계된 완벽한 MVC 프레임 워크입니다. 그들은 완전히 다른 두 동물입니다. 당신의 질문에 이 시점에서 수십 개의 사전 빌드 된 구성 요소를 제외하고는 각도에 비해 폴리머를 사용하면 큰 이점을 얻지 못하지만 각도 지시문에 포트를 이식해야합니다. 그러나 앞으로 웹 API가 더욱 발전함에 따라 브라우저는 자바 스크립트 또는 CSS 파일을 처리하는 방법과 유사한 방식으로 템플릿을 간단하게 포함 할 수 있으므로 웹 구성 요소는 프로그래밍 방식으로 템플릿을 정의하고 빌드 할 필요가 없습니다.
답변
Angular가 제공하는 MVVM (모델-뷰, 뷰-모델)은 Polymer가 해결하고자하는 문제가 아닙니다. Angular 지시문이 제공하는 구성 가능하고 재사용 가능한 특성 (사용자 정의 태그 + 관련 논리 조합)은 Angular와 Polymer를 비교할 때 더 깔끔한 비교입니다. 각도는 더 광범위한 목적을 제공하는 프레임 워크입니다.
