Building Reactive Lists with Meteor and Blaze

Hey there! If you're diving into building real-time apps, you know how crucial it is to keep your UI up-to-date. At Quave, we're big fans of Meteor JS and its ecosystem to make this happen.

One of available tools is Blaze JS, which gives you a great platform for creating real-time apps. While Blaze isn't recommended for new projects (the Meteor team now focuses on React and Vue.js), you'll likely encounter it in legacy codebases.

Today, I'm gonna walk you through how to build a reliable and reactive list using Blaze's #let directive. Trust me, this will save you from some async nightmares when working with existing Blaze applications!

The Problem with Lists

Lists are everywhere in apps — user lists, task lists, etc. Keeping them updated in real-time when data changes can be tricky sometimes. You might be tempted to use a ReactiveVar to manage your list's state, and that's not a bad idea. But Blaze's #let directive can make your life way easier by simplifying how you handle reactive data sources. Let's see how it works.

Reactive List with #let

Imagine you've got a list of users you want to display, and it needs to update instantly when a new user is added or one gets updated. Instead of using ReactiveVar or dealing with async and sync operations, Blaze's #let lets you declaratively bind a reactive data source to a variable in your template.

To achieve that, you need to set up a helper in your JavaScript to fetch the data reactively. For our user list, we'll use Meteor's Users collection and sort it by creation date:

Template.myTemplate.helpers({
  myList() {
    return Users.find({}, { sort: { createdAt: -1 } }).fetch();
  }
});

This helper gets all users from the Users collection, sorted by the most recent first. The fetch() method ensures we get an array of documents that Blaze can work with.

Now, in your Blaze template, you use the #let directive to bind this helper to a variable called list. Then, you can iterate over it or check its length to display the right UI:

<template name="myTemplate">
  {{#let list=myList}}
    {{#if list.length}}
      <ul>
        {{#each user in list}}
          <li>{{user.name}}</li>
        {{/each}}
      </ul>
    {{else}}
      <p>No users found.</p>
    {{/if}}
  {{/let}}
</template>

Here's what's cool about this setup:

• Since myList is backed by a Meteor find query, it's reactive. If a new user is added to the Users collection, the list updates automatically, and Blaze re-renders the UI.
• The #let directive lets you assign the helper's result to a variable (list) that you can use throughout the template. It keeps your code readable and avoids messy nested helper calls.
• By using list.length, you can easily toggle between showing the list or a "No users found" message, avoiding using a helper to do so.

Should I use #let or ReactiveVar?

The choice between #let with reactive helpers and ReactiveVar often comes down to your specific use case: #let excels for straightforward data binding from collections, while ReactiveVar shines when you need to manage derived state or implement custom reactive logic that doesn't directly map to a database query.

Wrapping Up

Building reactive lists doesn't have to be a nightmare, specially on legay code bases. With Meteor and Blaze's #let directive, you can create real-time UIs with minimal code.

Got questions or want to share your own Meteor tips? Drop a comment below, and let's keep the conversation going!