annotatAR lo-fi augmented reality for the mobile web

Week 11 Routing

Learning about routing in Meteor.

Routing in Meteor

This week I spent my time learning about how to implement URL routing using Meteor. Routing is a key functionality as it will will allow me to dynamically generate pages using URL parameters, and use different layouts for each type of page.

The site architecture will be:

  • index
  • ar
    • occupyboston
    • invisiblemonuments
    • etc

The index page is the documentation site, which will be served if someone visits the main URL, with a map and link to the blog. The AR page will house the Javascript function that detects geolocation, and re-routes to the appropriate URL.

There are two major routing libraries in Meteor: Flow Router and Iron:Router. I tried out both and ultimately decided to use Iron:router.

Flow Router

This routing library is rigorously tested and was recommended by the folks at the Meteor.js meetup that I attended last month. It’s designed for client-side, non-reactive routing. The advice from the Meteor meetup was that Flow Router has a slightly steeper learning curve, but it has a design that enforces best practices - the application is unlikely to break for mysterious reasons, or work improperly. The limitation is that it must be used with another routing library for server-side routing, such as Picker.

Iron:Router

Iron Router is the best-documented router for Meteor, and also has the largest user base. What interested me in it is the extensive set of websites for getting started with the library. I tried out Flow Router and found the examples difficult to translate to my application but had success with a tutorial for Iron Router. It also appeals to me to be able to use the same router for server-side routing, as the geolocation function will utilize a server-side route to the appropriate database of tweets.

I was able to get up and running with a two-page website and Iron Router, though I am still troubleshooting some issue with the AR script.

Templating and CSS

I’m using the standard templating language, Spacebars, for my application, and installed the Twitter Bootstrap CSS framework.

Next directions

Once I have fixed the bugs caused by the new site architecture, I will move on to creating the geolocative function for the AR page and re-routing to a sub-page that will display a particular hashtag.