Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

Jason McIver


A Javascript developer excited about Meteor, Mongo, React and Node.

Why I'm excited about Meteor

It seems every few months a new framework popsup with new features and a young hip group to follow. Most of the time the features are new conventions or development patterns for solving common problems and the time savings usually pays off. Meteor brings with it many common solutions and new things that we haven't seen together in slim framework.

DDP

If you only read one thing about Meteor take a look at DDP. Distributed Data Protocol handles RPC (Remote Procedure Calls) and data between client and server over WebSockets or falling back to SockJS.

RPC allows the client to call methods on server and receive a confirmation after the method has succeeded on all other clients.

Data handling allows a client subscribed to a data model receive uptodate changes made by either server or any other connected client in realtime!

  1. Client1 calls the buy() order method with parameters (13 tulips, $40 each)
  2. The order is validated then a success is returned to Client1
  3. Client2 calls the sell() method for 20 tulips at $40
  4. If the sell order is placed Client2 also receives a confirmation.
  5. The server matches the orders at the same price and creates a transaction, then each client is notified of the transaction.

The above all happens in realtime and there is no polling required, as soon as an order is matched each party is notified instantly.

Straight out of the box you get a collaborative app with no effort at all -OMGWTFBBQ!!


Reactiveness

Meteor provides you with 3 reactive data sources, any part of your app associated these sources are updated in realtime.

Mongo Cursor

Part of Meteors reactive nature is thanks to Mongos Cursor built into the core find query. A Cursor is a pointer to a result set from a query, this means any changes to the data inside that result set by other clients will be reflected in realtime on the frontend.

Session

A session is nothing new and implimented much like other frameworks, it provides a global variable.

Session.set('accountBalance', 100);  
Session.get('accountBalance');  

The difference being that any changes made will be reflected through the app, again in realtime.

ReactiveVar

With a similar use as Session ReactiveVar is a more localised variable for attaching to each instance of a Template.


Mini-Mongo

Mini-Mongo is an emulated MongoDB instance running in your web browser which provides you with essential Mongo querries.
Meteor uses this local browser database for Latency compensation, data you are subscribed to is replicated locally for faster reads and writes. Any document manipulation is done on both the client and server simultaneously.
The client for speed and the server to validation, because both the client and server use the same method calls, if the client somehow made an illegal change locally it would fail on the server side then be corrected on the client side.


Build mobile device

Meteor makes it easy to reach the mobile platforms (both Android and iOS) by providing you with a Cordova builder.
You simply install the SDK:

meteor install-sdk android  

Add platform:

meteor add-platform android  

Run on Android device:

meteor run android-device  

And you have option to add any of the Cordova plugins available:

meteor add cordova:org.apache.cordova.camera@0.3.1  

Synchronous coding

Using Fibers Meteor allows us to write code in a Synchronous style while still executing it Asynchonrously and non-blocking.

Example of asynchronous callback hell

makePayment = function(order_id){

    //find the order
    Orders.findOne({'_id':order_id}, function(err, order){

        //make payment if not paid
        if(order && order.isPaid == false){

            //charge CC
            paymentAPI.chargeCC(order.balance, function(err, receipt){
                if(receipt){

                    //update order
                    Orders.update({'_id':order_id},{$set:{'paid':true}})

                    //send email invoice
                    emailAPI.sendInvoice(receipt, order.number)
                }

            })


        }
    })

}

There are many ways to restructure this, the most common would be the use of promises which still adds additional code and can at times be hard to follow.

Thankfully we can pretend javascript is multithreded and write this synchronsouly to make it easier to understand.

makePayment = function(order_id){  
    //get order
    var order = Orders.findOne({'_id':order_id});

    //make payment if not paid
    if(order && order.isPaid == false){

        //charge CC
        var receipt = paymentAPI.chargeCC(order.balance);
        if(receipt){
            //update order
            Orders.update({'_id':order_id},{$set:{'paid':true}});

            //send email invoice
            emailAPI.sendInvoice(receipt, order.number);
        }
    }
}

Here is a great analogy about Asychronous vs Synchronous


Built in Accounts

Meteor provides you with a default Accounts collection for storing user documents. You also get builtin methods like:

Meteor.loginWithPassword(user,password)        //standard login  
//or
Meteor.loginWithFacebook()                     //3rd party Authentication from a number of different vendors.  
Meteor.user()                                //returns the logged in user or null if not logged in  
Meteor.logout()                            //logs out the user  

A premade login/signup template can be quickly added:

meteor add accounts-ui  

Then placing the template call in your menu

{{> loginButtons}}

Fast prototyping

Meteor is full stack framework drastically reducing the amount of code required to handle communication between front and backend - no need for REST endpoints. Once a Meteor Collection is created you are essentially writing methods that are called from both ends via DDP, sent to subscribed clients in realtime.