PolymerでCustom Elementsは簡単に作れるのか #JavaScript

エモい話はブログに書きました
http://nekova.hatenablog.com/entry/2014/07/05/211303

簡単に作るために必要なこと

自分で一から作るより、generatorに作らせた方が早いし便利

npm install -g generator-element
yo element:repo

[?] What do you want to use?
- Polymer
[?] What's the GitHub repository?
- your-repo
- 小さなコンポーネントだと your-repo と your-element は同じになることが多い
[?] What's your GitHub username?
- username
[?] What's the name of your element?
- your-element
[?] How would you describe the element?
- Descriptionは書かないとIssue投げられて「書け」って怒られるから書いた方がいい
[?] Do you want to include lifecycle callbacks?
- どっちでもいい。後で説明
[?] Do you want to include some useful Grunt tasks?
- 絶対にYes。後で説明

lifecycle

っていうのは、pylemer-element内の

Polymer('your-element', {
            created: function() {},
            domReady: function() {},
            ready: function() {},
            attached: function() {},
            detached: function() {},
            attributeChanged: function(attr, oldVal, newVal) {}
        });

こういうcallbackのscaffoldが必要かどうか。
僕はいらないから作ってない。

Grunt

ないと困る

$ grunt build
//内部的にはsrc/your-element.htmlやcssをコピーした後、bower_componentのpathを変更してるだけ
//大抵src/your-elemnt.htmlに変更を加えた後、pushする直前に実行する。ないと困る。

$ grunt server
//index.htmlをブラウザで開いてくれる。便利。ないと困る。

$ grunt deploy
//pushした後にデモページをgh-pagesにpushする時に使う。デモページはないと困る。

ちなみに<hatebu-button>とか<markdown-awesome>とか作った。
https://github.com/nekova?tab=repositories

簡単じゃなかった、という知見の共有

実戦投入するつもりでCustom Elementsを作って欲しい。作った人すらproductionでゴリゴリは使ってないっぽくて、単純なところで普通に動かなくて困る。
https://github.com/zenorocha/twitter-button/pull/11

よく分かんない所で躓いたらそのコンポーネントorライブラリのissueを遡る必要があったりする。(Web Components特有の問題があったりなかったり)
https://github.com/chjj/marked/issues/283

コンポーネント用にパッチを当てる必要があった
（さきのissueは化石になってる。当時のregexは問題あったけど、今のregexは問題ないっぽい。情報が錯綜してる。そういうの調べるのも面倒）
https://github.com/nekova/marked

まだ若い。出来ないこともあるから諦めたり、ベタ書きでなんとかする
http://stackoverflow.com/questions/22076302/how-do-you-scope-polymer-imports-stylesheets-which-are-dynamically-injected-int

PolymerチームはわりとStack overflowをwatchしてるみたいだから、調べても出てこないならどんどん質問したりMailing listに投げて見るのも良い。
https://groups.google.com/forum/#!forum/polymer-dev

早い時期からPolymerを触ったり、記事書いたり、Stack overflowに質問投げてる人はDartとかにも触ってたりする（僕もそう）。
Polymer.jsにおいても重要なことが、Polymer.dartの記事のコメント欄に書かれてたりするから、Dartやったことないからって完全に無視するのはどうかと思う。

さっきのgeneratorを使ってGitHubにpushすると、http://customelements.io/ っていうところに自動で登録される。
困った時にそこのコードを見るとわりと便利。でも一番良いのはPolymerチームのリポジトリを見る方のが良い。 https://github.com/polymer
120個くらいrepoがあって、しかもPolymerに精通してる人が書いてるからめっちゃ参考になる。

<shadow></shadow>とか <content></content>とか振る舞いが難しい。
最初はWeb Components特有のShadow Domとかに悩まされると思うけど、最悪ベタ書きで良いと思う。
<twitter-button>とかも、普通に<a>のベタ書きの方が良いと思う。そういう諦めも大事。（僕は意地でもforkして使ってる）

僕からは以上。

追記

大変だけどそれでも全力で投資したいと思ってます。
http://nekova.hatenablog.com/entry/2014/07/05/211303