Emily Stark at Stanford ACM Hackathon


Published on

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

Published in: Technology
  • Be the first to comment

  • Be the first to like this

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