6 Must-Use Meteor Packages for (Almost) Every Project

January 29, 2015

There are already thousands of packages for the Meteor JavaScript framework, so no matter what feature you want to add to your web application, someone’s probably gone ahead and made a package that slickly implements that precise ideas. Convenient, right?

But of course, with more choice comes the paradox of choice. It can be overwhelming to figure out which packages might come in handy.

Here’s a run-down of what I consider to be the few most helpful:

1. Iron Router

A question I’ve received a few times from beginning developers is, “How do I create a multi-page application with Meteor?”

Because, when someone’s never built a web application before, it’s not immediately intuitive that creating a new page isn’t as simple as creating a new file. What I introduce them to, then, is the wide world of routing.

Routing allows developers to make muti-page applications with less code and a flexible project structure. They have many other advantages, most of which become apparent as you build bigger and more complicated applications, but for the moment, there’s two main points to understand:

The vast majority of Meteor applications will use routing in some way.
To handle this routing, the Iron Router package is the best option.

Iron Router is everything — friendly, deep, and well-supported — and you can add it to a project with the following command:

meteor add iron:router

Once installed, create a route inside a JavaScript file:

this.route('about');

Then create a template of the same name:

<template name="about">
    <h1>About</h1>
</template>

You’ll now be able to visit the http://localhost:3000/about path and see the “about” template.

This, however, is a very simple example of routing. For a deeper introduction, watch this video I made for Learnable.

2. Collection2

Most Meteor applications will interact with a database in some way. By default though, you’ll have to manually validate the data that users are inserting, editing, and removing from the database.

Collection2 helps with this process by extending Meteor’s functionality, allowing it to “provide support for specifying a schema and then validating against that schema when inserting and updating.” For example, you can make it so a “Books” collection has a title field that must be a string, and a lastCheckedOut field that must be a date.

Here’s an example schema:

var Schemas = {};

Schemas.Book = new SimpleSchema({
    title: {
        type: String,
        label: "Title",
        max: 200
    },
    author: {
        type: String,
        label: "Author"
    },
    copies: {
        type: Number,
        label: "Number of copies",
        min: 0
    },
    lastCheckedOut: {
        type: Date,
        label: "Last date this book was checked out",
        optional: true
    },
    summary: {
        type: String,
        label: "Brief summary",
        optional: true,
        max: 1000
    }
});

To add this package to a project, write the following command:

meteor add aldeed:collection2

But to see the full scope of Collection2’s power, make sure to read the official documentation.

3. Kadira

Performance isn’t a sexy part of building web apps, but it’s nevertheless important to think about. You can have the most incredible set of features in the world but, if users are forced to sit and wait around at every turn, you’re really going to test their patience.

To deal with this problem, Kadira. It’s a performance monitoring tool, similar to New Relic. You register for an online account, add the package to a Meteor project, and then, from a web-based interface, you’ll gain insight into the various performance bottlenecks and other things to consider.

You can add Kadira to your project with the following command:

meteor add meteorhacks:kadira

If you have no idea where to start when it comes to performance montioring, I’d suggest checking out Bulletproof Meteor — an interactive course, designed by the creators of Kadira, that dives deep into this precise topic.

4. Spinner

Even with all of the performance tweaks in the world, some things will simply take some time to load, and to make this loading process seem less broken, we can use the Spinner package. This package can quickly add one of those classic, spinning loading symbols to an application.

To add Spinner to your project, use this command:

meteor add sacha:spin

Then use a “spinner” template whenever it needs to be used:

{{> spinner}}

You can also configure it with a number of options:

Meteor.Spinner.options = {
    lines: 13, // The number of lines to draw
    length: 10, // The length of each line
    width: 5, // The line thickness
    radius: 15, // The radius of the inner circle
    corners: 0.7, // Corner roundness (0..1)
    rotate: 0, // The rotation offset
    direction: 1, // 1: clockwise, -1: counterclockwise
    color: '#fff', // #rgb or #rrggbb
    speed: 1, // Rounds per second
    trail: 60, // Afterglow percentage
    shadow: true, // Whether to render a shadow
    hwaccel: false, // Whether to use hardware acceleration
    className: 'spinner', // The CSS class to assign to the spinner
    zIndex: 2e9, // The z-index (defaults to 2000000000)
    top: 'auto', // Top position relative to parent in px
    left: 'auto' // Left position relative to parent in px
};

The easiest way to use the Spinner package though is to integrate it with the Iron Router package.

5. Moment

Moment.js makes it easy to parse, validate, manipulate, and display dates in JavaScript, and installing the Moment package for Meteor is the quickest way to get started.

To install the package, use the following command:

meteor add mrt:moment

How you use Moment, of course, will depend on what you’re working on, and what makes it so incredible is how flexible it is. Most applications will make use of time and dates in some fashion and, whenever that’s the case, Moment will feel like a heavenly blessing. I’d suggest checking out the documentation for the full scope of what it can do.

6. NPM

Meteor is built on top of Node, and Node itself has countless packages available through NPM. To use these packages, the simplest method is to install the NPM package:

meteor add meteorhacks:npm

A packages.json file will be created within your project’s directory, and this is where you can define what packages you’d like to use in your project:

{
  "redis": "0.8.2",
  "github": "0.1.8"
}

Then a npmRequire function can be used to harness the functionality of that package:

var Github = Meteor.npmRequire('github');

You’ll need to use this code on the server only (it won’t work on the client), and if you come across a problem, it’s probably something to do with the asyncronous nature of most NPM packages, but this is nevertheless a quick and easy way to get even more “free” functionality for your creations.

Conclusion

Admittedly, it’s a little disingenuous to say that a small handful of Meteor packages are the “best” since, in reality, the value of a package is determined by its appropriateness in a certain situation. Even so, these options are some of the most widely appropriate packages available, and if you haven’t checked any of them out, then I’d suggest you do exactly that.

JavaScript: Novice to Ninja, 2nd Edition