JS

Polymer.importでWeb Componentsをlazy loadする

この記事はPolymer Advent Calendar 23日目の記事です。 前回の記事で紹介したvulcanize編では初期ロード時に必要なcomponentsを一つにまとめてしまおうというツールの紹介でした。 今回の記事は、同じくPolyermerのパフォーマンスアップのためのTips紹介ですが、少し話題は変わってWeb Componentsをlazy load(遅延ロード)する話です。 (more…)

JS

vulcanizeでPolymer Web Componentsの初期ロードを速くする

この記事はPolymer Advent Calendar 22日目の記事です。 まず、、Polymerのアドベントカレンダー全然人気ないw まさかの22日目にして初めの一稿です。 なぜでしょう?半年前に登場した時は結構注目を浴びていた気がしたのですが。。Web Componentsの思想は世界的にも支持されているとは思いますが、polyfillであるpolymerは時期尚早だったのでしょうか。 個人的な意見ですが、多分対応ブラウザの問題とか学習コストが地味に多いとかもありますが、やっぱりpolyfillの実装のせいで若干遅かったりコンポーネントのロードが遅かったり等パフォーマンスに関する不安がPolymerがいまいち世間で採用されていない理由の大きい要素なのかなと思います。実践投入を考えるとパフォーマンスは非常に重要ですからねぇ。 だた、もしパフォーマンスが改善されれば、そこそこ実践で使う方も増えてくるのではないでしょうか? ちなみに余談ですが、現在preview段階のv0.8.0ではpolymer自体のファイルサイズが87%減するらしいです。(不思議なくらいの激減w) 参考: Polymer v0.8.0 Preview 所感 http://havelog.ayumusato.com/develop/webcomponents/e635-polymer_080_preview.html さて、そんなこんなで今回はPolymerで作ったページの初期ロードパフォーマンスを劇的にアップすることができるvulcanizeというツールを紹介します。 (more…)

JS

自作Web Components公開までの道

今月のHTML5のイベントで喋る題材としてPolymerとWeb Componentsについてお話をしようかと思っているので、お遊びで作ってみました。 left-swipe-actionというiOSのリストで左へスワイプすると後ろにActionボタンが現れるあれみたいなやつです。 画面イメージ1 スクリーンショット 2014-08-07 12.10.16 画面イメージ2 スクリーンショット 2014-08-07 12.04.19 Demoページ http://tejitak.github.io/left-swipe-action/demo.html (注:Polymerがサポートしていないブラウザでは見れないため、Android標準のブラウザ等では見れないです) 以下、初めてWeb Componentsを作ってみるところから、bowerやgalleryサイトへの登録までの流れをざっと紹介します。 (more…)