The Dangers of Debouncing Meteor Subscriptions

Written by Pete Corey on Jan 19, 2015.

I’ve been working on a Meteor app with instant search functionality. When users to type data into an input box, the system updates a session value which kicks off a Meteor.subscribe.{
    'keyup #search': function(e) {

Meteor.autorun(function() {
    Meteor.subscribe('my-collection', Session.get('search'));

While this worked, triggering a new subscribe for every keypress put too much of an unneeded strain on the system. Typing the word “test” triggered 4 different subscriptions, and the first 3 sets of subscription results were thrown out in a fraction of a second. I needed to limit the rate at which I was triggering my new subscriptions and subsequent database queries. A great way to do that is with Lo-Dash’s debounce method.

Debounce Meteor.subscribe

My initial idea was to debounce the Meteor.subscribe function used within the Meteor.autorun callback. Since the session variables being tracked by the Tracker computation could be updated in other places in the app as well, I figured this would be a clean way to limit excessive subscriptions being made to the server.

I changed my code to look like this:

var debouncedSubscribe = _.debounce(Meteor.subscribe, 300);
Meteor.autorun(function() {
    debouncedSubscribe('my-collection', Session.get('search'));

This had a very interesting affect on my application. While changing the session variable did trigger a new subscription, and the call was being debounced as expected, I noticed that old subscription results were being kept around on the client. The collection was starting to balloon in size.

Down to Debugging

I fired up my trusty Chrome Dev Tools and started debugging within the subscribe method itself in livedata_connection.js. After comparing behavior with a normal subscription invocation and a debounced invocation, the problem made itself known on line 571.

When it was executed as a debounce callback, the Meteor.subscribe call was no longer part of a computation because it is executed asynchronously. was returning false within the context of the debounce callback. This means that the Tracker.onInvalidate and Tracker.afterFlush callbacks were never initiated within the subscribe call as they would have been if subscribe were called from directly within a computation. That caused the subscription to never “stop” and its subscription data stayed around forever. Effectively, I was piling up new subscriptions every time the search string changed.

Meteor.subscribe('my-collection', 't');
Meteor.subscribe('my-collection', 'te');
Meteor.subscribe('my-collection', 'tes');
Meteor.subscribe('my-collection', 'test');

The Solution

I spent some time trying to find a way to run an asynchronous callback under an existing computation, but I wasn’t able to find a good way to do this. Ultimately, my solution was to not debounce the Meteor.subscribe call, but to debounce the keyup event handler:{
    'keyup #search': _.debounce(function(e) {
    }, 300)

Meteor.autorun(function() {
    Meteor.subscribe('my-collection', Session.get('search'));

Custom Block Helpers and Meteor Composability

Written by Pete Corey on Jan 13, 2015.

I’ll admit it; working with AngularJS has left me with a certain sense of entitlement. I expect my front-end framework to be able to let me build distinct elements that can be composed together and placed within each other. After reading about Meteor’s templating system, I was under the impression that content could not be transcluded into a template. After all, where would it go?

{{> myTemplate}}

It wasn’t until I read through Spacebar’s documentation that I found out about the amazingly useful custom block helpers. Custom block helpers let us inject or transclude content (HTML, text, variable interpolations, other templates) into a template. Let’s check it out!

Using Custom Block Helpers

If you read through the Custom Block Helpers section of the Spacebar docs, you’ll notice that Template.contentBlock behaves almost exactly like AngularJS’ ng-transclude directive. It marks the place where content will be injected into the template’s markup. Let’s look at an example:

<template name="myTemplate">
    {{#if this}}
        {{> Template.contentBlock}}
        <h1>No content provided</h1>
            {{#if Template.elseBlock}}
                {{> Template.elseBlock}}
                <p>No elseBlock provided</p>

    {{#myTemplate title="My Title"}}
        <p>My custom content</p>
        <p>This is my else block</p>

There’s a lot going on in this example. Let’s break it down.

Check Your Context

The first thing I do in my template is check the truthiness of the template’s data context (this). If a truthy data context is passed into the template, I render one set of markup (which includes data from the context), otherwise, I render an alternate set of markup.

Inject Your Content

You’ll notice that I’m using Template.contentBlock in the first set of output and Template.elseBlock in the next. Interestingly, when you define a custom block helper, you can also define an “else” block to go along with it. In the second set of output I’m checking if Template.elseBlock is truthy. If it is, I render it, otherwise, I render some markup explaining that an else block was not provided.

Use Your Template

To actually use your new template and inject content into it, you no longer use the inclusion tag syntax. Instead, you reference your template using block tag syntax. You can see this at the bottom of the above example. Within your block tag you include your content to be injected and an optional else block. Note that any arguments you pass into your template becomes that template’s data context.

Final Thoughts

While the above example is completely contrived and mostly useless, I think it shows some really useful functionality. I feel like custom blocks are going to be a big game changer in my Meteor development workflow. There’s a great article over at Discover Meteor that touches on custom blocks with a more practical example. Check it out!

Zapier Named Variables - Scheduling Posts Part 2

Written by Pete Corey on Jan 5, 2015.

Last time, I talked about using Zapier to schedule Jekyll blog posts with Github Pages. I briefly touched on how I wished that Zapier had some kind of string manipulation functionality to help pull a schedule date out of the git commit message. Not long after the post went live, @zapier sent me a link that helped me accomplish exactly that.

Named Variables

Named variables in Zapier allow you to break apart your trigger data into multiple fields accessible from within your zap. In our case, named variables allow us to specify our Scheduled field anywhere within our git commit message and then use it when creating our Google Calendar event.

Integrating named variables into the scheduler zap was incredibly simple. First, push a git commit with the Scheduled variable somewhere within the commit message:

Scheduling this post for Monday, the 5th at 9 in the morning.

Scheduled(1/5/2015 9:00AM)

After the commit has been pushed to Github, I edited the scheduler zap and in step 5, changed the Start and End Date & Time fields from using Commit Message to using Commit Message Scheduled.

That’s it! Now, my git commit messages can contain useful information as well as scheduled dates which can easily be parsed out and used by Zapier.

I’ve shared an updated template of this zap. You can grab it here.