Introduction to MeteorJS Framework
•
0 likes•494 views
An introduction to Meteor, the javascript framework for efficiently deploying your applications, as given at the Chattanooga Developer's Lunch on July 3rd, 2014. During the presentation, I try to put together a clone demo of GoogleDocs to exhibit the capabilities of Meteor!
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Introduction to MeteorJS Framework
Similar to Introduction to MeteorJS Framework (20)
Recently uploaded
Recently uploaded (20)
Introduction to MeteorJS Framework
- 1. Introduction to MeteorJS by Andrew McPherson
- 2. a bit about me. Andrew McPherson I like videogames. 1. Aspiring developer and entrepreneur. 2. Born and raised here in Chattanooga. 3. Student of computer science at UTC. github.com/arcym twitter.com/andrewmcp333 I once had a beard.
- 3. My current project is “the online video editor” ● Originally it was built through a lot of NodeJS with MongoDB and SocketIO. ● But I had a lot of issues in maintaining consistency of data between clients. ● Then I stumbled upon MeteorJS! a bit about my projects.
- 4. a bit about meteor. Meteor is a javascript framework that offers... ● client data synchronization. ● reactive updating templates. ● external module interoperability. ● just really simple syntax. It doesn’t want to replace existing frameworks, but integrate upon them.
- 5. Want to see a bit of syntax?
- 6. Starting the project To initialize... meteor create NoogaDocs > NoogaDocs created! cd NoogaDocs ls > .meteor > NoogaDocs.css > NoogaDocs.html > NoogaDocs.js To execute... meteor > Started proxy. > Started database. > Started application. > App at 127.0.0.1:3000
- 7. In the .html <head> <title>NoogDocs</title> </head> <body> <div id=“greeting”> Hello, {{name}}! </div> </body> In the .js if(Meteor.isClient) { Template.name = “World”; } In the .css #greeting { font-weight: bold; } Trying it out
- 8. In the .js if(Meteor.isClient) { var who = “World” Template.greet.name = who } In the .html <template name=“greet”> <div id=“greeting”> Hello, {{name}}! </div> </template> <body> {{> greet}} </body> Defining a template
- 9. In the .js if(Meteor.isClient) { Template.greet.name = function() { var who = “World”; return who; } //this is just another way of doing it. } Using more functions
- 10. In the .js if(Meteor.isClient) { Template.greet.name = function() { var who = this || “World”; return who; } } In the .html {{> greet “Andrew”}} {{> greet “Anthny”}} {{> greet “Adam”}} Accessing the data
- 11. In the .js Template.list.persons = [ {name: “Andrew”}, {name: “Anthony”}, {name: “Adam”} ]; In the .html <template name=“list”> <ul> {{#each persons}} <li>{{name}}</li> {{/each}} </ul> </template> <body> {{> list}} </body> Iterating via helpers
- 12. In the .js var Persons = new Meteor.Collection(“persons”); if(Meteor.isClient) { Template.list.persons = Persons.find({}); } if(Meteor.isServer) { Persons.insert({name: “Andrew”}); Persons.insert({name: “Anthony”}); Persons.insert({name: “Adam”}); } Including a database
- 13. Binding to events In the .js var Persons = new Meteor.Collection(“persons”); if(Meteor.isClient) { Template.list.persons = Persons.find({}); Template.list.events = { “click li”: function() { Persons.remove(this._id); } } }
- 14. So let’s try a live demo! Hopefully I won’t mess this up! (May the programming gods have mercy on my soul)
- 15. some issues with meteor ● potential networking latency ● best for single page apps ● still in development : ● ● ● ● not much else than that.
- 16. some resources for meteor Meteor Documentation: docs.meteor.com Meteor Examples: meteor.com/learn-meteor NoogaDocs Github: github.com/arcym/noogadocs “Useful Meteor Resources” discovermeteor.com/blog/useful-meteor-resources “How to learn Javascript properly” javascriptissexy.com/how-to-learn-javascript-properly
- 17. Thank you so much!