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

Meteor is an awesome web application platform.

Modern web applications can be extremely complicated to write. Especially for beginners, but this is not a framework that targets beginners. In fact, it’s an invaluable resource to both beginners and experts.

It makes it super easy to start, and makes larger projects manageable.

Why should you use it?

Meteor looks like an awesome tool. Let’s see some of the advantages of using it.

JavaScript

Love it or hate it, JavaScript is here to stay and it’s going to be the only language widely supported in the browser, so .. you’d better love it.

Meteor uses just one language. Isn’t it a dream? You can create a full application in just one single language. Couple this with MongoDB, which is a Database which stores JSON objects, and is query-able with Javascript, and you’re set. Meteor also ships with Minimongo in the frontend, which is a frontend database compatible with the MongoDB APIs, entirely written in JavaScript.

Why should using JavaScript being an advantage, you say? Well, once you master it, you’re a master of both the backend and both the frontend.

You can use helper functions both in the frontend and in the backend.

I didn’t say it: Meteor is written in Node.js. So, you can take advantage of the gazillion of Node.js modules (how is something we’ll cover later).

Ah, of course if you want you can use just the frontend, or just the backend.

Real-time

Meteor is known for its real-time features, but what exactly is real-time? Suppose you want to create a chat app. Meteor offers you features that are perfect for that.

Want to create an internal communication app? Perfect too. A project management app? Basically, any app in which users could be notified or things should be updated based on other users actions, or third part things such as API change the information displayed, the user viewing the app can be notified of those changes immediately, in a rather easy way compared to other solutions.

Feels fast

A thing named Latency Compensation offers you a trick that enables the interface to feel dead fast even if it still need to communicate with a remote server. And best of all, it’s free for you in terms of implementation, meaning it’s backed in Meteor and you don’t have to do anything to enable it.

Open Source

Of course Meteor is entirely Open Source.

It’s simple

Things seem very simple in Meteor, because they ARE simple. Complicated things lead to weird bugs or hard problems later. Meteor offers us a clean, beautiful API and functionality to build upon.

A great package system

The cool thing about Meteor is that since it can power both the frontend and the backend, and it’s deeply integrated with the database, things can be put in a single package, and work seamlessly for us on both sides. That’s why we can add full user management with a single line of code.

A great community

There’s an amazing community around Meteor, shipping packages, tutorials, books (like this one!) and pushing code every day. Do not miss it!

How modern web applications work

Modern Web Applications are composed of several parts but in general there’s a server and a client. The so called ‘thick client’ is an App that runs inside the Browser, written in JavaScript - the only language that Browsers can run.

It is served by the web server, another piece of the Web Application tier. The Web Server is another App, that can be written in JavaScript too, if using Node.js, or any other language or framework: the Server has more choice and you can use Ruby on Rails, PHP, Java, C#, Perl or anything else that your server can run.

Whatever of those tools you choose, the frontend is usually very decoupled from the backend, and sometimes different people work on them, agreeing on some common interface (the API) which one provides and the other consumes.

How Meteor can improve your life

Meteor gives you a Full-Stack platform, by providing both the client-side framework, and the server-side framework. What’s more, Meteor provides you even the communication channel between those. It’s called DDP, and we’ll talk about it later.

You no longer need to glue together different framework, languages, tooling and codebases. This is huge for the independent developer, small startups or even bigger organizations that don’t want to lose time and resources making things harder than they should be.

Meteor might not be the best fit for you

Static content websites have other better platforms to build upon. If you need to just output some HTML without a lot of interactivity, use those.

Meteor as of writing does not support SQL Databases, which can be a good thing in many cases, but they can be needed in other cases. Of course you can write your own procedures that use SQL Data.

Installation procedure

On OSX and Linux installing Meteor is as simple as typing this in the Operating System terminal:

curl https://install.meteor.com/ | sh

That’s it!

Windows has its own official installer, so check it out on the official site.

First steps

Let’s create the first Meteor app. It’s very simple.

Open the Operating System terminal, go into the directory where you’ll host the project and type

meteor create hello-world

Meteor will create the new app for you, in the hello-world directory.

Now go inside that directory and type

meteor

This will spin up the Meteor web server, and you’ll be able to reach your first Meteor app by pointing your browser at http://localhost:3000

First Meteor App

It was easy, right?

You cannot do much in this first app except clicking the button and increasing the counter. Not much to talk about. We’ll soon see how to do real stuff with Meteor.

Code walkthrough

We’ll walk around the app code just to see what’s inside. Do not worry if things are not much clear right now, many concepts will be introduced and explained later.

HTML file

If you open the hello-world/hello-world.html file you can see the source code of the app:

<head>
  <title>hello-world</title>
</head>

<body>
  <h1>Welcome to Meteor!</h1>

  {{> hello}}
</body>

<template name="hello">
  <button>Click Me</button>
  <p>You've pressed the button {{counter}} times.</p>
</template>

Meteor recognises the head and body tags and puts them in the correct place in the page content. This means that by including a head tag, all its content will be added to the “real” page head tag. Same thing applies to the body tag. They are the two main tags.

All the rest of the application must be put in separate template tags.

The special {{ }} parentheses you see are defined by Spacebars, which is a templating language very similar to Handlebars with some unique features that make it perfect to work with Meteor

In the hello-world example,

{{> hello}}

includes the hello template, and

{{counter}}

inside the hello template looks for the counter value in the template context.

That’s it for the html file, for now.

JavaScript file

This is the content of the hello-world.js file:

if (Meteor.isClient) {
  // counter starts at 0
  Session.setDefault('counter', 0);

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    }
  });

  Template.hello.events({
    'click button': function () {
      // increment the counter when button is clicked
      Session.set('counter', Session.get('counter') + 1);
    }
  });
}

if (Meteor.isServer) {
  Meteor.startup(function () {
    // code to run on server at startup
  });
}

Meteor.isClient and Meteor.isServer are two Meteor variables that we can use to determine if we’re running on the client, or on the server. Since Meteor can run a file in both contexts, they’re very useful in many cases. In real applications you won’t use them a lot, since Meteor has some directory conventions that save us from using them all the time.

You can see the main bulk of the code is on the client.

What it does is to set the counter Session variable to 0 at startup.

It then adds a counter helper to the hello template, which will make the {{counter}} snippet available. This helper just returns the Session.counter value.

To handle clicks, you act on the events of the hello template. In this case, you intecept the click on a button HTML element. When this happens, you increment the Session.counter value.

In the Meteor server code, there’s a Meteor.startup call, which just calls the passed function when Meteor is ready. Now there’s nothing in it, but we’ll see how this can be useful later.

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.