Meteor

Beyond the hype

by Guillaume Monnet / @255kb

Hype?

• #10 on Github
• ~ 11M$ in funding
• Worldwide Meteor day for 1.0 (134 cities, 4000 devs)
• Fast growing community

Why?

Typical stack

NodeJS, Express, Backbone/Angular, socket.io, MongoDB, Phonegap, Grunt, ...

Meteor stack

Meteor.

Meteor includes

• Templating system (Spacebars)
• Reactivity (Blaze & Tracker)
• Websocket (DDP)
• Full stack DB drivers
• Backend/API (methods)
• Package system
• Build system
• Mobile app (Phonegap)
• Accounts system (email + social login)
• ...

Meteor best feature: Reactivity

Data is automatically kept synced everywhere:

DEMO

Other cool features

Easy to install

> curl https://install.meteor.com/ | sh

Create a new app:

> meteor create myapp
> cd myapp
> meteor

=> Started proxy.
=> Started MongoDB.
=> Started your app.

=> App running at: http://localhost:3000/

Easy to deploy

Deploy on Meteor's servers (it's free!):

> meteor deploy

→ myapp.meteor.com

> meteor deploy myapp.mydomain.com

→ myapp.mydomain.com

Easy mobile apps

Add platforms:

> meteor add-platform ios/android

Test on virtual devices:

> meteor run ios/android

Build:

> meteor build

iOS requires Xcode, Android SDK will be automatically downloaded

User accounts

• → Email + oAuth (Twitter, Facebook, Google, GitHub, etc)
• → Easy API to build on (create your own UI, specific needs...)

Just add some packages:
accounts-base, accounts-password, accounts-ui, accounts-facebook, ...

DEMO

Hot code push

Code updates are automatically pushed to clients

Triggers a page refresh (not for CSS)

Latency compensation

A method can be replicated on client side in order to simulate the server call.

Meteor.methods({
    myMethod: function(arg1, arg2) {
        MyCollection.insert({name: arg1, value: arg2});
    }
});
                    

• → call the server
• → simulate the method on the client
• → validate/invalidate depending on the server response

Is it reliable?

• Well known technologies (NodeJS, MongoDB)
• Same scaling questions than any other NodeJS app
• Lots of production apps (Respond.ly, Workpop, etc)
• Frequent updates
• Very reactive community

New packages everyday

(for everything)

• Routes: Iron router
• DB schema: Collection2
• Automatic forms creation: Autoform
• Load balancing: Cluster
• SEO: Spiderable / SSR
• File upload: CollectionFS
• Offline client DB: Ground DB
• DOS / flood firewall: Sikka
• App monitoring: Kadira
• ...

Does it play well will the outside world?

• Meteor backend + AngularJS
• Meteor backend + DDP in native apps / hardware (Arduino, ...)
• Integration with Ionic, Famo.us frameworks (wip)

Future developments

• Support for MySQL / Redis
• Galaxy (PaaS)
• Windows version (in RC now)
• Server side rendering?

Tips

#1 Use naming convention

lib/                    # common code

client/                 # client code
client/template.html    # templates always loaded first
client/lib/             # client code loaded first
client/main.html        # 'main*' files always loaded last

server/                 # server code
server/lib/             # server code loaded first

private/                # server assets library

public/favicon.ico      # public files
                    

#2 Don't publish everything

Remove default 'autopublish' package

Use publish / subscribe

//SERVER
Meteor.publish('userMessages', function(userId){
    return Messages.find({userId: userId});
});
//CLIENT
Meteor.subscribe('userMessages');//in a route or a template
                    

#3 Wait for subscriptions

//CLIENT
messagesSubscription = Meteor.subscribe('userMessages');

// in your template
if(messagesSubscription.ready()) {
  //do something
}

// or in a Route
Router.route('/myroute', {
  name: 'myroute',
  waitOn: function() {
    return Meteor.subscribe('userMessages');
  }
});
                    

#4 DB everywhere

e.g. use 'sort' on both client and server.

//SERVER
Meteor.publish('roomMessages', function(id){
//last ten messages
return Messages.find({roomId: id}, {sort: {createdAt: -1}, limit: 10});
});
//CLIENT
Messages.find({roomId: id}, {sort: {createdAt: 1}});
                    

#5 Use methods

//SERVER
Meteor.methods({
    myMethod: function(arg1, arg2) {
        //do domething
    }
});
//CLIENT
Meteor.call('myMethod', callback);
                    

What about deny / allow?

//SERVER
Messages.allow({
    insert: function (userId, doc) {
        return true;
    }
});
                    

#6 Restful API

Just use the router on the server:

Router.route('/users', { where: 'server' })
    .get(function () {
        // GET /users
    })
    .post(function () {
        // POST /users
    })
    .put(function () {
        // PUT /users
    });
                    

Where to go next?

→ Official tutorial

meteor.com/install

→ Other great resources (docs, books, forums, etc)

meteor.com/learn

Thank you!