Contents

General

I have been checking out Meteor periodically since about version 0.5. It was officially bumped to version 1.0 a while a go and is now at 1.1.0.2, so I decided that now it’s a good time to see how mature it is.

While playing around with it in the past I’ve usually used CoffeeScript which is easily done as Meteor has a good package management system and CoffeeScript was a native package. Same goes with Stylus. Changing the HTML templating engine used to be harder, but now packages can also be used for that and I like the Jade syntax, which is very concise, better than SpaceBars syntax that is the default for Meteor.

When creating a new app with Meteor, it generates a few basic files which form an example application that is immediately runnable. The application shows a page with a single button and a counter that is increased when the button is pressed. I converted the application to use CoffeeScript for the events and Jade for the HTML templating and added Stylus support.

Creating the application

After installing Meteor (instructions can be found here) creating a new application is done with

1

meteor create meteortest

In that folder are the following files

  • meteortest.css
  • meteortest.html
  • meteortest.js

You can start the example application with running the command meteor in that folder. The application can be checked at http://localhost:3000.

Adding support for CoffeeScript, Jade and Stylus

Using the Meteor package manager is simple and adding the support for the packages is as simple as running

1

meteor add coffeescript stylus mquandalle:jade

in that folder. The packages that are used can be checked with meteor list.

Taking Jade into use

The original HTML in meteortest.html looks like

1
2
3
4
5
6
7
8
9
10
11
12
13

<head>
  <title>meteortest</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>

When that is changed to Jade markup the file meteortest.jade becomes

1
2
3
4
5
6
7
8
9
10

head
  title meteor-test

body
  h1 Welcome to meteor!
  +hello

template(name=hello)
  button Click me!
  p You've pressed the button #{counter} times.

Unwrapped templates as own files

Breaking templates into their own files may make sense and the Jade templating engine used with Meteor supports it. Then the file for template named hello would be hello.tpl.jade and it would contain just

1
2

button Click me!
p You've pressed the button #{counter} times.

Then the file meteortest.jade would look like

1
2
3
4
5
6

head
  title meteor-test

body
  h1 Welcome to meteor!
  +hello

Taking CoffeeScript into use

The original meteortest.js looks like

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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
  });
}

When that it converted to CoffeeScript, the file meteortest.coffee becomes

1
2
3
4
5
6
7
8
9
10
11

if Meteor.isClient
  Session.setDefault 'counter', 0

  Template.hello.helpers
    counter: -> Session.get 'counter'

  Template.hello.events
    'click button': -> Session.set 'counter', Session.get('counter') + 1

if Meteor.isServer
  console.log 'This code runs on server'

Taking Stylus into use

Using Stylus is extremely simple. The original meteortest.css file is replaced with meteortest.styl which can for example be

1
2

h1
  color: green

Try changing the color to for example red while you have the application open in a browser and see how quickly the changes are autoloaded to the browser without breaking the session.

Running the application

After deleting the now redundant meteortest.css, meteortest.js and meteortest.html there are four files in the application

  • meteortest.jade
  • hello.tpl.jade
  • meteortest.styl
  • meteortest.coffee

The application can be run with just the command meteor and by going to the address http://localhost:3000 and it should work exactly as the original example application.

Cloning from GitHub

The example can also be found from GitHub and can be cloned with

1

git clone https://github.com/SirIle/meteortest.git

After that running it with the command meteor in the application folder fetches all the required packages and the application can be tested by going to http://localhost:3000.