Backbone.js でアプリケーションを作る場合、ついつい手軽さを求めてUnderscore.js の template()を使うことが多いのですが、少し凝った造りのページを作る場合、より専門的なテンプレートエンジンを使いたくなります。 そこで今回は、最近マイブームのHandlebars.jsを Backbone と組み合わせて使ってみました。 このエントリでお伝えしたいこと。 Backbone.js with Handlebars.js!! ここでもやっぱり Grunt 最高 Handlebars.js とは 詳細は Google 先生の方が詳しいです（ごめんなさい）。 数あるクライアントサイドのテンプレートエンジンの 1 つです。個人的にはプリコンパイルすることでパフォーマンス的に優位なところを注目しています。 [jsperf]Precompiled Templates 最近話題の

ブログサービスのHTTPS化を支えたAWSで作るピタゴラスイッチ / The construction of large scale TLS certificates management system with AWS

主にHTMLの生成を行うGruntタスクの話。色々なテンプレート・システムの利用を考えたんだけど、Handlebars.jsにした。よく使うからというのもあるし、いざとなったらデータの再構成を待たずにその場しのぎでテンプレートにロジックを混ぜてお茶を濁せるのが好き。その場しのぎ、お茶を濁す、良い言葉だ。 このGruntタスクは指定されたHandlebars.jsテンプレート(例えばfoo.hbs)をレンダリングするだけのもの。レンダリングに使うデータは、基本のメタデータ(metadata.jsonの内容)とテンプレート・ファイルごとに指定できるメタデータ(foo.jsonの内容)をGruntに含まれるLo-Dashのextend()を使ってマージしたものを使う。Gistのサンプルにあるように基本のメタデータにないものを自由に追加できるし、基本のメタデータを上書きすることも出来る。 コアのg

便利ですよね、Handlebars。 でも日本語の記事が案外なかったり、公式のドキュメントがいまいちアレだったりするので、自分用にまとめます。 それがどこかで誰かの役に立てば、それはそれで幸いです。 基本的な使い方 インストールとかは割愛。 だって読み込むだけやし・・・。 で、そこからは テンプレート・ひな形となるHTMLを用意 そのHTMLをHandlebarsに食わせる 動的にはめ込む値をつっこむ 基本的にはこの3ステップです。 Html <!-- 略 --> <script id="input" type="text/x-handlebars-template"> <section class="inner"> <h1 class="header">{{title}}</h1> <div class="box"> <img src="{{img.url}}" alt="{{img.a

期せずして久々の更新になってしまった。ブログを書く気がなくなったとかそういうのではなくてただ単に忙しかっただけ。その間、まぁ仕事が予期せぬ方向から炎上してみたり、事故をもらって愛車が全損したり（フロントガラスが全面熱線入りなんていう変なオプションなどを諸々付けていたからお気に入りだったのに）と決して良いことばかりで忙しかったわけではないけどね！ で、今回は node.js のお話。異様な盛り上がりを見せているものの、じゃぁそれっていったい何かというと「JavaScriptを用いたNon-blocking I/O環境」という非常にシンプルなものだ。 その根底には「うまくスケールできること」と「動作が速いこと」という理念が見受けられる。 まず「うまくスケールできること（多量のアクセスを捌けること）」を解決するにあたり、まずはスレッドモデルか、イベントループかという問題があった。そこで auth

昨日に引き続き、いざ！part2なのだ。 前回では node.js と v8 の結びつきまでを書いたので、今日は Non-Blocking I/O の話を。 Non-Blocking I/O という言葉からブロックしない I/O をイメージするのはたやすい。でもこれを実現しようとなるといろいろとまあ面倒くさいんだよね。 それを解決する常套手段で言うとファイルディスクリプタ（ネットワークならソケットだね）を開いてそれをselectシステムコールの監視対象に加えておき、selectを呼び出すことで監視するっていう方法がある。こうすると何が嬉しいのかファイルディスクリプタが２つある場合で考えてみよう。 まずAとBというファイルディスクリプタを監視対象とする。 selectシステムコールを呼び出し、そのどちらかが読み出し準備完了となっていないかを確認する。 もしどっちも準備できていなかったらプロセ

今日はnode.jsで採用しているCommonJSの話である。 CommonJSの説明だけだとあっという間に終わってしまうのでJavaScriptの歴史を混ぜ込んだら期せずして長くなってしまった。 さて、1995年に発表されたJavaScriptは開発当初「Mocha」と呼ばれ、次に「LiveScript」となり（実際Netscape Navigatorの2.0のアルファ版ではではこの名前だった）、最後にようやくJavaScriptになる(Navigatorの2.0B3から)という変遷をたどった。このJavaScriptという名前っていうのはJavaというコンパイル言語を補完するスクリプト言語にしたいという考えがあったからという話もあるんだけど、そのころ開発元のNetscapeはSunとの業務提携を発表しており、ちょうどそのころJavaが世に出てNetscapeブラウザ上でクールなJava

さて、前回まで基礎部分をいろいろと説明したので今回からは実装について。現在のソースやその成り立ちを説明するのもいいんだろうけど、今日からはちょっぴりハンズオン形式に趣向を変えてみよう。ってことで node.js を作っていくよ！ 実装編その一はJSエンジンであるV8にJavaScriptのソースを食わせて実行する、つまりはオレオレJS環境を作るまでを扱うのだ。 V8はもともと他のソフトウェアに組み込まれて使用されることを想定（例えばChromeとかね）されているのでこういう作業が必要になる。 手順は大きくわけて二つ 1. まずはV8のソースを落としてきてV8のビルド 2. V8のソースディレクトリに自作のC++のソースを作ってコンパイル＆実行 C++が出てきた時点で引いちゃったかもしれないけど、C++を使えるようになるのが今回の目的ではないのでまずはリラックス。C++っていったってそんなに

Javascriptはブラウザのクライアントサイドで動く唯一の言語と言ってもいいので、普段書かなくてもちょいちょい書くことになる。そんな時用に、他の言語使っていると忘れてしまうJavascriptの重要な法則をまとめておく。 基本的にリファレンスにしているのはMozilla Developer Network (MDN)のドキュメントの以下のページ。MDNはJavascript関連では一番ちゃんとしたドキュメントだと信じている。 Working with Objects - MDN 継承とプロトタイプチェーン - MDN this - MDN オブジェクトモデルの詳細 - MDN プロトタイプベース言語 Javascriptはプロトタイプベースのオブジェクト指向言語で、クラスベースのオブジェクト指向言語(例: C++, Java)とは異なる部分が多々ある。 例えば、クラスベース言語はクラス