Meteorの標準テンプレートエンジンの拡張Blaze Plusの紹介

Meteor 1.2からReactとAngularのサポートが追加されましたが、標準のビューであるBlazeも根強い人気を持っています。機能面で見るとReactやAngularに見劣りする点もあるかもしれませんが、Blazeにも期待したいです。

Meteorを以前から使っている人はBlazeを好む開発者が多いようで、いろいろな拡張が提案されています。その中の一つであるBlaze Plusを紹介します。原文はこちらです。

次世代BlazeテンプレートのBlaze Plusを紹介

BlazeはMeteorの中でもすばらしい機能の一つです。最近ではReactなど他のフレームワークの支持が増え始めていますが、これはBlazeの終了を意味するのでしょうか。

その質問には答えられませんが、Blazeでアプリを書いたことのある多くの開発者は今後もBlazeを使い続けようとしています。一つのいい例は、Telescopeです。

しかしBlazeはアップグレードする必要があります

最近のアプリ開発方法は変わりました。Reactはデータをトップダウンに流すテクニックを導入し、Fluxアーキテクチャを導入しました。

KadiraではReactのデータ受け渡し概念を気に入っています。一つのルートコンポーネントがデータの計算して必要な子コンポーネントに渡すことができるのです。

どのようなデータ変更があっても、データセット全体が最下層のコンポーネントまで渡され、それぞれが必要に応じて更新します。

このやり方はReactでは効率的です。なぜなら、バーチャルDOMがあるからです。しかし、Blazeではこれは非効率的です。なぜなら、データが変更されるたびにテンプレート全体が再描画されるからです。

Blaze Plusの導入

この問題を解決するために、Blaze Plusを作りました。Blaze Plusは、Blazeにpropsとステート管理機能を追加します。これにより、データを下層のコンポーネントまでテンプレートの再描画なしで渡すことができます。

Blaze Plusのコードを見てみましょう。

<!-- This is our templates -->
<body>
  {{> App}}
  </body>
<template name="App">
  <!-- This is the starting point of the Magic functionality -->
  {{>$ template="Welcome" user=prop$getUser}}
</template>
<template name="Welcome">
  <span>Hello, </span> {{getName}}
</template>

// This is place we get data in the top of the tree
Template.App.helpers({
  getUser: function() {
    var name = Session.get("name") || "Arunoda";
    return {name: name};
  }
});
// This is how we get data
Template.Welcome.helpers({
  getName: function() {
    // getting props via Template instance
    var props = Template.instance().props;
    return props.user().name;
  }
});

このビデオでBlaze Plusの力を見てください。

より詳細はGitHubを見てください。

これは使えますか

このコンセプトを気に入っています。同じテクニックをFlow Componentsでしばらく使ってきました。そこで、これを他のすべてのBlazeアプリで使えるようにしたくなりました。いつかコアにマージされるとよいです。

つまり、今からこれを使うことができます。もし問題があったら、喜んで直すでしょう。

なぜこれを作ったのですか

このようなものを発表する予定はありませんでした。しかし、Flow Routerにはデータコンテキストが欠けているという問題があったのです。データコンテキストはパフォーマンスのために外しました。

しかし、データをルーターレベルで設定するのはいい考えです。subscribeしたデータの話ではなく、ルートパラメータのようなデータの話です。

Blaze Plusではこの問題が解決できるのです。

FlowRouterとBlazeLayoutを使ったアプリでBlaze Plusがどう使えるかのサンプルがここにあるので見てください。

Blaze Plusを自分のアプリで使ってみて感想をシェアしてください。

感想

BlazeはMeteorの哲学が詰まっていてとても心地がよいものです。ぜひ拡張を続けて、入門以外でもちゃんと使えると思われるようになってほしいものです。現状はコアチームはあまり力を入れていないようなので、コミュニティでがんばりましょう。

今回の記事では取り上げませんでしたが、template-varというアイデアもあるようです。好みの問題かもしれませんが、個人的にはこっちのが気になります。

Menu

Meteor Fan (日本語情報)

JavaScriptフレームワークMeteorに関していろいろ紹介する日本語情報サイト