Meteor.JS
A functional example
Work Life
Disclaimer:
There are many things that I don't know.
Meteor.js is not yet at version 1.0
so there can still be changes coming...
0.8.0 at the time of this slide's creation
Get to know your audience.
http://bccsurvey.meteor.comPros
- People know how to use it
Cons
- Not distributed
- Not representative
- Not convienent
It seems like there should be something better?
There is!
Demo time
In Out Board
What can Meteor do?
Meteor app 45 minute tutorialDemo my version of this tutorial
What is Meteor.js?
Node.js + MongoDB + Handlebars.js
Node.js
Node is the Google Chrome V8 engine.
Allows us to write Javascript on the server.
MongoDB
The NoSQL database that handles state.
Document database, access on the server and the client.
There is no schema
{ "_id" : ObjectId("4c2209f9f3924d31102bd84a"), "name" : "mongo" }
{ "_id" : ObjectId("4c2209fef3924d31102bd84b"), "x" : 3 }
Select examples
// find all documents in a collection
db.inventory.find( {} )
// find all inventory with type snacks
db.inventory.find( { type: "snacks" } )
// find all inventory with type snacks or food
db.inventory.find( { type: { $in: [ 'food', 'snacks' ] } } )
Update examples
// Set the price and increment the stock count by 5
db.books.update(
{ item: "Divine Comedy" },
{
$set: { price: 18 },
$inc: { stock: 5 }
}
)
// Replace the entire document
db.books.update(
{ item: "The Banquet" },
{ item: "The Banquet", price: 19 , stock: 3 }
)
Insert example
// Insert a new document
db.products.insert( { item: "card", qty: 15 } )
// resulting document
{ "_id" : ObjectId("5063114bd386d8fadbd6b004"), "item" : "card", "qty" : 15 }
Handlebars.js
JavaScript templating engine.
Single item template
<div class="entry">
<h1>{{title}}</h1>
<h2>By {{author.name}}</h2>
<div class="body">
{{body}}
</div>
</div>
Collection example template
<div id="comments">
{{#each comments}}
<h2>
<a href="/posts/{{../permalink}}#{{id}}">{{title}}</a>
</h2>
<div>{{body}}</div>
{{/each}}
</div>
Use conditionals in your templates
<div class="entry">
{{#if author}}
<h1>{{firstName}} {{lastName}}</h1>
{{else}}
<h2>No author exists</h2>
{{/if}}
</div>
Presentation helpers
Handlebars.registerHelper('agree_button', function() {
return new Handlebars.SafeString(
"<button>I agree. I " + this.emotion + " " + this.name + "</button>"
);
});
// Example of calling helper function
<div class="button">
{{agree_button}}
</div>
Data
That means no api calls to rest endpoints.
Instead of $.ajax({});
Collection.insert({});
Collections
Logs = new Meteor.Collection('logs');
// creates or connects to a mongo collection
db.logs
Publish Subscribe
The Server can publish a record setThe Client can subscribe to that records set
// on the server
Meteor.publish("rooms", function () {
return Rooms.find({}, {fields: {secretInfo: 0}});
});
// on the client
Meteor.subscribe("rooms");
Reactive
Data drives the interface
Reactive data sources:
- Session Variables
- Queries on collections
- Meteor.user
- Meteor.userId
- Meteor.loggingIn
- A couple of others
+
Reactive
=
Real time
latency compensation
Plugins
Meteorite and Atmosphere
Core packages
- meteor list
- meteor add
- meteor remove
core pkg examples
- accounts-ui
- backbone
- bootstrap-3
- spiderable
- underscore
Third party packages
Atmosphere
mrt add accounts-entry
mrt add jade
mrt update
Security
New apps are insecure by default
- insecure
- autopublish
You should remove these!
Putting restrictions on inserts, udpates, and remove
collection.deny
Accounts
- Meteor.user()
- Meteor.userId()
- Meteor.users()
- Account Creation
- Email Address Verification
- Password Management
Oath Support
- Github
Code Organization
Single File App
Meteor.isClientMeteor.isServer
// run this code everywhere, Server and Client
Logs = new Meteor.Collection('logs');
if (Meteor.isClient) {
// code only run on the client
// Template code
// Helper code
// Event code
}
// Only run on the server
if (Meteor.isServer) {
Meteor.publish('logs', function() {
return Logs.find();
});
// On server startup, if the database is empty, create some initial data.
Meteor.startup(function () {
if (Rooms.find().count() === 0) {
Rooms.insert({name: "Initial room"});
}
});
}
Separate code by File Structure
Deploying
Deploying to meteor.com
// free hosting for testing, not production ready
meteor deploy boisecodecamp.meteor.com
Deploying to MODULUS
// install the modulus package from npm
npm install -g modulus
// authenticate
modulus login
// set the mongo env variable
modulus env set MONGO_URL "mongodb://username:pass@mongo.onmodulus.net:27017/database_name"
// deploy time
modulus deploy
Deploying to a VPS
// bundle up your code and install dependencies
meteor bundle ../myapp.tgz
cd ..
// untar
tar xzf myapp.tgz
// run the app in node
PORT=3000 MONGO_URL=mongodb://localhost:27017/myapp node bundle/main.js
Getting Started...
Supported Platforms
- Mac OS 10.6 and up
- Linux x86 and x86_64
- Unofficial Windows Support
Installing Meteor.js
$ curl https://install.meteor.com/ | sh
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4223 0 4223 0 0 2898 0 --:--:-- 0:00:01 --:--:-- 2898
Installing Meteor 0.7.1.2:
* 'meteor' build tool (version f3947a4651)
* Package updates: accounts-base accounts-facebook accounts-github
...
webapp weibo
Installed. Run 'meteor update' inside of a particular project
directory to update that project to Meteor 0.7.1.2.
$
Ready Set Go!
$ meteor create chat
$ cd chat
$ meteor
[[[[[ ~/code/chat ]]]]]
=> Started proxy.
=> Started MongoDB.
=> Started your app.
=> App running at: http://localhost:3000/
Meteor.js Resources
Meteor.JS
By Justin Kay
Meteor.JS
Meteor.JS presentation for Boise Code Camp 2014
- 1,642