Google Polymer with rails 4

Question

I have build a Ruby on rails app.I want to use polymer with my ruby on rails app. Cam anybody suggest some good resources to learn polymer with rails ?

Is it efficient t

Answer 1

I am using bower, so I expect you already have bower setup on your system. (brew install node && npm install bower)

1. Set up you gems

   gem 'bower-rails'
   gem 'emcee'
   

2. bundle install

3. rails g bower_rails:initialize

4. rails g emcee:install

5. Setup your bower file. Below is what mine looks like:

   asset 'angular'
   asset 'angular-route'
   asset 'angular-resource'
   asset 'angular-mocks'
   
   asset 'webcomponentsjs'
   
   asset 'polymer', github: 'Polymer/polymer' 
   asset 'polymer-core-elements', github: 'Polymer/core-elements' 
   asset 'polymer-paper-elements', github: 'Polymer/paper-elements'
   asset 'platform'
   
   # Voice Synthesis and Recognition
   asset 'voice-elements'
   

   Figure out the ones you need and delete the rest.

6. rake bower:install
   To download the components but take note that the files will be saved in vendor/assets/bower_components and not vendor/assets/components expected by emcee. So you will need to make symbolic link.

7. Setup symbolic links

   • first remove components i.e. rm -rf vendor/assets/components
   • then set up the symlink i.e. ln -s vendor/assets/bower_components vendor/assets/components

8. Now setup your assets

   # app/assets/components/application.html
   *= require polymer/polymer
   
   # app/assets/javascripts/application.js
   //= require angular/angular
   //= require angular-route/angular-route
   //= require angular-resource/angular-resource
   //= require webcomponentsjs/webcomponents
   //= require platform/platform
   

   (Please note that I only included all I am using for testing. As stated before, remove those you don't need).

9. Just some house cleaning you jump off to start trying things out. Include Bower components in rake assets path.

   # config/application.rb
   config.assets.paths << Rails.root.join("vendor","assets","bower_components")
   

   And that is about it for setup. Jump on it and start using it.

10. Include html import tag in your layout file

    = html_import_tag "application", "data-turbolinks-track" => true
    

11. And call a sample polymer in your view

    # sample.html.haml
    ================     
    %paper-tabs{:selected => "0", :scrollable => ""}
      %paper-tab Skills
      %paper-tab Experiences
      %paper-tab Education
    

Ref http://angular-rails.com/bootstrap.html http://www.akitaonrails.com/2014/06/29/usando-polymer-com-rails#.VHcoW2SsV81