Intro to Meteor

Meteor Logo

Background

Meteor.js is a super-fast and simple way to build and publish web apps. Using Meteor, you can get your project up and running in no time, using just HTML, CSS, and JavaScript. Meteor lets you write JavaScript for both client- and server-side code while making database management a breeze. Meteor also hosts your projects for you, as you’ll see before the end of this article.

I had been monitoring Meteor for awhile, but the chance to use it just never came up. That changed this week when I accepted a tiny web development project. Coincidentally, Meteor just announced they had reached 1.0 this same week. The stars have aligned and now it’s time to try it out. So let’s get started!

 

Learning Meteor

Meteor has some great documentation to help you get started. Click here to install Meteor, then follow along as I work through the tutorial step-by-step.

Tutorial
The Meteor tutorial walks you through building a simple web-based to-do app. The structure is very straightforward:

  • 1 CSS file
  • 1 HTML file
  • 1 JavaScript file

The HTML looks pretty normal; there’s a <head> section and a <body> section.

Meteor changes things by introducing a <template> section. In the <body> there are Meteor commands indicated by double curly-braces: {{ statement }} where “statement” is a command or keyword that Meteor will interpret for you.

Storing Stuff

Meteor uses MongoDB conventions for storing persistent data. This means we’ll be using Collections. Collections in Meteor are accessible from both client or server. They also automatically update for you. To create a new collection in your server-side JavaScript code, just do this:

MyCollection = new Mongo.Collection(“my-collection”);

This call has some side-effects:

  • A createdAt field is populated and automatically included in stored objects
  • All collection objects have a unique _id field that you can reference

You’ll need to use the _id field to update or remove an object in your collection

Console

You can manage your MongoDB via the meteor console. To access the console, open up a command line utility and type “meteor mongo”. For example:

db.tasks.insert({ text: "Hello world!", createdAt: new Date() });

This adds a new record to your tasks table (see tutorial referenced above for more details on this).

DB changes you make here show up automatically if you have the app/server running. That’s pretty cool. Importantly, there is no special code required to connect the front-end web app with server-side database. That’s… pretty amazing!

User Input

Add a form to your HTML; give it a name (e.g., “new-task”)

Update JS to look for events:

 Template.body.events({ “submit .new-task”: <function(event) definition> });

In your event handler function, grab the text value from the passed-in event parameter:

var text = event.target.text.value;

Insert that text into a new Task object in your Tasks collection:

Tasks.insert({ text: text, createdAt: new Date() });

Clear the form

event.target.text.value = “”;

Return false so we don’t get duplicate submits.

What it looks like right now

todo_1

Select that “type to add new tasks” area and start typing. “Enter” adds a new item to the list. Pretty simple so

Quick notes:

you don’t ever have to define a schema for the collection; just create the collection and start adding. That is super.

How to change properties of an object in your collection:

 Collection.update(this._id, { $set: { checked: !this.checked}} );
 Collection.remove(this._id);

How to change CSS for an HTML element:

<li class="{{#if checked}}checked{{/if}}”>

This is inside <template name=“task”>, so “checked” must refer to a property of our “task” object, which we know is an element of our Tasks collection.
All this example does is pick which CSS to use for this list item. Not bad.

Our app now looks like this:

todo_2

 

 

Deploy

Naturally, Meteor will host your test app for you. To take advantage of this, just type the following in your terminal and deploy:

meteor deploy my_app_name.meteor.com

You’ll be prompted for your email address and password:

Email: you@youremail.com
Deploying to http://my_app_name.meteor.com.
Now serving at http://my_app_name.meteor.com

Victory is yours! Your app should now be available at the specified URL.

 


Ready to Build?

We have all the tools you need to build scalable, world-class mobile, web, and wearable apps. Contact us today to get started.

Leave a Comment

Your email address will not be published. Required fields are marked *