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
applicati...
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:
m...
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:...
Step 4: the MongoDB
API
Leaders.find();
A cursor representing all the documents in the collection
Leaders.find({ name: “Fo...
Step 4: the MongoDB
API
Leaders.update({name: “Foo”}, {$set:
{votes: 1}});
Update all documents with name “Foo” by setting...
Step 5: add voting
•

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

•

Add a click event:
Template.leader.events(...
Step 6: add new items
• Add a form in a new template
• Add an event handler for submitting the
form:

Template.newItem.eve...
Step 7: Meteor
methods
Should all clients be able to write anything to
the database? No.
meteor remove insecure
Meteor.met...
Step 8: the Meteor
package system
meteor list
meteor list --using
meteor add accounts-ui
meteor add accounts-password
http...
Step 9: authentication
and authorization
• Make it so that only logged-in users can
vote on items or add new ones.

•
•

t...
Step 10: publish and
subscribe
Right now, all users can read all data.
meteor remove autopublish
Meteor.publish()
Meteor.s...
More
•
•
•
•
•

www.eventedmind.com

•

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

www.discovermeteor...
Upcoming SlideShare
Loading in...5
×

Emily Stark at Stanford ACM Hackathon

367

Published on

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

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
367
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Emily Stark at Stanford ACM Hackathon

  1. 1. Getting Started with Meteor , Emily Stark
  2. 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. 3. Step 1: install Meteor • On Mac and Linux: $ curl https://install.meteor.com/ | sh • Try http://nitrous.io for Windows
  4. 4. docs.meteor.com
  5. 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. 6. Step 3: scaffolding git clone https://github.com/ estark37/acmhn.git
  7. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×