Polymer要素とAngularJSディレクティブの違いは何ですか？

524

Polymer Getting Startedページに、動作中のPolymerの例が表示されます。

<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>

あなたが気づくのはと<x-foo></x-foo>によって定義されplatform.jsていx-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) {
        }
    };
});

  • 2つの違いは何ですか？

  • Polymerは、AngularJSが持っていない、またはしないという問題を解決しますか？

  • 将来的に、PolymerをAngularJSと関連付ける計画はありますか？

javascript  angularjs  polymer 
— 段観世
ソース
ここで役立つ情報2ality-AngularJSとPolymerの役割
— LCJ

回答:

520

この質問をするのはあなたが最初ではありません:)質問に入る前に、いくつかのことを明確にしましょう。

  1. Polymer webcomponents.jsは、Webコンポーネントの傘下にあるさまざまな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はWebコンポーネントの使用（および使用方法の説明）を目的とするライブラリです。その基盤はカスタム要素（たとえば、構築するすべてのものはWebコンポーネントです）であり、Webの進化とともに進化します。そのため、最新のブラウザの最新バージョンのみをサポートしています。

この画像を使用して、Polymerのアーキテクチャスタック全体を説明します。

ここに画像の説明を入力してください

REDレイヤー：一連のポリフィルによって明日のウェブを実現します。ブラウザーが新しいAPIを採用するにつれて、これらのライブラリーは時間の経過とともになくなることに留意してください。

黄色のレイヤー：Polymer.jsで砂糖をふりかけます。このレイヤーは、スペックのAPIを一緒に使用する方法に関する私たちの意見です。また、データバインディング、シンタティックシュガー、変更ウォッチャー、公開プロパティなども追加します。これらは、Webコンポーネントベースのアプリの構築に役立つと思います。

緑：UIコンポーネントの包括的なセット（緑のレイヤー）はまだ進行中です。これらは、赤と黄色のレイヤーをすべて使用するWebコンポーネントになります。

Angularディレクティブ対カスタム要素？

Alex Russellの回答を参照してください。基本的に、Shadow DOMはHTMLのビットを構成することを可能にしますが、そのHTMLをカプセル化するためのツールでもあります。これは基本的にWeb上の新しい概念であり、他のフレームワークが活用するものです。

Polymerは、AngularJSが持っていない、またはしないという問題を解決しますか？

類似点：宣言型テンプレート、データバインディング。

違い：Angularには、サービス、フィルター、アニメーションなどのための高レベルのAPIがあり、IE8をサポートしており、現時点では、プロダクションアプリを構築するためのはるかに堅牢なフレームワークです。Polymerはアルファ版で始まったばかりです。

将来的に、PolymerをAngularJSと関連付ける計画はありますか？

それらは別々のプロジェクトです。とはいえ、AngularチームとEmberチームの両方が、最終的には独自のフレームワークで基盤となるプラットフォームAPIの使用に移行すると発表しました。

^これは大きな勝利のIMOです。Web開発者が強力なツール（シャドウDOM、カスタム要素）を持っている世界では、フレームワークの作成者はこれらのプリミティブを利用して、より優れたフレームワークを作成することもできます。彼らのほとんどは、現在、「仕事を成し遂げる」ために大いに努力しています。

更新：

このトピックに関する本当に素晴らしい記事があります：「PolymerとAngularの違いはここにあります」

— エビデル
ソース
46
ここで重要な点は、Polymerは、Webコンポーネントを使用してWebをオープンにし、共有可能かつ拡張可能にする方法を具体的に示すことで、私たちが知っているようにWebを取り入れることです。AngularJS（およびその点ではEmber）は、レスポンシブアプリケーションを作成するためにブラウザーの最良の部分を活用するフレームワークを作成することです。ブラウザによるWebコンポーネントのサポートが改善されると、Angularやその他のフレームワークをベースに構築して、フレームワークのコードを小さくし、アプリケーションをシンプルにすることができます。それが、すべてにとってWin-Winである理由です。
— Schmuli 2013
31
それでもPolymer Custom ElementsとAngular Directivesの実際的な違いがわかりませんか？AngularプロジェクトでAngularディレクティブの代わりにPolymerカスタム要素を使用するのはなぜですか？
— ronag 2013
3
したがって、既存のAngularプロジェクトとEmberプロジェクトは、最終的には、基盤となるプラットフォームAPIを使用することでメリットを得られます。しかし、Webコンポーネントがブラウザーでより適切にサポートされている場合、Angularを新しいプロジェクトで引き続き使用することで何か利点がありますか、それとも実質的に冗長になりますか？
— 2014年
8
私はそれを白黒にすることを考えています：プロダクション用にAngularJSを使い、空いた時間にPolymerで遊んで、時が来たらそれに慣れるようにしてください。
— thdoan 2014年
31
これはPolymer.jsの概要ですが、質問に完全に答えることはできません...
— Christoph
57

あなたの質問：

将来的に、PolymerをAngularJSと関連付ける計画はありますか？

AngularJSの公式Twitterアカウントから：「angularjsはウィジェットにポリマーを使用します。Win-Winです」

ソース：https : //twitter.com/angularjs/status/335417160438542337

— loïcm。
ソース
2
@NREZわかりました。投稿のタイトルには答えませんが、投稿内の質問の1つです。私の答えは3番目の質問だけです Are there plans to tie Polymer in with AngularJS in the future? 。AngularJSチームからの元の投稿を引用するのは良い考えだと思います？
— ロイックM。
うん確かウルポイントは有効です...ただ、説明はより良い...のように私はそれが今回やったされている可能性があり、私はuが同様次回確信していることを...
— NREZ
はい確かに。更新のためのthx :)（私は単に実際にstackoverflowを使い始めているので、返信する前に更新を確認しません...）
— loïcm。
それで彼らはそこで心を変えましたか？彼らがポリマーを使用している場所を見つけることができないようです。
— theblang 2014年
これは答えではないと思います。
— astroanu 2015
19

1と2）影のドームに隠された木があるため、ポリマーコンポーネントのスコープが設定されています。つまり、彼らのスタイルと行動は出血しないということです。Angularは、ポリマーWebコンポーネントのように作成する特定のディレクティブにスコープされていません。角度ディレクティブは、グローバルスコープ内の何かと競合する可能性があります。IMOがポリマーから得られるメリットは、私が説明したものです。CSSとJavaScriptをスコープとするモジュールコンポーネントは、何も触れることができない特定のコンポーネントに限定されています。アンタッチャブルDOM！

Angularディレクティブを作成して、いくつかの機能を持つ要素に注釈を付けることができます。ポリマーウェブコンポーネントではそうではありません。コンポーネントの機能を組み合わせる場合は、2つのコンポーネントを別のコンポーネントに含める（またはそれらを別のコンポーネントにラップする）か、既存のコンポーネントを拡張できます。主な違いは、各コンポーネントのスコープがポリマーWebコンポーネントであることを忘れないでください。複数のコンポーネント間でcss＆jsファイルを共有したり、インライン化したりできます。

3）はい、Rob DodsonとEric Bidelmanによると、Angularはバージョン2+にポリマーを組み込むことを計画しています

ここでスコープという言葉を誰も言及していないのはおかしいです。それが大きな違いだと思います。

多くの違いがありますが、アプリの機能のようなモジュール式のレゴを作成することに関しては、多くの共通点があります。Angularはアプリケーションフレームワークであり、ポリマーは同じアプリ内で副次的なディレクティブと一緒にいつの日か存在する可能性があると言って間違いありませんが、ポリマーは現在の多くのディレクティブの代わりになる可能性があります。しかし、Angularがそのままでは機能せず、ポリマーコンポーネントも含めることができない理由はわかりません。

私がこれを書いている間に答えをもう一度読んだとき、私はエリック・ビデルマン（ebidel）が彼の答えで一種のカバーをしていることに気づきました：

「Shadow DOMは、HTMLの一部を構成することを可能にしますが、そのHTMLをカプセル化するためのツールでもあります。」

クレジットが原因です信用を与えるために、私はと多くのインタビューを聞いてから、私の答えを得たロブ・ドッドソンとエリックBidelman。しかし、私はこの男の質問に彼が望んでいた理解を与えるために答えが言葉で表現されていなかったと感じています。そうは言っても、私は彼が探している答えに触れたと思いますが、Rob DodsonとEric Bidelmanよりも多くの情報を持っているわけではありません

収集した情報の主な情報源は次のとおりです。

JavaScript Jabber-Rob DodsonとEric BidelmanによるPolymer

Shop Talk Show-Rob DodsonによるWebコンポーネント

— エリック・ビシャード
ソース
1
では、を使用するnormalize.cssと、シャドウDOM内で正規化されませんか？だから私は一度にそれを行う方法なしに、そのような各コンポーネントを別々に正規化する必要がありますか？いいことですか？
— Dmitri Zaitsev
1
Shadow DOMをIFRAMEとは考えないでください。そして、私はそれがIFRAMEではないので、大まかにこの比較を使用します。ただし、IFRAMEでは、親ドキュメントのCSSおよびJavaScriptページの影響を受けない独自のドキュメントを作成します。これはとても良いことです。これは、特定のコンポーネントが意図したとおりに実行され、親ページに干渉されないことを保証できることを意味します。ただし、シャドウDOMが親ページのDOMを使用したい場合は、使用できます。しかし、それは別のトピックです。
— Eric Bishard 2014
1
確かに、CSSは漏れやすい言語ですが、ほとんどの場合、分離するDOM内で一意のクラスプレフィックスを使用することで、完全ではありませんが簡単な解決策があります。そしてもちろん、タグとIDセレクターを回避することによって、これはとにかく良い習慣ではありません。一方、これらの宣言のいくつかは、あなたが実際にありたい（のように漏れてnormalize.cssシャドウDOMずに再び容易に達成可能である、または他のタグベースシート）。確かに完全な分離ではなく、確率。少なくとも私が考えることができる使用事例の95％で機能します。
— ドミトリザイツェフ2014
2
そうは言っても、適切に分離することのメリットを理解していると私は言わなければなりません。そして、あなたの答えが良い説明を提供しているのを見つけます。
— ドミトリザイツェフ2014
6

PolymerはWebコンポーネントシムです

  • 」 Webコンポーネント」は、Webアプリケーションに再利用可能なビルディングブロックを提供するように設計されたHTML 5に含まれる新しい標準のセットです。

  • ブラウザーは、「Webコンポーネント」仕様を実装するさまざまな段階にあります。そのため、Webコンポーネントを使用してHTMLを作成するのは時期尚早です。

  • しかし悲しいかな！救助するポリマー！ Polymerは、HTMLコードに抽象化レイヤーを提供するライブラリで、すべてのブラウザーに完全に実装されているかのようにWebコンポーネントAPIを利用できます。 これはポリフィリングと呼ばれ、Polymerチームはこのライブラリをwebcomponents.jsとして配布します。これはかつて呼ばれていた platform.jsました。

しかし、PolymerはWebコンポーネント用のポリフィルライブラリ以上のものです...

Polymerは、Elementsを介してオープンで再利用可能なWebコンポーネントビルディングブロックも提供します

ここに画像の説明を入力してください

すべての要素はカスタマイズおよび拡張できます。これらは、ソーシャルウィジェットからアニメーション、Web APIクライアントまで、あらゆるもののビルディングブロックとして使用されます。

PolymerはWebアプリケーションフレームワークではありません

  • Polymerは、フレームワークというよりもライブラリです。

  • Polymerは、ルート、アプリケーションスコープ、コントローラーなどをサポートしていません。

    • ただし、双方向のバインディングがあり、コンポーネントを使用すると、Angularディレクティブを使用するのと同じように「感じ」ます。

  • PolymerとAngularJSの間にはいくつかの重複がありますが、同じではありません。実際、AngularJSチームは、今後のリリースでPolymerライブラリを利用することについて言及しています。

  • また、AngularJSが安定している間、Polymerはまだ「最先端」と見なされています。

  • これらのGoogleプロジェクトの両方が進化するのを見るのは興味深いでしょう！

— ロバート・クリスチャン
ソース
ポリマーはシムやポリフィルではありません。それがwebcomponents.jsのポリフィルです。Polymerは、Webコンポーネントを作成するためのライブラリです。Polymerチームは、（Polymerを使用して実装された）Webコンポーネントのコレクションも作成しましたが、これらも「Polymer」ではありません
— ebidel
更新：Polymerにルートが追加され、安定しました！：D
— JordyvD 2016年
5

実用的な観点からは、結局、角度指令のテンプレート機能と、ポリマーが利用するWebコンポーネントの方法論はどちらも同じタスクを実行すると思います。私が見ることができる主な違いは、PolymerがWeb APIを利用してHTMLのビットを含めることです。これは、Angularがテンプレートをレンダリングするときに、Angularがプログラム的に行うことを実現する、より構文的で単純な方法です。ただし、Polymerは前述のとおり、コンポーネントを使用して宣言的でインタラクティブなテンプレートを構築するための小さなフレームワークです。これは、UI設計の目的でのみ利用可能になり、最新のブラウザーでのみサポートされます。AngularJSは、データバインディング、依存関係、およびディレクティブを使用してWebアプリケーションを宣言型にするために設計された完全なMVCフレームワークです。彼らは2つの完全に異なる動物です。あなたの質問に、現時点では、数十のビルド済みコンポーネントがあることを除いて、角度よりもポリマーを使用しても大きなメリットは得られないようですが、それでも、角度ディレクティブにそれらを移植する必要があります。ただし、将来的には、Web APIがより高度になるにつれて、ブラウザーがJavaScriptまたはCSSファイルを処理する方法と同様の方法でテンプレートを単純に含めることができるようになるため、Webコンポーネントにより、プログラムでテンプレートを定義および構築する必要が完全になくなります。

— richbai90
ソース
1
「彼らは2匹の完全に異なる動物です。」はい、そうですが、それは問題とは何の関係もありません。問題は、Polymer ELEMENTSとAngularJSのディレクティブに関するものです。そして、それらは多くの点で非常に似ています。使用するのに最適なフレームワークは何かについて尋ねているわけではありません。Polymervs AngularJS。「現時点では、ポリマーを角度よりも使用しても大きなメリットは得られないようです。」誰もこれを示唆していません。「あなたの質問には、...角度よりもポリマーを使用してもメリットはありません」もう一度、質問ではありません。
— Eric Bishard、2014年
0

Angularが提供するMVVM（モデルビュー、ビューモデル）は、Polymerが解決を目指す問題ではありません。Angularディレクティブが（カスタムタグ+関連するロジックの組み合わせで）提供する構成可能で再利用可能な性質は、AngularとPolymerを比較することを考えると、より健全な比較です。Angularは、より広範な目的を提供するフレームワークです。

— Saurshaz
ソース
0

2つの違いは何ですか？

ユーザーにとって：それほどではありません。両方で素晴らしいアプリを構築できます。

開発者にとって：彼らは方法が異なる構文を使用しているため、どちらのソリューションもかなり急な学習曲線を持っています。Angularはずっと以前からあり、巨大なコミュニティを抱えているため、解決されていない問題を見つけるのは難しいでしょう。

建築家にとって：非常に異なります。Angularはあなたの人生のあらゆる側面に責任を持つアプリケーションフレームワークです。機能のようなコンポーネントが必要な場合に備えて、ディレクティブが垂直方向に統合されています。一方、Polymerは従量課金制に似ています。モーダル、確実なもの、インタラクティブウィジェットが必要、問題なく、ルート処理が必要です。Polymerは、Angularがディレクティブを再利用するためにAngularアプリを必要とするという点でも、より移植性があります。Polymerのアイデアはよりモジュール化されており、他のアプリ、Angularアプリでも機能します。

Polymerは、AngularJSが持っていない、またはしないという問題を解決しますか

Polymerは、新しいWebコンポーネント標準の利用に向けたアプローチです。カスタム要素、Shadow DOM、HTMLインポートなどの機能がローカルでサポートされている場合、それらを利用しないのは愚かです。現在、ほとんどのWebコンポーネント機能は広くサポートされていないため（現状）、Polymerはシムまたはブリッジとして機能します。ちょっとポリフィルのようです（実際にはポリフィルを使用しています）。

将来的に、PolymerをAngularJSと関連付ける計画はありますか？

AngularとPolymerを1年以上一緒に使用しています。これを行う決定の一部は、相互運用性が存在するというPolymerチームからの直接の約束に基づいていました。その考えはあきらめました。現在、Polymerのみの使用に移行しています。

もう一度やり直すためには、おそらくPolymerを使用するようにはせず、代わりにそれが成熟するのを待ちます。とはいえ、Polymerには長所（一部はかなり良い）と短所（一部はかなりイライラするもの）がありますが、それは別のスレッドに関する議論だと思います。

— ない
ソース
0

Angularjs ディレクティブカスタム要素を作成するためのアプローチです。カスタム属性を使用して新しいカスタムタグを定義できます。Polymerもこれを行うことができますが、それは興味深いより簡単な方法で行われます.Polymerは実際には単なるライブラリーのフレームワークではありませんが、（私のように）それに夢中になれる強力で驚くべきライブラリーです Polymerを使用すると、w3cによって作成されたネイティブのWebコンポーネントテクノロジーを学習できます。Webブラウザーは最終的にそれを実装します。webコンポーネントは将来のテクノロジーですが、Polymerを使用すると、そのテクノロジーを今すぐ使用できます。GooglePolymerは、ビルド用の構文糖とポリフィルを提供するライブラリです要素とWebコンポーネントを含むアプリケーション。ポリマーはフレームワークではなく、ライブラリだと言ったことを思い出してください。しかし、ポリマーを使用している場合、実際のフレームワークはDOMです。この投稿はangular js ver 1とポリマーに関するもので、私は両方とも私のプロジェクトであり、私はangularjsよりもポリマーを好みます。しかし、Angularバージョン2は、angularjs ver 1と比較すると完全に異なります。angular2のディレクティブには別の意味があります。

— behzad besharati
ソース
0

Angularディレクティブは概念的にはカスタム要素に似ていますが、WebコンポーネントAPIを使用せずに実装されます。Angularディレクティブはカスタム要素を構築する方法ですが、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.