Polymer 요소와 AngularJS 지시문의 차이점은 무엇입니까?


524

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를 연계 할 계획이 있습니까?


유용한 정보 여기에 2ality-AngularJS와 폴리머의 역할
LCJ

답변:


520

이 질문을 가장 먼저하는 사람은 아닙니다. :) 질문을하기 전에 몇 가지 사항을 명확히하겠습니다.

  1. Polymer webcomponents.js는 Web Components 우산에 해당하는 다양한 W3C API에 대한 여러 개의 폴리 필을 포함하는 라이브러리입니다. 이것들은:

    • 맞춤 요소
    • HTML 가져 오기
    • <template>
    • 그림자 DOM
    • 포인터 이벤트
    • 다른 사람

    문서 ( polymer-project.org ) 의 왼쪽 탐색 메뉴 에는 이러한 "플랫폼 기술"에 대한 페이지가 있습니다. 이러한 각 페이지에는 개별 폴리 필에 대한 포인터도 있습니다.

  2. <link rel="import" href="x-foo.html">HTML 가져 오기입니다. 가져 오기는 다른 HTML에 HTML을 포함시키는 데 유용한 도구입니다. 당신은 포함 할 수 있습니다 <script>, <link>마크 업 또는 가져 오기에 어떤 다른 사람을.

  3. <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의 차이점이 있습니다. "


46
여기서 중요한 점은 Polymer가 웹을 앞으로 나아갈 수있는 것, 특히 웹 구성 요소가 웹을 공유하고 공유 가능하고 확장 가능하게 만드는 방법을 보여주는 것입니다. AngularJS (그리고 그 문제에 대한 Ember)는 반응 형 응용 프로그램을 만들기 위해 브라우저의 가장 좋은 부분을 활용하는 프레임 워크를 만드는 것입니다. 웹 컴포넌트가 브라우저에 의해 더 잘 지원되면 Angular 및 기타 프레임 워크가이를 기반으로하여 프레임 워크 코드를 더 작게 만들고 애플리케이션을 더 단순하게 만들 수 있습니다. 이것이 모두에게 상생입니다.
Schmuli

31
그래도 Polymer Custom Elements와 Angular Directives의 실제 차이점이 무엇인지 이해하지 못합니까? Angular 프로젝트에서 Angular 지시문 대신 Polymer Custom Elements를 사용하는 이유는 무엇입니까?
ronag

3
따라서 기존 Angular 및 Ember 프로젝트는 궁극적으로 기본 플랫폼 API를 사용하면 이점을 얻을 수 있습니다. 그러나 웹 구성 요소가 브라우저에서 더 잘 지원 될 때 프로젝트 에서 여전히 Angular를 사용하면 어떤 이점 이 있습니까, 아니면 효과적으로 중복됩니까?
팬케이크

8
흑백으로 만들 생각입니다. AngularJS를 사용하여 생산 재료를 사용하고 여가 시간에 Polymer를 사용하여 시간이되면 친숙해질 수 있습니다.
thdoan

31
그것은 polymer.js에 대한 좋은 개요이지만 질문에 완전히 대답하지는 않습니다.
Christoph

57

질문 :

향후 AngularJS와 Polymer를 연계 할 계획이 있습니까?

AngularJS의 공식 트위터 계정에서 : "angularjs는 위젯에 폴리머를 사용할 것입니다. 그것은 상생입니다"

출처 : https://twitter.com/angularjs/status/335417160438542337


2
@ NREZ 좋아, 나는 게시물의 제목에 대답하지 않지만 게시물 안에있는 질문 중 하나는 나의 세 번째 질문에 대한 것입니다 : Are there plans to tie Polymer in with AngularJS in the future? 당신이 생각하지 않는 AngularJS 팀의 원래 게시물을 인용하는 것이 좋습니다 ?
loïc m.

그렇습니다. 요점은 유효합니다 ... 설명이 더 나을 수 있었을 것입니다 ... 이번에 해본 것처럼 다음 번에도 확실합니다 ...
NREZ

물론이지. thx for your update :) (단순히 stackoverflow를 사용하기 시작하므로 답장을 보내기 전에 업데이트가 표시되지 않습니다 ...)
loïc m.

그들은 마음이 바뀌 었나요? 그들이 폴리머를 사용하는 곳을 찾을 수없는 것 같습니다.
theblang

나는 이것이 대답이라고 생각하지 않습니다.
astroanu


19

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 DodsonEric Bidelman 과의 많은 인터뷰를 듣고 답을 얻었습니다 . 그러나 나는 그 사람의 질문에 그가 원하는 것을 이해하도록 대답하지 않았다고 생각합니다. 그 말로, 나는 그가 찾고있는 대답을 만졌다 고 생각하지만 Rob Dodson과 Eric Bidelman보다 주제에 대한 더 많은 정보를 가지고 있지 않습니다.

내가 수집 한 정보의 주요 출처는 다음과 같습니다.

JavaScript Jabber-Rob Dodson 및 Eric Bidelman의 폴리머

쇼핑 토크쇼-Rob Dodson의 웹 구성 요소


1
따라서를 사용 normalize.css하면 그림자 돔 내부에서 정규화되지 않습니까? 그래서 한 번 할 수있는 방법없이 각 구성 요소를 별도로 표준화해야합니까? 좋은가요?
Dmitri Zaitsev

1
Shadow DOM을 IFRAME이라고 생각하지 마십시오. 그리고 나는이 비교가 IFRAME이 아니기 때문에 느슨하게 사용합니다. 그러나 IFRAME에서는 부모 문서의 CSS 및 JavaScript 페이지에 영향을받지 않는 자신의 문서를 갖게됩니다. 이것은 매우 좋은 것입니다. 즉, 특정 구성 요소가 의도 한대로 실행되고 부모 페이지에 의해 방해받지 않도록 보장 할 수 있습니다. 그러나 섀도우 DOM이 상위 페이지에서 DOM을 사용하려는 경우 가능합니다. 그러나 그것은 또 다른 주제입니다.
Eric Bishard

1
그렇습니다. CSS는 새는 언어이지만 대부분의 경우 격리하려는 DOM 내부에 고유 클래스 접두사를 사용하여 간단한 (완벽하지는 않지만) 솔루션이 있습니다. 물론 태그와 ID 선택기를 피함으로써 좋은 방법은 아닙니다. 반면에 이러한 선언 중 일부는 실제로 누출을 원할 수도 있습니다 (예 normalize.css: 다른 태그 기반 시트). 이는 Shadow DOM없이 쉽게 달성 할 수 있습니다. 분명히 완벽한 격리가 아니라 문제입니다. 적어도 내가 생각할 수있는 유스 케이스의 95 %에서 작동합니다.
Dmitri Zaitsev

2
그렇게 말하면서, 나는 적절한 고립의 장점을보고 좋은 설명을 제공하는 당신의 대답을 찾아야합니다.
Dmitri Zaitsev

6

폴리머는 웹 컴포넌트 심입니다

  • " 웹 구성 요소 "는 웹 응용 프로그램에 재사용 가능한 빌딩 블록을 제공하도록 설계된 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 프로젝트가 모두 진화하는 것을 보는 것은 흥미로울 것입니다!


폴리머는 심 또는 폴리 필이 아닙니다. 이것이 webcomponents.js polyfills입니다. Polymer는 웹 구성 요소를 작성하기위한 라이브러리입니다. Polymer 팀은 또한 Polymer를 사용하여 구현 된 웹 구성 요소 모음도 만들었지 만 "Polymer"도 아닙니다
ebidel

업데이트 : 폴리머는 이제 경로가 있으며 안정적입니다! : D
JordyvD

5

실용적인 관점에서, 결국 각도 지시문의 템플릿 기능과 폴리머가 활용하는 웹 구성 요소 방법론이 동일한 작업을 수행한다고 생각합니다. 내가 볼 수있는 주요 차이점은 폴리머가 웹 API를 활용하여 템플릿을 렌더링 할 때 Angular가 프로그래밍 방식으로 수행하는 것을보다 구문 적으로 정확하고 간단하게 달성하는 HTML 비트를 포함한다는 것입니다. 그러나 폴리머는 구성 요소를 사용하여 선언적이고 대화 형 템플릿을 작성하기위한 작은 프레임 워크입니다. UI 디자인 목적으로 만 사용 가능하며 최신 브라우저에서만 지원됩니다. AngularJS는 데이터 바인딩, 종속성 및 지시문을 사용하여 웹 응용 프로그램을 선언하도록 설계된 완벽한 MVC 프레임 워크입니다. 그들은 완전히 다른 두 동물입니다. 당신의 질문에 이 시점에서 수십 개의 사전 빌드 된 구성 요소를 제외하고는 각도에 비해 폴리머를 사용하면 큰 이점을 얻지 못하지만 각도 지시문에 포트를 이식해야합니다. 그러나 앞으로 웹 API가 더욱 발전함에 따라 브라우저는 자바 스크립트 또는 CSS 파일을 처리하는 방법과 유사한 방식으로 템플릿을 간단하게 포함 할 수 있으므로 웹 구성 요소는 프로그래밍 방식으로 템플릿을 정의하고 빌드 할 필요가 없습니다.


1
"그들은 완전히 다른 동물입니다." 그렇습니다. 그러나 그것은 질문과 관련이 없습니다. 문제는 Polymer ELEMENTS vs AngularJS DIRECTIVES에 관한 것입니다. 그것들은 여러면에서 매우 비슷합니다. 우리는 사용하기 가장 좋은 프레임 워크가 무엇인지 묻지 않습니다. Polymer vs AngularJS. "이 시점에서 나에게 폴리머를 사용하는 것보다 큰 이점을 얻지 못할 것 같습니다."아무도 이것을 제안하지 않았으며, 실제로 우리는 결국 일부 용량에서 나란히 사용하는 것에 대해 이야기했습니다. "질문에, ... 각도에 비해 폴리머를 사용하면 이점이 없습니다."다시 한 번 질문은 아닙니다.
Eric Bishard

0

Angular가 제공하는 MVVM (모델-뷰, 뷰-모델)은 Polymer가 해결하고자하는 문제가 아닙니다. Angular 지시문이 제공하는 구성 가능하고 재사용 가능한 특성 (사용자 정의 태그 + 관련 논리 조합)은 Angular와 Polymer를 비교할 때 더 깔끔한 비교입니다. 각도는 더 광범위한 목적을 제공하는 프레임 워크입니다.


0

둘의 차이점은 무엇입니까?

사용자에게 : 많지 않습니다. 두 가지 모두로 멋진 앱을 만들 수 있습니다.

개발자에게 : 그들은 서로 다른 구문을 사용하므로 두 솔루션 모두 상당히 가파른 학습 곡선을 갖습니다. Angular는 오래 전부터 사용되어 왔으며 거대한 커뮤니티가 있으므로 해결되지 않은 문제를 찾기가 어려울 것입니다.

건축가에게 : 매우 다릅니다. Angular는 삶의 모든 측면을 담당하는 응용 프로그램 프레임 워크입니다. 구성 요소와 같은 기능을 원할 경우 지시 사항이 수직으로 통합되어 있습니다. 반면에 폴리머는 종량제와 비슷합니다. 당신은 모달을 원합니다. 확실한 대화식 위젯을 원하고 문제 없습니다. 경로 처리를 원합니다. 우리는 그렇게 할 수 있습니다. Angular는 지시어를 재사용하기 위해 Angular 앱이 필요하다는 점에서 폴리머가 더 이식성이 뛰어납니다. Polymer의 아이디어는 더 모듈화되어 있으며 다른 앱, Angular 앱에서도 작동합니다.

AngularJS가 가지고 있지 않은 폴리머는 어떤 문제를 해결합니까?

Polymer는 새로운 웹 구성 요소 표준을 활용하기위한 접근 방식입니다. 사용자 정의 요소, Shadow DOM 및 HTML 가져 오기와 같은 기능이 로컬에서 지원되는 경우이를 활용하지 않는 것은 어리석은 일입니다. 현재 대부분의 웹 구성 요소 기능은 널리 지원되지 않으므로 ( 현재 상태 ) Polymer는 심 또는 브리지 역할을합니다. polyfill을 좋아합니다 (실제로 polyfill을 사용합니다).

향후 AngularJS와 Polymer를 연계 할 계획이 있습니까?

우리는 1 년 이상 Angular와 Polymer를 함께 사용해 왔습니다. 이를 수행하기로 한 결정의 일부는 Polymer 팀이 상호 운용성을 제공한다는 약속을 기반으로했습니다. 우리는 그 아이디어를 포기했습니다. 우리는 이제 폴리머만을 사용하는쪽으로 나아가고 있습니다.

다시 해보기 위해 우리는 아마도 Polymer를 전혀 사용하지 않았을 것입니다. 대신 성숙해질 때까지 기다리십시오. 그것은 Polymer가 장점 (일부 꽤 좋음)과 단점 (일부는 매우 실망 스럽습니다)이지만 다른 스레드에 대한 토론이라고 생각합니다.


0

Angularjs 지시어맞춤 요소를 만들기위한 접근 방식입니다. 사용자 정의 속성을 사용하여 새 사용자 정의 태그를 정의 할 수 있습니다. Polymer는 또한이 작업을 수행 할 수 있지만 흥미롭고보다 간단한 방법으로 수행 할 수 있습니다 .Polymer는 실제로 프레임 워크가 아니라 단지 라이브러리 일뿐입니다 (그러나 나와 같은). Polymer를 사용하면 w3c가 만든 웹 구성 요소 기술을 익힐 수 있습니다. 웹 브라우저는 궁극적으로 웹 브라우저를 구현합니다. 웹 구성 요소는 미래의 기술이지만 지금은이 기술을 사용할 수 있습니다 .Google Polymer는 건축을위한 구문 설탕과 폴리 필을 제공하는 라이브러리입니다. 웹 구성 요소가있는 요소와 응용 프로그램. 폴리머는 프레임 워크가 아니며 라이브러리라고 말하지만 폴리머를 사용하는 경우 실제로 프레임 워크는 DOM입니다. 이 게시물은 angular js ver 1 및 폴리머에 관한 것이었고 두 프로젝트와 함께 일해 왔으며 개인적으로 angularjs보다 폴리머를 선호합니다. 그러나 Angular 버전 2는 angularjs 버전 1과 비교하여 완전히 다릅니다. 각도 2의 지시문은 다른 의미를 갖습니다.


0

각도 지시문은 개념적으로 사용자 지정 요소와 유사하지만 웹 구성 요소 API를 사용하지 않고 구현됩니다. 각도 지시문은 사용자 지정 요소를 작성하는 방법이지만 Polymer 및 Web Components 사양은 표준 기반 방식입니다.

중합체 성분 :

<polymer-element name="user-preferences" attributes="email">
  <template>
    <img src="https://secure.user-preferences.com/path/{{userID}}" />
  </template>
  <script>
    Polymer('user-preferences', {
      ready: function() {
        this.userID= md5(this.email);
      }
    });
  </script>
</polymer>

각도 지시어 :

app.directive('user-preferences', ['md5', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.userID= md5(attrs.email);
    },
    template: '<img src="https://secure.user-preferences.com/path/{{userID}}" />'
  };
}]);
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.