Warning: this post is old and might not reflect the current state of the art

First, a clarification: Meteor’s reactivity has nothing to do with React, the other very popular JavaScript framework.

Reactive programming

What is reactive programming, you say? Reactive programming is a programming paradigm.

Reactive programming is nothing new, nor something that Meteor introduced. But, what Meteor did was making reactive programming easy to use.

Actually, you’re most probably already using reactive programming without even knowing about it.

What is reactive programming

Reactive programming allows you to write code that automatically refreshes and re-calculates functions and values when something that you depend on changed.

For example, data in the database changed? You need to re-display it in the client.

That variable that counts the number of comments changed because you added a comment? Everything that depends on it, or shows it, must react to that change and re-compute the values.

That works by having Reactive Sources. The database for example is a reactive source. When something changes inside it, it notifies the JavaScript variables that depend on those changes. Those variables are invalidated and must be recalculated according to the new data available.

Reactive sources

Meteor has a list of things that are reactive, and those drive the entire application. Not everything is reactive, just those things listed here:

  • The data coming from the database is a reactive data source, because by subscribing to a publication you get a cursor, and that cursor is reactive. Any change to the collection represented by the cursor will trigger a recomputation of anything that uses it.

  • Talking about subscriptions, when a subscription is available on the client its .ready() method is called. That is a reactive data source.

  • Session variables are a reactive data source. When one changes a session variable by using .set(), everything that depends on those will be recalculate or re-rendered.

  • The user methods Meteor.user() and Meteor.userId() are a reactive data source.

  • Meteor.status(), which is a client-side method that returns the current client-server connection status, is a reactive data source.

  • Meteor.loggingIn(), which returns true if the user is currently doing a login, is a reactive data source.

Reactive computations

Whatever changes upon a reactive source change is a reactive computation. It’s some piece of code, a function, that needs to run again when a reactive source it depends on changes.

An example of reactive computation is the template helpers: every time a reactive data source that involves a template helper changes, the template re-renders it.

Defining your own reactive computations

You can define your own reactive computations, and react when something changes upstream, by using Tracker.autorun().

We’ll soon talk more in depth about it, in the meanwhile just know that this function

Tracker.autorun(function () {
  var currentPage = Session.get('currentPage');
  alert("The current page is " + currentPage);

Will trigger an alert whenever you call Session.set('currentPage', 'whatever'); without you needing to add callbacks or other observers.

Want to hire me?

I'm currently considering remote job/contract opportunities as a Frontend Developer.

Read more about me and if you're interested, get in touch.