JavaScript
Article

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

By David Turnbull

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:

  1. The vast majority of Meteor applications will use routing in some way.
  2. 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.

More:
Comments
damiankossek

Could someone explain me to which purposes the JavaScript Server Side frameworks can be used? It seems to I slept something because there are more and more articles about js serverside frameworks and I dont know when I should use these frameworks wink Please give me the 'real' example when these frameworks should be used. On a daily basis I'm using the PHP on the serverside. This is the alternative to the PHP frameworks (but I don't think so)? Thanks! smile

kunatum

Thanks for sharing! More lists like this would be very much appreciated by me smile

Collection2 seems very interesting!
Meteor is my favourite way of making websites! Fun, logical, fast and gives a great result!

One of my favourite packages is the Semantic-UI package. Even though you most likely would not want that for every project, it is pretty cool!

MatsSvensson

Visiting these guys site https://www.meteor.com/ with javascript turned off, just gives you a completely blank page.

Nothing!

In 2015!

That pretty much tells you all you need to know, about whether you should use it or not.

Paul_Wilkins

Well admittedly, Meteor is a platform built on top of JavaScript, so there are certain expectations involved.

mawburn

Yes. But I'd say it operates in the same space as Ruby, Python, Java, Scala, etc. Not really PHP. It requires a VM, some CLI, and an active server. It's designed more for web apps.

There's your problem.

Pullo

I just disabled HTML in my browser and the internet didn't work.
Fail!

Paul_Wilkins

A site that's capable of falling back to only HTML with no scripting can be an admirable achievement, but the lack thereof should not be used as a source of denigration.

I am curious about what others think on this. Should a JavaScript framework site be capable of working without JavaScript, and if so, why?

mawburn

We actually just had a big thread on this. It wasn't in the JavaScript forum though.

tl;dr

Disabling JS is dumb. But simple sites like blogs should at least have progressive enhancement. Web Apps are fair game.

Which is also my opinion, so that may not be unbiased. smile But nobody really presented anything to the contrary that wasn't based in misunderstanding.

AngC

But what if your audience is "dumb?" ...and disabled JS? I guess you just dismiss them as ignorant?

MatsSvensson

Never mind.

Clearly I was the one who broke the site, by using view-source and thereby moving all the content on all the pages into the head-tag, leaving the body completely empty.

Im sure all search-spiders and html-validators has already been upgraded to handle the Observer effect In modern quantum webdesign.

Pullo

@AngC, I'm curious. Could you please summarize the reasons that you have JavaScript disabled in as few words as possible? I re-read the other thread, but it is somewhat convoluted.

mawburn

Then they probably don't what JavaScript is.

I dismiss those who disable it as being less than 1% of the internet and not worth my time.

Idk why we have to beat this dead horse again. I've already said this in as many ways as possible. I don't even know why we are having this conversation on a forum built entirely in JavaScript. Anyone who's reading this on the other side of the coin is unfortunately a hypocrite.

richard_tribes

Does meteorhacks:npm still required to use npm package ?
When creating a package i succeed to load npm package using :

Npm.depends(
  {
    "iconv-lite": "0.4.6",
    "request": "2.51.0"
  }
)

So i'm not sure when i have to use meteorhacks:npm

AngC

Sure. In as few words as possible (not meaning to sound shitty) but it's my computer; I bought it; I paid for it; I want the choice of who/what does whatever to it.

AngC

No need to beat any dead horses. I was just proffering my opinion (as a consumer.)

I understand that you have to make a decision to dump some consumers in the pursuit of design efficiency. My opinion is that you're not too smart by doing so, based on your slavish adoration of JS. I speculate that most business web-sites exist either to sell a product or to provide information about a product. I feel that I am a pretty good target audience, because I buy everything on the internet... the only exceptions are fuel type products and groceries. And if somebody had a website where I could click for a refill, I'd have them out here filling our vehicles with fuels.

I may be kinda' senile, but I'm a shopper, and so is my husband. To my dismay, he recently discovered he could buy firearms on the internet and have them delivered. We spend a fair chunk of change online; why would you dismiss us so casually? In my opinion, your focus, Mawburn, is to dictate to your potential consumer. Wouldn't it make more sense to contemplate what your target audience might prefer????

fretburner

Mawburn's point is that users with JS disabled represent a tiny minority of customers. A similarly tiny minority will visit the site and decide not to buy for some other reason (perhaps the price was too high or the business in question doesn't delivery to Outer Mongolia), but it wouldn't be financially viable to make the changes necessary to please that small segment of users - the cost would outweigh the potential increase in sales.

Pullo

But isn't this like buying a car, removing the wheels (because you can), then being surprised that you can't drive it?

I'm not trying to get on your case, rather I'm genuinely interested in your motivation.
I know there are some folks around here that disable JS so that they don't have to suffer animated advertising (which they find cognitively debilitating) and there are some that disable JS to make it more difficult for their online activity to be tracked. This is fair enough.

However, in my opinion, three pillars of the modern web are HTML, CSS and JS. It is not reasonable to disable one of these and expect things to work flawlessly (after a point).

RyanReese

This isn't exactly the best example. Tires are a neccessary part to a car. Javascript isn't (shouldn't) be.

mawburn

Well, for web apps it is. Nobody likes to reload a page for every minor action anymore.

Pullo

For simple sites, then sure, it isn't hard to make sure that the experience without JavaScript is acceptable.

However, for anything more complicated (like this forum, for example), then I don't understand why one would disable JavaScript and be surprised that things don't work.

What is the thinking behind disabling JavaScript? That's what I want to understand.

mawburn

Misunderstanding of what it is. AngC's reasons from the last thread went from IE4/5 era ActiveX security issues, to confusing it with Java Applets, to not understanding that bad software can and is written in any language.

fretburner

:fearful:

mawburn

lol you quoted it. I removed it. smile For what it's worth, I also know some great people who work in that sector.

jcochran

Is there any fear about overwriting too much of the base meteor functionality with some packages?

Example: Collection2 - In the future, if the vanilla Meteor collections change, will this break your app? That might not be a big deal. But, if you are so heavily invested in using Collection 2, it might be painful to update/remove all of that code. Maybe the developers of Collection2 will address that. If you do continuous integration, you might not catch the problem until its been deployed to production.

BTW, I use pretty much everything mentioned except Collection2. I just haven't heard of it until now.

AngC

I can understand that, BUT...

I don't know the numbers, but I wonder whether Mawburn's initial numbers MAY have been flawed. He cited a figure of around 1%(???) which I also found on google, but the figure was from around 2010 (working on memory here.) I don't know; but in the US that's maybe a million people? (I'm just typing, not fact-checking.) I didn't even trot out any tired arguments (that I found on google) like wiping out a few more potential clients like disabled people. Oh, and then there's people like me that live about 50 miles from a major metropolitan area, but until 15 months ago had dial-up. (...I'm all over JS with that.) Thanks to the USF, I now have DSL. ...still don't have a cell-phone. All you get out here is Verizon-1 bar-have to go out by the barn to get that 1 bar.

I don't know development costs vice accommodating users. What I do understand is that customers pay the bills. And anyone that casually dismisses any of their potential clients isn't exercising good judgment. In my opinion.

AngC

I'll have you know I'm up-to-date and using IE11.

And yes indeedy, any moron can type "bad" mark-up. No misunderstanding on my end; you've chosen to misinterpret my comments to suit your agenda. By choosing to use IE11 (which the Safari or Chrome or etc., people might disagree with) I chose a product with which I'm comfortable and that I trust, for the most part. When somebody writes bad stuff and stuffs it in my web browser, I've lost all control.

I realize that these forums are aimed at developers, but I really don't understand why you would arbitrarily dismiss my opinion without at least giving it some thought. ...especially when I read multiple mentions from "developer" types that they turn JS off because "flashy" things and ads annoy them. Well, golly gee; here's a thought, maybe that stuff annoys your potential clients too?

AngC

I will and do. And if the design irritates me, I leave; there's ten billion more hits on the search engine selling the same darn thing.

chiefalchemist

I like walking with my shirt off. There are plenty of places I can go with my shirt off. But if I want to eat then I need to put a shirt on. Else, I don't eat.

Yes, it's reasonable to consider JS off. But it's at least as reasonable, if not more so, that those with JS off accept the responsibility that comes with that decision. No one is forcing them to put a shirt on. That said, if they want to eat it makes sense they can be expected to put a shirt on in order to do so.

Also, if they understand they are a self-inflicted fringe case then perhaps they're not a good customer fit anyway. After all, what business wants to deal with someone who is intentionally unreasonable, and is in denial of being so?

MatsSvensson

Are you sure you didn't just click "view source"?

AngC

I think it's best if I keep my shirt/blouse on. ...don't want to gross out anyone.
It seems like this is one of those topics where we should agree to disagree. The web designers appear to agree that users should behave as they deem appropriate. And those fringe elements who disagree are expendable.

oh, did I mention? I've been running with JS and DOM storage disabled since this topic started and successfully managed to spend several hundred dollars, plus conduct banking, etc.

No one can force any customer to do anything. That was my point.

crp_underground

Nice post! Meteor is useful to build stuff quickly! smile
There is a website, which calls DevFreeCasts, and there are a lot of free Meteor screencasts to watch there, take a look: http://devfreecasts.org/meteor

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in JavaScript, once a week, for free.