2014年11月7日金曜日

PolymerとAngularJS、Material DesignとPaper Elements、そしてAngular-Materialの関係の整理

PolymerとAngularJS、Material DesignとPaper Elements、そしてAngular-Materialの関係をざっくり整理してみたいと思う。


Polymer

Welcome - Polymer

PolymerはW3C標準のWeb Components(カスタムエレメント)を作るためのライブラリと言えるだろう。データバインディングの機能も持っている。

Data binding overview - Polymer


AngularJS

AngularJS — Superheroic JavaScript MVW Framework

AngularJSはWebアプリを作成するための汎用ライブラリと言えるだろう。Polymerのように、AngularJSにもデータバインディングとカスタムエレメント(ディレクティブ)を作る機能がある。


Material Design

Introduction - Material design - Google design guidelines

Material DesignはGoogleが提唱しているデザインガイドライン。色やアニメーション、スペーシングなどが事細かに決められている。

Metrics & keylines - Layout - Google design guidelines

これはむしろ、「デザインガイドライン」というより「デザイン規約」、もしくは「デザイン仕様」と言った方がいいかもしれない。


Papar Elements

Material Designを実装した(規約・仕様に準拠した)コンポーネント(カスタムエレメント)集と言えるだろう。

Material Designのサイト内で実際のコンポーネント例としてPaper Elementsが使われていることから、少なくとも現状ではMaterial Design ≒ Paper Elementsと考えて良さそうだ。

Buttons - Components - Google design guidelines

実際に動くPaper ElementsはPolymerのサイトにある。(PolymerによるPaper Elements実装)

Paper Elements Sampler


Angular-Material

material.angularjs.org

AngularJSによるPaper Elements実装と言えるだろう。PolymerによるPapar Elements実装よりも後発。


それぞれの関係性を図で表現してみる


PolymerとAngularJSは同一レイヤー。その上にMaterial Designというデザインコンセプトが乗っかっている。

Polymerにより実装されたPaper Elementsと、AngularJSモジュールのAngular-Materialにより実装されたPaper Elementsがある。

そのほか、Android SDKにもMaterialテーマがあることから、JavaによるPapar Elements実装もあると考えて良いだろう。

Getting Started | Android Developers

PolymerとAngularJSの違いについてはこちらが参考になる。

Here's the difference between Polymer and Angular - Binpress