Meteor JS

Blaze

new live templating engine

How Do Templates work?

<!-- in myapp.html -->
<template name="players">
  {{#each topScorers}}
    <div>{{name}}</div>
  {{/each}}
</template>

// in myapp.js
Template.players.topScorers = function () {
  return Users.find({score: {$gt: 100}}, {sort: {score: -1}});
};

highlights of Blaze

• Easy to use
• High performance
• Works well with others

...highilts

Easy to use:

"Like everything else in Meteor, we designed Blaze to be developer-friendly. You just write normal looking HTML templates and helpers. You don't have to declare any dependencies or write code to manage how the screen updates: it's all automatic."

...highlites

High performance:

"When your data changes, Blaze makes the smallest possible update to just the piece of the DOM that needs to change or move and batches those updates to minimize page reflows. Since most apps only update a few pieces of data at a time, this approach is more efficient than our older diffing solution."

...highlits

Works well with others:

"We figured out how to make a reactive template engine be compatible with jQuery plugins and other code that also manipulates the DOM -- even the same elements defined by your templates. For example, you might use Blaze to render a changing list of items, and then a traditional library to reorder the list or manage an extra CSS class on each item."

<div class="foo {{bar}}"

$('.foo').addClass(...)

Some difference between Spark and Blaze

<template name="hello">
  {{#if bold}}<b>{{/if}}
    Hello {{name}}!
  {{#if bold}}</b>{{/if}}
</template>

<template name="hello">
  {{#if bold}}
    <b>Hello {{name}}!</b>
  {{else}}
    Hello {{name}}!
  {{/if}}
</template>

Spark:

<input type="checkbox" {{#if isChecked}}checked{{/if}} />

Blaze:

<input type="checkbox" checked={{isChecked}} />

some other examples

UI.body is now a template corresponding to the entire BODY element.

You no longer need to create a top-level container template to define helpers and event handlers. Define them directly on UI.body. The API is the same as for any other template. For example:

UI.body.events({
  'click': function () {
    alert("clicked somewhere on the page");
  }
});