Category Archives: JS

bower registerで公開したライブラリを更新した場合に必要な作業

少し前の話ですが、自分の作ったライブラリ(Polymerで作ったWeb Components)をbower registerしてbowerでinstallできるように公開していたのですが、ベースとなるPolymerのバージョンアップに対応して変更をmasterにpushしてOKだと思ってたら、git cloneすると動くのにbower installするとうっかり動かなくなっていました。

Continue reading bower registerで公開したライブラリを更新した場合に必要な作業

io.jsのajax非同期通信をsuperagentとPromiseを使って処理する

node.jsでお手軽にDeferredが使えないという事実を最近知りました。

もちろん外部ライブラリを使えばできますし、一応node.jsのv0.12では–harmonyオプションをつければ使用できるらしいのです。
でも、io.jsだとPromiseが使えるみたいなので早速試してみました。

Continue reading io.jsのajax非同期通信をsuperagentとPromiseを使って処理する

Polymer.importでWeb Componentsをlazy loadする

この記事はPolymer Advent Calendar 23日目の記事です。

前回の記事で紹介したvulcanize編では初期ロード時に必要なcomponentsを一つにまとめてしまおうというツールの紹介でした。

今回の記事は、同じくPolyermerのパフォーマンスアップのためのTips紹介ですが、少し話題は変わってWeb Componentsをlazy load(遅延ロード)する話です。

Continue reading Polymer.importでWeb Componentsをlazy loadする

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というツールを紹介します。

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

Vue.jsでpopup componentを作ってみる

この記事はVue.js Advent Calendar 22日目の記事です。

前回の記事「browserify + debowerify + vueifyを使ったvue.js component開発」の続きです。
今回は少し実用的なwidgetのようなものとしてpopupのcomponentを作る方法を紹介します。
(※Vue.jsのバージョンはv0.11.4です)

とりあえず、どんなものかはデモを見てもらうとわかり易いです。ボタンをクリックしてみてください。

Continue reading Vue.jsでpopup componentを作ってみる

テンプレートライブラリJsRender使ってみた

Backboneはunderscoreというテンプレート機能を持ちます。
AngularJSやvue.jsは元々オートバインディングのテンプレート機能があります。

さて、jQueryを使った時に変数等をテンプレートにマップさせたい場合はどうしましょう??

今回はjQueryで使えるテンプレートエンジンJsRenderを紹介します。

Continue reading テンプレートライブラリJsRender使ってみた