Meteor is an application platform based on JavaScript and HTML (and a few other languages). It was built with developers in mind, as it simplifies creating prototypes and tackles the hardest parts of deployment and server management. One of the biggest advantages of Meteor is that it is JavaScript-based, and both the front and backend part of the application can be written using the same programming language. The other important feature of meteor is the support for mobile development. It has SDK for both Android and iOS platforms.
Installing Meteor does not require much effort. On OSX and Linux it can be installed using curl and the bash:
curl https://install.meteor.com/ | shIt supports application template generation using the command:
meteor create PROJECT_NAMEDefining the View
Meteor applications are SPAs (Single Page Applications), having a basic structure defined by the framework and template support. Meteor uses the Blaze template engine/reactive UI library -- this is like Angular.js, Knockout.js, Ember, React or Polymer, but (according to Meteor developers) it's easier to use.
Meteor has three sections, which can be defined in the view: head, body and templates.
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<title>Meteor Contact Cards</title>
</head>
<body>
<div class="container">
<header>
<h1>Welcome to Contact Cards using Meteor!</h1>
<form class="form-inline" id="new-contact">
<div class="form-group">
<label class="sr-only" for="first_name">First Name</label>
<input type="text" class="form-control" id="first_name" placeholder="Enter First Name">
</div>
<div class="form-group">
<label class="sr-only" for="last_name">Last Name</label>
<input type="text" class="form-control" id="last_name" placeholder="Enter Last Name">
</div>
<div class="form-group">
<label class="sr-only" for="birthday">Birthday</label>
<input type="text" class="form-control" id="birthday" placeholder="Enter Birthday date">
</div>
<div class="form-group">
<label class="sr-only" for="website">Website</label>
<input type="url" class="form-control" id="website" placeholder="http://" value="http://">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email</label>
<input type="email" class="form-control" id="email" placeholder="someone@example.com">
</div>
<button type="submit" class="btn btn-default">Add Contact</button>
</form>
</header>
<br/>
<div class="col-md-12">
{{#each contacts}}
{{> one_contact}}
{{/each}}
</div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
<template name="one_contact">
<p> <strong>{{ first_name }} {{ last_name }}</strong> born on <strong>{{ birthday }}</strong> has a website at <strong>{{ website }}</strong> and you can access him/her at <strong>{{ email }}</strong>.</p>
</template>In the view, I have the head section where I defined the title and added a CDN reference for Bootstrap CSS. In the body section, I have the form for entering new contacts and I have the {{ #each contacts }} blaze command, which is a foreach loop, iterating over the contacts collection (this is defined in the JavaScript code below). Inside the #each statement I use the template called one_contact. In Blaze templates can be included using the {{> TEMPLATE_NAME }} syntax.
Defining the logic
For defining the application logic, you'll only need to be familiar with JavaScript. The Template.body.helpers and Template.body.events are important objects inside the meteor framework. In the helpers you define the collections and objects that you need to use on the views. The objects here act like a temporary data store. The name of events object is expressive -- when events occur on the view (HTML page), Meteor checks if there are behaviors defined for the given event.
Contacts = new Mongo.Collection("contacts");
if (Meteor.isClient) {
Template.body.helpers({
contacts : function() {
return Contacts.find({});
}
});
Template.body.events({
"submit #new-contact": function(event){
console.log(event);
var first_name = event.target.first_name.value;
var last_name = event.target.last_name.value;
var birthday = event.target.birthday.value;
var website = event.target.website.value;
var email = event.target.email.value;
console.log("Inserting new contact.");
Contacts.insert({
"first_name": first_name,
"last_name": last_name,
"birthday": birthday,
"website": website,
"email": email,
});
console.log("New contact [" + first_name + " " + last_name + "] was added to the database.")
event.target.first_name.value = "";
event.target.last_name.value = "";
event.target.birthday.value = "";
event.target.website.value = "";
event.target.email.value = "";
return false;
}
});
}
if (Meteor.isServer) {
Meteor.startup(function () {
// code to run on server at startup
});
}Meteor offers out of the box support for MongoDB, now how cool is that ? :) Using the new Mongo.Collection(COLLECTION_NAME) syntax it'll open (or create) the collection and you can start to use it. It is important to note, the Contacts mongo collection was created as “global” so it can be accessed both on client and backend side, meteor resolves the data sync between the UI and the server code, you don't have to deal with that. Using the Meteor.isServer and Meteor.isClient variables logic can be split between the front and backend, but more on this later. That was my intro into Meteor...follow-up will come.
You can find the code shown here on GitHub.
