CODEWITHSUNDEEP
ruby-on-railsruby-on-rails-4polymerweb-component
eveevans
eveevans

Reputation: 4460

How to use Polymer (1.0) with Rails (4)?

Now that Polymer (1.0) is "Production Ready" Which is the best way to use it on Rails (4) ?

I read a lot and I saw that all the solutions are deprecated, (For example using Gems like: likepolymer-rails, emcee , etc)

I'm lost trying to create a good structure for the project, and the way to include all the polymer components, also I don't know if Sprocket could help or not.

Upvotes: 18

Views: 3189

Answers (4)

Alex Ch
Alex Ch

Reputation: 1

polymer-elements-rails gem was created as there's not sense/possibility to separate them into different gems, as all of these components have circular dependencies. So it is hardly recommended to switch to this gem instead of using deprecated polymer-paper-rails, polymer-iron-rails etc. They will never be updated for Polymer 1.0.

Upvotes: 0

Adaline Simonian
Adaline Simonian

Reputation: 4818

UPDATE (16 June 2015): An official package has been released for polymer-rails. Please see polymer-elements-rails, which is the new and official repository which includes iron-, paper-, and neon-elements.

I will be keeping these forks up for the time being for anyone who may still have them already set as a dependency, but you will get identical functionality and prolonged support from using the official repository, so I urge you to switch if you haven't.

The polymer-rails project has been updated to 1.0, but unfortunately, the gems for the components have not yet. I've gone ahead and created the appropriate forks so that there's some working option in the meantime.

Your gemfile should have:

gem 'polymer-rails'
gem 'polymer-iron-rails', :git => "git://github.com/vsimonian/polymer-iron-rails.git"
gem 'polymer-paper-rails', :git => "git://github.com/vsimonian/polymer-paper-rails.git"
gem 'polymer-neon-rails', :git => "git://github.com/vsimonian/polymer-neon-rails.git"

Then run bundle.

In app/assets/components/application.html.erb you set your dependencies:

//= require polymer/polymer
//= require iron-ajax/iron-ajax
//= require iron-input/iron-input
.....

app/assets/javascripts/application.js should contain:

//= require webcomponentsjs/webcomponents-lite

Your .bowerrc should have the 3rd-party component directory set:

{
  "directory": "vendor/assets/components"
}

Upvotes: 10

chad_
chad_

Reputation: 3819

You might find Rails Assets to be a nice way to add this to your app.

Rails Assets is a proxy to Bower for generating gems from existing front end Javascript libraries and installing them on your behalf via bundler/your Gemfile. This breaks your dependency on gem packagers for keeping front end Javascript libraries up to date.

Basically you'd add this to your Gemfile:

source 'https://rails-assets.org' do
  gem 'rails-assets-polymer'
end

Then run bundle install (Make sure bundler is version 1.8.4 or above or it won't work w/ the aforementioned snippet)

Finally, add //= require polymer in the appropriate spot in application.js.

Upvotes: 0

Rokibul Hasan
Rokibul Hasan

Reputation: 4156

Few months ago I had give a try with polymer, hope this can help you to get an idea

In GemFile 

gem 'rails', '4.0.2'
gem 'polymer-rails'
gem 'polymer-core-rails'
gem 'polymer-paper-rails'

In app/assets/components/application.html.erb

 //= require polymer/polymer

In app/assets/javascripts/application.js

//= require polymer/platform

You show have .bowerrc files with the following content

{
 "directory": "vendor/assets/components"
}

Example view render with polymar

     <style>
         google-map {
             display: block;
             height: 600px;
         }
     </style>

     <h1>Polymer Rails Example</h1>

     <google-map latitude="37.77493" longitude="-122.41942" fitToMarkers>
       <google-map-marker latitude="37.779" longitude="-122.3892"  draggable="true" title="Go Giants!"></google-map-marker>
       <google-map-marker latitude="37.777" longitude="-122.38911"></google-map-marker>
     </google-map>

     <google-map disableDefaultUI showCenterMarker zoom="15"></google-map>
     <script>
         var map = document.querySelector('google-map');
         map.latitude = 37.77493;
         map.longitude = -122.41942;
         map.addEventListener('google-map-ready', function(e) {
             alert('Map loaded!');
         });
     </script>

You can take a look at my project using ploymer, not a nice coding but still you can get an idea form this commit Github Repository

Upvotes: 0

Related Questions