PolymerDartについての現状認識
Moved to http://jablog.ntaoo.com/articles/2014/11/18/polymer-dart-current/
先日、Dart現状確認会でPolymerDartについて共有した。その補足説明をここに残す。
仕様
PolymerDartはPolymerJSの仕様に追随している。そのため、PolymerJSを学習し理解すれば少しの努力でPolymerDartを理解できる。
DartバージョンはDart向けに文法が整理されている。
一番目を引く違い。PolymerDartにおけるcustom tagは、それに対応するclassと@annotationを持つ。@CustomTagでelement nameを指定する。@publishedでcustom attributeを指定する。@observableでelement内部のdata binding対象を指定する。
その他の違いもDartの文法を知っていれば自然に対応できる印象。
Material Design
Paper ElementsとCore ElementsはPolymerDartにおいても使用できる。それぞれPub（というDartのPackage Manager）でインストールする。
これは基本的にはPaper ElementsとCore ElementsのJS版をdart:jsというライブラリを使用して呼び出している。
例外としてAjax処理が絡むelementはDartで書きなおされている。少なくともcore-ajax, core-xhr, core-listが対象。理由は未調査。それぞれのtagの名称に-dart suffixが追加されている。core-ajax-dart, core-xhr-dart, core-list-dart。core-listについては、infinite scrolling機能が内包されいるためだと思われる。
core-ajax-dartを試してみたが残念ながらうまく動かなかった。（勘違いかもしれない）そのためそこはJS版のtutorialとは異なる実装にした。
将来すべてDartで書きなおされるのかは不明。仕様と実装が安定したらそうするのでは。
そろそろPolymerの仕様は安定してきた…のか？
JSへのCompile
Polymer TutorialをDartにportしたものをpub build(dart2jsによるJSへのcompile)すると1.1MBまで膨らんだ。個人的にはここがつらい。うまくtree shakingできなかったのではないか。dart:mirrorを使うとdart2jsはまだ辛い印象。Issue ticketも結構残っている。インストール型でサイズが膨れてもそれほど気にしなくとも良いCordovaやChromeAppから入るのがいまのところ正解かと思う。もしくはmirrorを使わなければ最小で200KBくらいと許容できるサイズになる。
2015年にはChromeにDartVMが入るとして、AndroidのCordovaとChromeApp(とMobileChromeApp)はDartVMで実行できることが期待できるが、その他の環境ではJSへのcompileが必要なので、改善を期待。
PolymerDartの学習方法
学習はDartEditorで始めるといい。リアルタイムのwarningやbuildメニューなどIDEとしていろいろ支援してくれるため。 しかしぶっちゃけEditor単体としてはかなり使いにくい（ごめん）ため、個人的にはWebStormのDartサポートが安定したらそれに乗り換える予定。
PolymerDart Home.
まだissueが結構潜んでいるようで、サンプルコードに載っている範囲が安全地帯という感じもある。
PolymerDartもPolymerなので、PolymerJSを学習しておくとPolymerDartの理解が容易になる。
CoreElementsとPaperElementsのAPIはJS版と同じ（はず）なので、JS版のリファレンスを参照して開発できる。もしくはライブラリのソースのコメントを読む。
自分は、PolymerDartとPaperElements,CoreElementsを多少表示が崩れたり初期起動が遅くとも問題が少ないAdmin consoleに導入してみている。
次はDartのAppEngine ManagedVMについて書く。
