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!