Beyond single Page apps

An Introduction to iron:router

Meteor Meetup,

Hamburg, Dec 2014.

@steffoweber

Problem, iron:router solves
Client Side routing

Server side routing
anatomy of iron:router

Overview

Client Side

• One URL to serve all content
• Client side HTML generation
• DOM manipulation in browser

SERVER Side

• One URL to serve content
• Send all *.html, *.css, *.js files

Possible issues

• Browser Back/Forward navigation
• Bookmarks (sshht – don't mention '#')
• Search engines
• Code|Project Complexity

routing (Client side)

iron:router

• THE (de facto) routing package for Meteor
• Not part of the core packages
• Client-side & server-side routing

Demo (1)

gott-2:Meteor steffo$ meteor create rdemo

rdemo: created.                               

To run your new app:                          

   cd rdemo

   meteor

gott-2:Meteor steffo$ cd rdemo/               

gott-2:rdemo steffo$ meteor add iron:router

  added iron:location at version 1.0.3        

  added iron:dynamic-template at version 1.0.3

  added iron:router at version 1.0.3          

  added iron:layout at version 1.0.3          

  added iron:middleware-stack at version 1.0.3

  added iron:url at version 1.0.3             

  added iron:controller at version 1.0.3      

  added iron:core at version 1.0.3            

iron:router: Routing specifically designed for Meteor

gott-2:rdemo steffo$ meteor                   

warning: still trying to confirm logout with www.meteor.com

[[[[[ ~/CodeWarrior/Meteor/rdemo ]]]]]        

=> Started proxy.                             

=> Started MongoDB.                           

=> Started your app.                          

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

Create Meteor app

Add router package

Start Meteor server

Demo (2)

Demo (3)

• Configuration objects must be accessible from both, client AND server
• Objects don't need to be in the same file

A very simple route

In 'ironRoutes.js'

Router.route('signup', {
        path: '/signup'
  });

In 'rdemo.html'

<template name="signup">
    <h1>Signup</h1>
</template>

caveat

provide a catchall

Router.configure({
         notFoundTemplate: "404"
});

Hooks

• If user is logged on,
  • display user's profile page
  • set navbar icon to "profile page"
• Else,
  • redirect to logon page.

Router.route('ShowProfile', {
      path: '/ShowProfile',
      onBeforeAction: function () {
          if (!Meteor.user()) {
              this.redirect('/');
          }
      },
      onAfterAction: function () {
          hightlightNavbarItem('#ShowProfileNavBtn');

      }
  });

Data context (1)

<host:port>/read/{Music|Culture|Politcs}

Route

with only one routing rule

Data Context (2)

Text

Router.route('read', {
    path: '/read/:section',
    data: function () {
        var acceptableSections = ["Music", "Politics", "Culture"],
            section = this.params.section;
        if (_.contains(acceptableSections, section)) 
           return {section: section}
        else this.render('404');
    }
});​

<template name="read">
 <h1>The Meteor Post Journal</h1>
    <h2>{{section}}</h2>
</template>​

other Cool client stuff

• Wait until subscription data is available

  • waitOn: function() {

        return MyCollection.subscribe('myCollection');

      }

• Data inside routing function is reactive (e.g. Meteor.user() or Roles).

server side routing

building a REST API with meteor

Server routes

• A client sends an HTTP request to the server
  • Client: Browser, Java, .Net, cURL
  • Server: Meteor server
  • Request: text/plain, application/json, image/jpeg
• Server replies with a document
  • text/plain
  • application/json

API sample

Router.route('api/:func/:param', {
    where: 'server'
})
    .get(function () {
        var f = this.params.func;
        var p = this.params.param;

        this.response.statusCode = 200;
        this.response.setHeader = 'Content-Type:   application/json';
        var result = Meteor.call(f,p);
        this.response.end(JSON.stringify({"return":result,"status":"OK"}));
    })

Meteor.methods({
  get: function(param) {
        return "Hello " + param;
    }     
})​

$ curl -v http://localhost:3000\
          /api/get/steffo 

asynC code

Router.route('api/:func/:param', {
    where: 'server'
})
    .get(function () {
        var f = this.params.func;
        var p = this.params.param;
        var res = this.response;

        Meteor.call(f, p, function (error, result) {
            if (error) {
                res.statusCode = 500;
                res.setHeader = 'Content-Type: application/json';
                res.end(JSON.stringify(error));
            } else {
                res.statusCode = 200;
                res.setHeader = 'Content-Type: application/json';
                res.end(JSON.stringify({
                    "return": result,
                    "status": "OK"
                }));
            }
        })
    })

Meteor.methods({
  get: function(param) {
        return "Hello " + param;
    }     
})​

$ curl -v http://localhost:3000\
          /api/get/steffo 

Anatomy of iron:router

Pooh – lot's of deps

gott-2:rdemo steffo$ meteor add iron:router
  added iron:location at version 1.0.3        
  added iron:dynamic-template at version 1.0.3
  added iron:router at version 1.0.3          
  added iron:layout at version 1.0.3          
  added iron:middleware-stack at version 1.0.3
  added iron:url at version 1.0.3             
  added iron:controller at version 1.0.3      
  added iron:core at version 1.0.3            
                                              
iron:router: Routing specifically designed for Meteor

Why should i care about these packages?

Example. file upload to 3rd party dropbox

Browser

• upload local file

Meteor

• has OAuth token

Dropbox

• needs OAuth token

uploading 100MB via http.put

Router.route('/api/upload', {
    where: 'server'
})
    .put(function () {
        console.log("Request: " +      

JSON.stringify(this.request.body));
      }

 curl -v -X PUT -H "content-type: image/jpeg" \  --data-binary "@hundertmb.jpeg"\  http://localhost:3000/api/upload/

Output. 

input. 

compute. 

=> Meteor server restarted                    

I20141203-15:04:12.589(1)? Request: undefined

chunked upload

> PUT /api/upload/ HTTP/1.1
> User-Agent: curl/7.37.1
> Host: localhost:3000
> Accept: */*
> content-type: image/jpeg
> Content-Length: 87388
> Expect: 100-continue
> 
< HTTP/1.1 100 Continue
< HTTP/1.1 200 OK

Curl -verbose 

data & end event handler

Router.route('/api/upload', {
    where: 'server'
})
    .put(function () {
        var buffers = [];
        var rlen = 0;
        var resp = this.response;
        // check here to learn about event processing: http://nodejs.org/api/events.html

        this.request.on('data', function (chunk) {
            console.log("***");
            buffers.push(chunk);
            rlen = rlen + chunk.length;
            console.log("Request length: " + rlen);
        })

        this.request.on('end', function () {
            var data = Buffer.concat(buffers);

            console.log("--> : " + data.length);
            var httpreq = Meteor.npmRequire('httpreq');
            httpreq.put('https://api-content.dropbox.com/1/files_put/auto/zcfg/test.jpg', {
                    body: data,
                    headers: {
                        'Authorization': "Bearer your-dropbox-aouth-bearer-atoken"
                    }
                },
            );
        });
    })

Summary

• extremely useful package
• things I didn't cover
  • middleware tweaks (like max file size, bodyparsers)
  • best practice for storing ironRoutes.js
  • controllers (you can write your own)
  • wildcards | regex in URLs
  • templates and yields
• things I like to learn about