18

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.

eveevans
  • 4,392
  • 2
  • 31
  • 38

4 Answers4

10

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"
}
Adaline Simonian
  • 4,596
  • 2
  • 24
  • 35
  • Thanks @vartan, this is the closest answer. But , are you going to mantain this gems? – eveevans Jun 16 '15 at 21:07
  • @eveevans, please see my updated answer - it looks like the official repository just got finished up and thrown online several days ago! :) – Adaline Simonian Jun 16 '15 at 21:41
  • Thanks! thats solves all the problems :) Now, to contribute to the project – eveevans Jun 16 '15 at 21:59
  • Hey! Just to clarify ... need I also run rails g polymer:component for each component I want to include? As described here: https://github.com/alchapone/polymer-rails? @VartanSimonian – necker Jul 12 '15 at 11:16
  • It seems like polymer-elements-rails is no longer being maintained. Which leaves us with nothing. – Toby 1 Kenobi Feb 03 '17 at 10:56
0

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.

chad_
  • 3,749
  • 2
  • 22
  • 22
  • Huh, I didn't know about rails-assets. That seems like a really cool idea. – Ajedi32 Jun 08 '15 at 18:47
  • It works pretty well, but obviously you don't get rails specific functionality like generators and all that. It's relatively simple to wrap most of the stuff w/ custom helpers though so that you can make it easy on yourself later on. – chad_ Jun 08 '15 at 19:29
  • I think this will work for the JS assets, but no with the HTML templates (web components) – eveevans Jun 08 '15 at 21:25
0

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

Rokibul Hasan
  • 4,078
  • 2
  • 19
  • 30
0

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.

Alex Ch
  • 1
  • 1