Emily Stark presented a "Getting Started with Meteor" workshop for the Stanford ACM Hackathon.

1. Getting Started with
Meteor
,
Emily Stark

2. 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

3. Step 1: install Meteor
• On Mac and Linux:
$ curl https://install.meteor.com/ | sh
• Try http://nitrous.io for Windows

4. docs.meteor.com

5. 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

6. Step 3: scaffolding
git clone https://github.com/
estark37/acmhn.git

7. 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)

8. 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”

9. 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

10. 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!

11. 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) {...}
});

12. 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’)

13. Step 8: the Meteor
package system
meteor list
meteor list --using
meteor add accounts-ui
meteor add accounts-password
https://atmosphere.meteor.com for
community packages

14. 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

15. Step 10: publish and
subscribe
Right now, all users can read all data.
meteor remove autopublish
Meteor.publish()
Meteor.subscribe()
to control which data is sent to which
clients.

16. More
•
•
•
•
•
www.eventedmind.com
•
Come to Meteor Devshop 11! http://www.meetup.com/
Meteor-SFBay
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