Skip to main content

21 Manage Assets With Rails Assets

Episode 61 · June 25, 2015

Rails Assets makes it super easy to use the latest versions of frontend libraries

Frontend


Resources

Transcripts

In this episode we're going to talk about using rails assets to manage your front-end libraries in your rails app. Rails assets is this thing built on bundler and Bower, and you're probably familiar with bundler already, it's the thing that manages rubygems in your rails apps, and bower is very similar for front-end libraries. Actually, if you were to go to bootstrap's repository, you'd see a bower.json file, and if you open this up it's just some regular old json, but it's very similar to the gem spec in a ruby gem. So it says where the homepage is in the description, and it's definition of what are the important files to distribute in this package, it also mentions dependencies, and this is convertible using rails assets into a ruby gem. One of the things that people were quick to point out was that making your own gem for a front-end library is a bad idea. This is something we've done for years, and when the maintainer stops maintaining it, or they don't need it anymore and they give up on updating the gem, that becomes a problem. Some people have to fork it, and they have to make their own gem, or use it straight from GitHub, and that kind of becomes painful. Rails assets was designed to solve that problem. I wanted to make sure that we talked about that before, so you can see why this makes sense, and why it's important that we have this.

How do we use Rails-Assets? It's actually really really simple. You just add a block to your Gemfile, with the libraries that you want to include, and that's it. You can search for any of the libraries, like we made that SweetAlert gem, and already there's four different sweetalert libraries here, so there's a bootstrap one that I didn't even know existed, things like that which is pretty cool. Rails-Assets is definitely popular, and all you have to do is add these gems, and add these requires. Let's go take a look at adding bootstrap to a rails app and see how it works.

Here I've got a brand new rails app with one controller and a main action, index. That's it, there's nothing to it, but by default you can see that the default looks like "Times New Roman", just a default font for an html file without styles. Let's go add bootstrap in and we should see the text change and all the includes happen. If we open up our Gemfile here, you can see here at the top we have a source for rubygems.org, and that is basically saying all of these gems by default should be pulled from rubygems.org, now the way that a gem server works is open source, so rubygems.org is the primary place for all of this and it's maintained by a bunch of amazing people, but you don't always have to use rubygems.org, and that is how Rails-Assets works. rails-assets.org is it's own gem server, and here you can say: Let's use the Rails-Assets server instead. This is really neat, because it allows us to configure which gems come from where.

Gemfile.rb

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

All of these Rails-Assets gems are going to start with rails assets, and that is just a namespacing thing they've done. They didn't have to, but it makes a lot of sense because then the names don't conflict with normal gems that you might use. This is really all we have to do in order to install bootstrap from Rails-Assets. We tell it in the block that it's going to come from this other source, and then we give it the gem name, and that is it. We can hop into the terminal, and we can stop our rails server, and we can run bundle to install the gem. You will probably see at the top here, because I've already done this, you'll probably see that it's loading metadata from Rails-Assets, and mine doesn't do that because I've already tested this to make sure it was working. So I've already downloaded those things, but you'll notice that it will pull things from rails-assets.org when you do this for the first time. And then in your application, all you have to do is go to application.js and load bootstrap here, and then, in your application.scss, you can *= require bootstrap there. If we hop back into the terminal, restart our rails server, we should be able to refresh this page once that's loaded, and the fonts change, and the colors change. So we're actually loading bootstrap from Rails-Assets, and it's as simple as that, that was really really easy, and we have bootstrap css, and all of the jQuery and bootstrap JavaScripts and things like that too. All of that is being loaded appropiately, and you'll also notice that when the Gemfile defines bootstrap here, it actually also pulls rails-assets-jquery, so going back to bootstrap bower.json, we can see that because there's this jQuery dependency, Rails-Assets converts that into a gem dependency, and then generates a package for jQuery as well, so it's going to grab the latest rails-assets-jquery, and that is going to be how that works, which is really cool. So it knows how to handle that and it actually even removes requiring jQuery from your application. That's kind of amazing, that it does all this stuff, so you wouldn't need to use the jQuery rails gem, you could use Rails-Assets to load jQuery for you instead. So yeah, Rails-Assets makes a wonderful way of managing all of these assets in your rails apps, and we don't have to do that much work and probably my favorite part here is that if we were to go to bootstrap, and you click on the version that you want to load, it will show you the gem that you need to require, it tell you which JavaScript and CSS files it requires, it shows you which scripts are available: bootstrap.js, bootstrap.scss, and then if you ever see that this isn't the latest version. Imagine bootstrap 4.0 came out today, but there was no Rails-Assets gem for it, you'd just search for it and click "Rebuild", and that would be it. It should go and pull down the latest version of bootstrap and compile a new gem for you, and then that would be it. You don't have to rely on other people to update their gems and release to rubygems. Rails-Assets handles all of that for you, so it makes for a tremendous amount of time saving for people, it also works with Sinatra, and if you want to check out how this works, they have a GitHub that you can see all the source code for this. If you're curious about how this works, take a look at app/models/build directory, and this is actually where most of the magic happens. They have a bower component, class here, and a converter class, and the converter is the one that handles the processing of those bower components into rubygems, and you have all the helper things for converting that, so there's actually quite a bit of work that goes into it, but it's reasonably simple, it's not actually that complicated. If you take a look at all of that, that is pretty much it, this rails app just otherwise, if we take a look at the routes file, you can see that there's not a whole lot going on in here, so they have all the basics as you would expect for being able to access all of the packages from the Rails-Assets website, and that's really it, they have not too much stuff going on. The real magic comes from converting that bower package component into a rubygem. If you've already got your rails application set up with the front-end library in a gem, or you've pasted it into your app/assets or vendor folder, don't worry about it so much, but I would definitely recommend moving to Rails-Assets as you go along. You can really easily just update your Gemfile, and start swapping things out with their appropriate gem from Rails-Assets instead. So you can just remove those if you haven't made modifications in your app/assets folder, you can just remove them from there and swap with the reference to this gem instead. Or, you could swap out the reference to like bootstrap-sass gem with the Rails-Assets bootstrap gem, and that's really it. You can make a conversion pretty easily, and I definitely recommend starting along new apps with rails assets, because it's just that handy. That's it for this episode, I will talk to you next week.

Transcript written by Miguel

Discussion