Gemify your assets in less than 10 minutes

If you develop a javascript library for some useful purpose and you share it with the community, you are a great person. But besides that, if you translate that into a Rails gem to use in any Rails project, you are a wonderful person. Today we're going to see how we could make a Rails gem in order to have our super fancy javascript library available to add in any gemfile.
First step, let's do a super fancy javascript library
For this example, the first thing we have to do is our javascript library. Some super simple but funny thing, e.g., a javascript library to add random Giphy gifs in our HTML. Because the purpose of this post isn't develop this library, let's pretend that we have developed and looks like this:
/** * Core and general tools */ (function($, undefined) { 'use strict'; // Singleton if (typeof window.RandomGiphyImageRails !== 'undefined') { return; } // // Module general vars // var v = '1.00 beta', debug = false, data = { api_key: 'dc6zaTOxFJmzC', query: 'happy', element_class: 'giphyme' }; // // Methods // // Adds Giphy gifs into the elements with class data.element_class function giphyme() { var elements = $('.'+data.element_class); $.each(elements, function(key, value) { if (this.debug) console.info(value); updateGiphyImage($(value)); }); } // Return Giphy gif URL string. function updateGiphyImage(element) { $.ajax({ method: 'GET', url: 'http://api.giphy.com/v1/gifs/random', data: { api_key: data.api_key, tag: data.query }, success: function(response) { if (this.debug) console.info(response.data.image_url); element.html('<img src="'+response.data.image_url+'" alt="Gif via Giphy" />'); }, error: function() { if (this.debug) console.info('Giphy Api call error.'); } }); } // // Public methods / properties // window.RandomGiphyImageRails = { debug: debug, data: data, giphyme: giphyme }; }(jQuery));
With this library, we could do something like this:
$(document).ready(function(){ // Set debug mode (for console logs) RandomGiphyImageRails.debug = true; // Testing api key by default if you don't specify one RandomGiphyImageRails.data.api_key = 'YOUR_GIPHY_API_KEY'; // Class of the HTML element where you want to put the gif RandomGiphyImageRails.data.element_class = 'giphyme'; // Query or tag of your random gif RandomGiphyImageRails.data.query = 'nintendo'; // Executes the random gif thing RandomGiphyImageRails.giphyme(); });
And then put one or more HTML tags in your views:
<body> <div class="giphyme"> </div> </body>
Refresh your page and... voila! :)
Wow! Awesome! So... let's gemify this jewel!
An asset gem is just an extremely simple engine. Bundler makes it simple to create the files and directories necessary for creating a gem. We only have to do the follow steps:
$ bundle gem random_giphy_image_rails
This will create basically the following tree:
. ├── Gemfile ├── lib │ ├── timeago │ │ └── rails │ │ └── version.rb │ └── rails.rb ├── LICENSE.txt ├── Rakefile ├── README.md └── random_giphy_image_rails.gemspec
Turn the gem into an engine
Bundler create the gem as a standard Ruby module, but we want it to be a Rails Engine. So in our lib/random_giphy_image_rails.rb
file we are going to specify this:
require "random_giphy_image_rails/version" module RandomGiphyImageRails module Rails class Engine < ::Rails::Engine end end end
All we're doing here is declaring the gem as a Rails Engine. This will cause Rails to add its directories to the load path when the gem is required.
Next step: add our javascript library. We're going to create in our gem the directory vendor
, with directories stylesheets
, javascript
and images
inside, so we finish with something like this:
. ├── Gemfile ├── lib │ ├── timeago │ │ └── rails │ │ └── version.rb │ └── rails.rb ├── LICENSE.txt ├── Rakefile ├── README.md └── random_giphy_image_rails.gemspec └── vendor └── assets ├── images ├── javascripts │ └── random_giphy_image_rails.js └── stylesheets
Make a simple readme file with the gem as documentation, and we're done! Ok no... it remains one last step.
Push it to GitHub & RubyGems
Create a GitHub repository for the gem, stage all of your commits, commit, and push the code to GitHub. If you've never published a gem on RubyGems before, you'll need to sign up for an account there. Your account settings will contain an API key that should be copied to ~/.gem/credentials
. Publishing your gem is as simple as:
$ rake release
Yes now! Finally we're done. From here we can use our newly released Rails gem in any project by simply adding to our Gemfile:
gem 'random_giphy_image_rails'
and then execute:
$ bundle
or install it yourself as:
$ gem install random_giphy_image_rails
Then, add this into your application.js
file:
//= require random_giphy_image_rails
Oooooooooooooh yeah!
Any place where I can see the result?
Yeah! Here you have the Github repo for this example, so you can clone it, change it, play with it... whatever you want!
About The Author
Iván González - Software Developer
Hi, my name is Iván (aka dreamingechoes). I'm a passionate software developer from the north of Spain, interested in all kind of technologies.