,Getting Started with

Meteor

Emily Stark

What is Meteor and who am I?

Meteor is a full-stack JavaScript framework for quickly creating fast, realtime web

applications.

I’m Emily: Stanford CS ’11, Meteor core dev, @estark37

Step 1: install Meteor

• On Mac and Linux:

$ curl https://install.meteor.com/ | sh

• Try http://nitrous.io for Windows

docs.meteor.com

Step 2: basic Meteor commands

meteor create <app name>

meteor help and meteor help <command>

Inside your app directory:

meteor run

meteor mongo

meteor reset

Step 3: scaffolding

git clone https://github.com/estark37/acmhn.git

Step 4: the MongoDB API

Leaders

A collection (sort of like a table in a SQL database)

Leaders.insert({name: “Foo”, votes: 0});

Inserts a new document (sort of like a row)

Step 4: the MongoDB API

Leaders.find();

A cursor representing all the documents in the collection

Leaders.find({ name: “Foo” })

A cursor representing all documents with name equal to “Foo”

Leaders.findOne({ name: “Foo” })

Returns a single document with name equal to “Foo”

Step 4: the MongoDB API

Leaders.update({name: “Foo”}, {$set: {votes: 1}});

Update all documents with name “Foo” by setting the number of votes to 1

Leaders.update({name: “Foo”}, {$inc: {votes: 1}});

Update all documents with name “Foo” by incrementing the votes by 1

Step 5: add voting

• Add upvote/downvote buttons in the “leader” template.

• Add a click event:

Template.leader.events({

‘click .upvote’: function (evt) {...}

});

• You can use the MongoDB API in your click handler!

Step 6: add new items

• Add a form in a new template

• Add an event handler for submitting the form:

Template.newItem.events({

‘submit .upvote’: function (evt) {...}

});

Step 7: Meteor methods

Should all clients be able to write anything to the database? No.

meteor remove insecure

Meteor.methods({

foo: function () { ... }})

Meteor.call(‘foo’)

Step 8: the Meteor package system

meteor list

meteor list --usingmeteor add accounts-ui

meteor add accounts-passwordhttps://atmosphere.meteor.com for

community packages

Step 9: authentication and authorization

• Make it so that only logged-in users can vote on items or add new ones.

• this.userId inside methods

• {{loginButtons}} in templates

Step 10: publish and subscribe

Right now, all users can read all data.

meteor remove autopublishMeteor.publish()

Meteor.subscribe()to control which data is sent to which clients.

More

• www.eventedmind.com

• www.discovermeteor.com

• https://github.com/meteor/telephone-pictionary

• https://www.meteor.com/learn-meteor

• Interested in starting a Meteor South Bay meetup? Email community@meteor.com

• Come to Meteor Devshop 11! http://www.meetup.com/Meteor-SFBay