Getting Started with Polymer in Ruby on Rails

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:

• nevir/polymer-rails
• alchapone/polymer-rails
• ahuth/emcee

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.