— January 28, 2014

Meteor.JS Tutorial #1: Getting Started Guide for Meteor JS

If you're like me, you are cautiously optimistic about new technology, such as Meteor.js. I'm very excited to see how Meteor develops, and what it will mean for the future of web development. I've been playing around with Meteor, so I wanted to do a quick tutorial.

To get started, go get yourself a copy of Meteor.js. Once you have done that, create a sample application by typing meteor create my_app at the console. (This tutorial assumes you have basic web development and console skills.)

Now type cd my_app/ in terminal.

tree

├── my_app.css
├── my_app.html
└── my_app.js

Cool! You now have a single-page meteor app! You can put your styles in the css file (duh), now let's take a look at the MyApp.js file.

if (Meteor.isClient) {
  Template.hello.greeting = function () {
    return "Welcome to my_app.";
  };

  Template.hello.events({
    'click input' : function () {
      // template data, if any, is available in 'this'
      if (typeof console !== 'undefined')
        console.log("You pressed the button");
    }
  });
}

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

The first thing I notice right off the bat is we have these Meteor.isClient and Meteor.isServer methods. Meteor has some sort of secret sauce that will make sure that the code you put on the server side will not be exposed to the client, and vice versa (thankfully). There are certain things that you can and cannot do on the client side in meteor, for the sake of data-security, but more on tht later.

The next thing I notice is the property on the Template object. If we look at our my_app.html file, we see

<head>
  <title>my_app</title>
</head>

<body>

</body>

<template name="hello">
  <h1>Hello World!</h1>

  <input type="button" value="Click" />
</template>

In Meteor, we don't use HTML in the old-school way of compiling pages with server variables (MVC style), now there is this new idea of MVM, or Model-View-Model. In Meteor, you will find that the server code is bound almost directly to the view. If we want something to happen server-side on click, we can simply call the events method the corresponding template. Meteor will bind Template.template_name to the corresponding template, defined by the name attribute.

I hope this tutorial was a helpful intro into Meteor JS! If you're looking for more meteor, don't miss my tutorial on how to listen for events in Meteor.js!