Personal tools
Caution: in 2013 a "Meteor" will impact the World (Wide Web)

MAYDAY, MAYDAY, MAYDAY

Jan 30, 2013

Caution: in 2013 a "Meteor" will impact the World (Wide Web)

Meteor is a very powerful Javascript framework: this short article demonstrate how to install, configure and create your first application using "Meteor"

Nothing to do with the Mayan prophecies, quiet!

Some time ago I came across a tweet that talked about Meteor and, as usual, I tried to investigate the simple reading.

I knew of the potential offered by Node.JS but I never tried something, so I took the opportunity to understand more. Also, these types of frameworks are increasingly directing a new way to write web applications (interesting this article). Furthermore, here you can find a lot of examples of application made with Meteor.
Meteor runs on Node.js. Has it's own server
Without spending a lot of time, I will try to reproduce steps how to create from scratch the environment and a simple application.

 

First, install Meteor downloading the installer (in my case, on an old Windows XP machine - yes, there is also for Windows!).

Completed the first step, go to the installation folder of Meteor and create the application.

setup&config

Now, let's create pages, css and javascript files. Basically, file are structured in three folders:

  • client
  • server
  • public.
Meteor uses MongoDB, through Javascript API called "collection"

All files in client directory are served only to clients (server doesn't know about them), files in public are resources most of the time, i.e. images. Server directory serves data to server. Everything outside those folders is shared between clients and server (it would be a good place to put scripts or templates to run on both, server and client, more about that other time). In our simple program we are going to use only client directory.

helloworld.css

html {margin:0;background-color: #eee;}

body {
width: 640px;
margin:auto;
text-align: center;
font-family: 'Helvetica';
color: #aaa;
text-shadow:1px 1px #fff;
}

p {font-style: italic}

helloworld.html

<head>
 <title>Hello World</title>
</head>
 
<body>
<h1>Hello</h1>
<p>My very first application</p>
<div style="float:left;width:49%;text-align:left">{{> hello}}</div>
<div style="float:right;width:50%;text-align:left"> 
{{> form}}<br><br>
{{> anotherform}}
</div>
</body>
 
<template name="hello">
 {{somebody}}
</template>
 
<template name="form">
<input id='newName' type='text'/><input type='submit' value='Set!'/>
</template>

<template name="anotherform">
 <input id='newNameAppend' type='text'/><input type='submit' value='Append!'/>
</template>

helloworld.js

Session.set( 'somebody' , '' );
 
Template.hello.somebody = function(){
    return Session.get('somebody');
}
 
Template.form.events({
     'click input[type=submit]': function(){
     Session.set( 'somebody' , $('#newName').val() );
}
 
});

Template.anotherform.events({
     'click input[type=submit]': function(){
     Session.set( 'somebody' , Session.get( 'somebody') +'\n'+ $('#newNameAppend').val() );
}
 
});


css file is trivial, the most important things are about html and js file.

Let's get straight to the .html, that could be put there whatever you would like to render. Just without links to CSS and/or other scripts. If needed to include something, just copy file inside file structure (client, server, public or root of your project) and Meteor will minify it and include along other files.

Furthermore, html is written in Handlebars syntax, a powerful templates for javascript.

Inside curly brackets you put names of variables (somebody) or templates (> hello). ">" sign means that you are including a template. In our case we are including hello, form and anotherform templates which definitions you can find between template tags.

Let's talk about .js: In helloworld.js we set up a default value (void) for our session variable

Session.set( 'somebody' , '' );

Now that we have a variable inside a session, our template can use it to display

Template.hello.somebody = function(){
return Session.get('somebody');
}

All templates you setup are available in a namespace Template. In this case we have Template.hello, Template.form and Template.anotherform already defined for us by Meteor. To use {{somebody}} in the template, we must define that variable to get a proper display. We make it a simple function that returns our session value with Session.get('somebody').

Finally, let's talk about onclick events:

Template.form.events({
 'click input[type=submit]': function(){
 Session.set( 'somebody' , $('#newName').val() );
 }
});
Template.anotherform.events({
     'click input[type=submit]': function(){
     Session.set( 'somebody' , Session.get( 'somebody') +'\n'+ $('#newNameAppend').val() );
}
});

Using Template namespace we are reaching form and anotherform template. The first sets and displays the value submitted in text field, the second appends to present values just submitted. To handle events we put an object with definition inside an event function.

Template.form.events( {} );


That's it! Notice that each time we edit a file, no reload of our page is needed: it's automatically updated "on-the-fly".

This is a screenshot of the whole application, very simple but, IMHO, very clear. Stay tuned for something more complex about Meteor application in next posts.

example

Filed under: , , ,
comments powered by Disqus