Meteor.JS

A functional example



@justinbkay


Work Life


http://nwrecc.org/



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







Feel free to ask questions...





Get to know your audience.

http://bccsurvey.meteor.com




Pros

  • 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 tutorial
Demo 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.





Mongo has collections of documents
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






"In Meteor, the client and server share the same database API"




That means no api calls to rest endpoints.

Instead of $.ajax({});

Collection.insert({});





"Every Meteor client includes an in-memory database cache. To manage the client cache, the server publishes sets of JSON documents, and the client subscribes to those sets. As documents in a set change, the server patches each client's cache."


Collections


Meteor collections correspond to mongoDB collections

Logs = new Meteor.Collection('logs');

// creates or connects to a mongo collection
db.logs
              


Publish Subscribe

The Server can publish a record set
The 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




Web Sockets
+
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


atmospherejs.com

mrt add accounts-entry

mrt add jade

mrt update


Security

New apps are insecure by default




Two packages that are installed by default:
  1. insecure
  2. autopublish

You should remove these!


Putting restrictions on inserts, udpates, and remove


collection.allow
collection.deny 


Accounts






  • Meteor.user()
  • Meteor.userId()
  • Meteor.users()





  • Account Creation
  • Email Address Verification
  • Password Management



Oath Support

  • Twitter
  • Facebook
  • Github
  • Google
  • Weibo


Code Organization



Single File App

Meteor.isClient
Meteor.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


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