Asset will help us with compression mechanism through which we can integrate multiple files into single file so when the page pass its request to the server then thankfully server will not take much time to load it. Since it’s a single compressed file so it will not be that hard for the server to load the files. Also this could greatly help us to achieve the high level of increased speed & performance on our sites. Let’s explore the advancement of Asset Pipeline in Rails 5 & how its helping us.
What Is Asset?
To put it in short, the asset pipeline is a mechanisms by which stylesheet(css files), javascripts and images are processed and used by the browser to bring the page view to the users in short time. These processes will do minifying and compressing assets and these assets are mostly written in Coffeescript or Sass, JS languages files.
The asset pipeline would be defaulty implemented in rails with the help of sprockets-rails gem and while creating the application, this Gem will get enabled by default. However, Rails automatically adds sass-rails, coffee-rails and uglifier gems to Gemfile, these are used by Sprockets for asset compression. If you want to skip this gem then just pass this option –skip-sprockets. So it will get dropped there by.
Benefits Of Assets
One of the troublesome issue that we face is, each asset will be specified in separate HTML markup and each will be retrieved separately. So when we try to process the huge number of HTTP requests at same time then it would take the longer loading time. Asset pipeline used to resolve static assets issues that are raised then and there.
Usually, the raw Js files and CSS will occupy extra white space, lot of bandwidth with comments, long variable names and more. An another big issue is that the browser will mostly involve in caching problem and moreover this browser caching issue will rise only when we serve the Javascript file from the server. Because usually when you try to serve the Javascript file from the server then automatically browser will store it in cache. So, this will greatly help us to improve the performance and loading time of the page but, by any chance if the assets got changed then everything will get collapse because the assets will never be updated about these changes. On this critical time, The assets pipeline will enable the browser to use the cached asset until the life of cache expires. Hopefully, now you will come to know the advantage of asset pipeline and how its helping us to resolve this issue.
Let’s look into the main three concepts of Asset Pipeline,
- Concatenate – will concatenate the javascript files
- Minify – Will produce the optimized file
- Preprocess – process happens between the source file and served Assets
What are the Asset changes currently we have in Rails 5
Gemfile
You can note that version of the Gemfile is updated,
# use SCSS for stylesheets gem 'sass-rails', '~> 5.0'
We can use SCSS and CSS in Rails 5 app but it requires different handlings
As everyone knows that application.css file is the master of the stylesheets in the Rails Asset Pipeline and now the syntax is quite different which you can see it in app/assets/stylesheets/application.css
*= require_self *= require_tree .
the above added code in application stylesheet can overwrite all other CSS, including imported third party CSS. You can also see how the Organizing CSS & SASS in Rails are getting done.
Also Read: Caching In Ruby On Rails 5.2
the syntax of application.css.erb file also now updated, For example check the syntax for getting image in application.css.erb,
.class { background-image: url(<%= asset_path 'image.jpeg %>) }
Already if that image is available in public/assets as a fingerprinted file, then we can refer the path for that image.
When using Rails 2.3.2 CSS and Sass asset pipeline, paths to assets must be re-written and sass-rails provides -url and -path helpers (hyphenated in Sass, underscored in Ruby) for the following asset classes: image, font, video, audio, JavaScript and stylesheet.
In previous version of rails, we have to give the asset url like this,
image-url("rails.png")
And it will return the url with the same extension as you can see here “/assets/rails.png”
But currently, in rails 5, we have to give like,
image-path("rails.png")
You can get the same output by applying this updated syntax.
Also there are some generic format can be used,
In previous version Rails we will give like,
asset-url("rails.png")
And it will return the url “/assets/rails.png”
Now in Rails 5, we should give like,
asset-path("rails.png")
This will get you the output now.
Related: 10 Useful Ruby On Rails Gems We Couldn’t Live Without
Live Compilation
In some circumstances you may wish to use live compilation. In this mode all requests for assets in the pipeline are handled by Sprockets directly.
If you want to compile the assets lively then Sprockets will directly load all the asset pipeline requests in same pipeline.
To enable this option set:
config.assets.compile = true
However using sprockets-rails gem, now Rails 5 asset compilation process became more easier than previous versions. try it out and let us know your impressions on Rails 5. Similarly you can learn more interesting blogs on latest technologies, never miss out anything from our largest blog portal where you can get continuous blog updates & posts about all the latest technologies which would be perfect for your 15 minutes tea break! In case if you’re a newbie then don’t forget to subscribe us to get the latest updates from diverse technologies. What else guys hit the subscribe link and go crazy over learning. For more inquires reach us via info@agiratech.com
