AngularJSとPolymerの比較検討。この2つは、排他的な関係じゃなかった!

昨日、JUSO Cowerkingでwebcomponentsを使える「Polymer」(Google製Javascriptパッケージ)ついて教えてもらいました。
しかしながら、私はいくつかのJavascriptフレームワークの中でAngularJSを選んで実案件に投下済みで、今からPolymerに移行するのはちょっとコストが高い。でも、webcomponentsという技術は面白い。将来的に触れる余地を作りたい。
 
ということで、AngularJSとPolymerの関係性について調べてみました。

AngularJSってそもそも何だろう

AngularJSは、フロントエンド開発にMVCモデルを持ち込むことを目的として開発されたJavaScriptフレームワークです。
できることの特徴的なことに以下の3つを簡単に実装できることがあります。

・ データバインディング
データバインディングは、入力値をリアルタイムにviewに表示する機能。AngularJSのthe Basicのサンプル(右部)をさわるとすぐわかると思います。

・ フォームバリデーション
Formの入力値の真偽の常時監視です。ブログ「Can I do web?」のサンプルをさわってもらえればわかるかと。

・ ルーティング/テンプレート呼び出し
テンプレート呼び出しは、note.muみたいな感じ。非同期で、しゅっしゅと指定部分(指定のdiv)のテンプレートを切り替えていけます。他の部分の再読み込みがないので、画面遷移がスムーズでストレスが少なくていい感じ。で、ルーティング機能を使って、その呼び出しにテンプレートに対応してURLを書き換えます。
 
まぁ、ぶっちゃけ言いますと、JavaScriptフレームワークって書くコードの差こそあれどこの3つは大体実装していまして、よくAngularJSと比較されるBackbone.jsやknockout.jsも同様の機能は持っています。ここらへんの比較は、「angular・backbone・knockoutの比較/印象まとめ」が詳しいです。
 
 

Polymerって何だろう

じゃあ、Polymerって何だろうと考えると、あるサイトではJavaScriptフレームワークと書き、あるサイトではMaterialDesign導入パッケージといい。いまいちちゃんとした定義ってないんですよね。Polymerの公式サイトでも、webcomponentsの紹介しているし。
でも、そのどれもが間違いではないです。まず、PolymerもAngularJSと同様の機能は有しています。なので、初見JavaScriptフレームワークかなと思ってしまったり。けど、その本質的なところは、GoogleのJavascript最新技術導入ライブラリかなと。
そういう視点でみると、Polymerの特徴的な機能は、以下の3点に絞られます。
 
・ webcomponents機能
HTML5に入るかもしれない機能なので、厳密には、「webcomponentsに対応していないブラウザでもwebcomponentsを利用できるようにする変換機能」といった方が正しいですね。ここらへんは、「Polymer と Web Components の違い9選」が詳しいです。
 
・ MaterialDesign導入支援機能
MaterialDesign向けcssフレームワーク「Materialize」が出ていますが、それと同じような感じ。0からコーディングするなら「クリックしたら左から右にきらっと光るボタン」とか絶対作りたくないですが、それを簡単に作り出すことができます。
 
・ Googleサービスとの簡易連携機能
簡単にGoogle mapをはりつけることができますよー、とかそういう機能。
 

AngularJSとPolymerで書くコードの違い

AngularJSは機能をつける要素には、属性としてng-◯◯、と書きます。例えば、

<button ng-click="clickevent()"></button>

みたいな感じ。それに対して、Polymerはタグ自体を自分で決めちゃいます。xml的ですね。

<user-gravatar email="name@example.com"></user-gravatar>

 
あと開発思想的に、AngularJSは制御プログラム(Javascript)を別ファイルに書くことに対して、Polymerはフロントに書いてしまうっぽいです。おそらく、webcomponentsでカプセル化する時に都合がいいからなんでしょうね。以下で比較コードを紹介しておきます。(出典 Here’s the difference between Polymer and Angular

◯ AngularJS

app.directive('user-gravatar', ['md5', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      scope.gid = md5(attrs.email);
    },
    template: '<img src="https://gravatar.com/avatar/{{gid}}" />'
  };
}]);

 
◯ Polymer

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

 

AngularJSとPolymerは両方使うことができるのか

結論からいうと、出来ます。
ただ、Polymerからどの機能を呼び出すか(使いたい機能のライブラリはどれか)を決めて、AngularJSベースで開発した方がよさそう。例えば、webcomponentsだけを使いたいならば、https://github.com/webcomponents/webcomponentsjsを呼び出した方が賢明な感じ。
「Polymer (WebComponents) と AngularJS の組み合わせ」では、Polymerベース開発の試行錯誤をしていますが、ちょっとつらい感じがします。
 
ちなみに、materialdesignを使いたいならば、AngularJS用にもライブラリ用意されていますので、Angular Materialを使うべきですね。
 
ですので、「AngularJSとBackbonejs」は排他的関係として、「どちらを選ぶか」という問題が起きるのですが、「AngularJSとPolymer」は同類の機能こそあるものの、Polymerをライブラリ利用で留めることによって十分に協業ができます。よかった!
 
それでは、また。

お問い合わせ