Getting Started with Polymer in Ruby on Rails

09 Sep 2014

Polymer is a polyfill framework for the upcoming Web Components standards. Web Components is a set of new standards that encompass Shadow DOM, Custom Elements, and HTML Imports. Together, these standards make it easy to extend the nature of the web by creating a reusable set of widgets similar to the ones already provided by standard HTML elements.

At the time of this writing, there are 3 ongoing efforts to integrate Polymer with Ruby on Rails. They are:

All three of these projects have a similar approach. They integrate with Sprockets and the Rails Asset Pipeline to simplify component creation and management by including an app/assets/components directory where you can define your custom web components, and they also source vendor/assets/components for managing and referencing 3rd party components.

After having worked with all three, I settled on emcee for several reasons. For one, it simply worked. I didn’t have any issues with it finding or reloading components like I did with the other two. Secondly, and most importantly, I feel that emcee’s approach is more in line with the spirit of Polymer and its existing tooling inrfastructure. The goal of Polymer is for it’s polyfills to eventually go away some day as more browsers support these new standards. Emcee got this right and will still function down the road when that happens. Emcee relies on bower to vendor the core Polymer elements (and the paper elements, and whatever other third party elements you may want). This allows you to tap into the existing community of 3rd part elements quite easily.

Getting started with emcee is easy. Simply include the gem in your Gemfile:

gem 'emcee'

Install it:

bundle install

And generate the folder hierarchy:

rails generate emcee:install

Once installed, you can create your own components at apps/assets/components. You then include them in your application by loading them in your application component manifest file at app/assets/components/application.html. Now all you have to do is reference the manifest file in your application layout and away you go. View the emcee README for more information on integration, and check out the Polymer documentation to get up to speed on using and creating custom components.

Continue Reading →

Setting up a Canvas LMS Development Virtual Machine

13 Jan 2013

Canvas is an open source Learning Management System (LMS) developed by Instructure. Canvas caught my attention when it was released two years ago primarily because it was developed using Ruby and Ruby on Rails. As of this posting, it’s still using Rails 2.3.x and Ruby 1.8.

When it just so happened that I would actually need an LMS as part of another project that I was working on last December, I jumped at the opportunity to try Canvas. Part of acquainting myself with that codebase involved setting up the project and all of its system dependencies based on Canvas’s own Quick Start Guide. To ease some of the configuration burden of that guide I’ve recorded the setup in a Vagrant based virtual machine environment using VirtualBox that I’ve now released on GitHub.

To get started, you will first need to make sure you have both VirtualBox and Vagrant installed. Once you have those setup, installing the Canvas development environment is just a handful of commands:

  host $ git clone
  host $ cd canvas-lms-dev-box
  host $ git submodule init
  host $ git clone
  host $ vagrant up

On my machine this takes about 5 minutes to complete. So be patient. Once its done, you will have a 32-bit, Ubuntu 12.04 virtual machine with everything you need to run Canvas.

If you’re not familiar with Vagrant you should be aware of the fact that it automatically mounts the root directory of the canvas-lms-dev-box project to /vagrant in the virtual machine. This allows you edit files locally while running everything from within the virtual machine itself.

If you want to take Canvas for a spin, continue with the following. First you will need to ssh into your new virtual machine.

  host $ vagrant ssh

This will log you in to the VM. Proceed with the database setup (this will prompt you for the initial account details) and asset compilation, and then you will be ready to start the web server.

  vagrant $ cd /vagrant/canvas-lms
  vagrant $ bundle exec rake db:initial_setup
  vagrant $ bundle exec rake canvas:compile_assets
  vagrant $ bundle exec script/server

These will take another 5 minutes to complete. Once the server is running, you will be able to access the site from you browser at http://localhost:3000/. Use the account details you supplied to the db:initial_setup rake task to login.

That’s it. You now have a shiny new Canvas installation at your disposal.

It should be noted that this project was inspired by Rails’s own rails-dev-box project. So a special thanks goes to the Rails team for making that tool available.

Continue Reading →

Integrating Devise with Backbone.js

30 Apr 2012

For the impatient: view the code, or see the demo.

Update 30 May 2012: The original version of the application and this article referenced the backbone.modelbinding project by Derick Bailey. Per the readme, that project has been abandoned and I have replaced backbone.modelbinding with the preferred backbone.modelbinder project. All code and referenced samples below have been updated accordingly.

Backbone.js UI implementation for Devise, Ruby on Rails authentication

Several weeks ago I set out to create a single page web app leveraging Backbone.js on the front end with Ruby on Rails powering the back end. In the architecture for this application, Rails is essentially just a JSON API. All of the front-end magic happens with Backbone.js and related friends. Granted, Rails is doing a lot more boilerplate than just acting as an API, but the separation of the UI code and back-end code is a lot clearer in this model.

One of the first things I need on almost all new projects is a way to handle user registration, authentication, and authorization. This project was no different. Fortunately, the Devise Ruby Gem handles this for us in a very clean, configurable way, and to make matters even better, it natively responds to JSON calls. This made integrating it into my single page web app a breeze.

Arguably, doing this is unnecessary as Devise ships with its own UI implementation. However, for the sake of UI consistency and richness, re-implementing it in Backbone is fairly trivial and was a good learning experience. I’ve extracted this part of the app into a sample rails project which can be found at I’ve also published a working demo at

To implement the Devise UI in Backbone.js I started by creating 3 Backbone models, one each for authentication, registration, and password retrieval.


  BD.Models.UserRegistration = Backbone.Model.extend({
    url: '/users.json',
    paramRoot: 'user',

    defaults: {
      "email": "",
      "password": "",
      "password_confirmation": ""


BD.Models.UserSession = Backbone.Model.extend({
  url: '/users/sign_in.json',
  paramRoot: 'user',

  defaults: {
    "email": "",
    "password": ""



BD.Models.UserPasswordRecovery = Backbone.Model.extend({
  url: '/users/password.json',
  paramRoot: 'user',

  defaults: {
    "email": ""

For each of the models I created a corresponding view and used the modelbinding plugin to bind the model attributes to their respective form elements. This left the view with only being responsible for handling form submissions and taking appropriate action based on the response from Rails. In this case I’m just displaying appropriate error messages or updating the layout as a result of a successful login.

Here is the login view:

BD.Views.Unauthenticated = BD.Views.Unauthenticated || {};

BD.Views.Unauthenticated.Login = Backbone.Marionette.ItemView.extend({
  template: 'unauthenticated/login',

  events: {
    'submit form': 'login'

  initialize: function() {
    this.model = new BD.Models.UserSession();
    this.modelBinder = new Backbone.ModelBinder();

  onRender: function() {
    this.modelBinder.bind(this.model, this.el);

  login: function(e) {

    var self = this,
        el = $(this.el);


    el.find('.alert-error').remove();, {
      success: function(userSession, response) {
        BD.currentUser = new BD.Models.User(response);
      error: function(userSession, response) {
        var result = $.parseJSON(response.responseText);



It’s also important to point out that in addition to Backbone.js, I’m also using a few additional libraries to help with application structure and Rails integration. These are:

  • backbone.marionette: Bakes in some nice implementation patterns for dealing with large javascript applications like the notion of layouts, composite/item views, regions, and application-wide pub/sub.
  • backbone.modelbinder: Provides a simple way to bind model attributes to HTML elements a la Knockout.js.
  • backbone-rails' sync implementation: The backbone-rails gem provides an out-of-the-box solution for integrating Rails and Backbone.js. I'm only using their Backbone.sync implementation which makes Backbone.js and Rails play nicely together when talking back and forth.

So far, I feel like these technologies are playing very nicely together. Rails has made flushing out my own JSON API’s extremely easy, and Backbone has made working on the client side a much more clean and enjoyable experience.

Continue Reading →