Welcome back!
So application.html.erb is basically a template that is responsible for generating the HTML content.
Line number 11 that reads as <%= yield %> carries the most importance, as this line will place the content from other files, and place them in application.html.erb for generating a complete HTML page that has all the associated Javascript and CSS with it.
So now where do Javascript and CSS come from? Well, as you can see that inside app directory, we’ve got another directory called assets, and this directory is responsible for all images, fonts, JS and CSS code that a single HTML page would need to render itself completely.
In assets directory, let’s have a look at a javascripts directory that contains only a single file named application.js.
As Rails is modular regarding the HTML code, same way it is also modular regarding your Javascript and CSS code. application.js plays a role similar to application.html.erb, and at the end, code from other JS files will be accumulated here in application.js, and then it will be served to the client.
So how does application.js include the code from other JS files?
Below is a snapshot of a typical application.js file:
All you can see a few comments, but these comments carry a lot of information.
Lines starting with this: //= are called manifests, and their purpose is to include code from different other files. So if you include your own file in javascripts directory, and you would like that file to be included in application.js right after the jquery file, so to do that, you would have to write the following code:
//= require jquery //= require your_custom_file
You may or may not use .js at the end of your file name, as it is optional, and that’s how you can control which files with which order application.js will be compiled.
CSS is no different in this regard and follows a very same principle in delivering the final CSS file named application.css.
What follows is a snapshot of application.css in its early stage of development:
application.css adopts a different approach, and you are supposed to write those manifests in the following way:
*= require name_of_css_file
You can also write your code directly in application.js and application.css file, and those codes will be included.
There is a manifest in application.js that reads as: //= require_tree., and a kind of similar expression in application.css file read as require_self. Both of these lines of code make sure that the code is written in application.js itself, and the code written in application.css file gets published in the final shipping of Javascript and CSS files respectively as well.
A Rails web application also supports the use of Coffeescript, LESS and SASS. All you have to do is to end your file names with the appropriate file extension, and Rails is going take care of the rest. For example, if you would like to use Coffeescript instead of Javascript – end the file names with .js.coffee, or leave .coffee at the end if you would like to use just the plain Javascript code.
Same is the case for SASS: if you would like to use SASS, end your CSS file names with .css.sass, or use .css for using the plain CSS code in your project.
So this is it for getting a front-end developer familiarized with Ruby on Rails. Now, no doubt – there is way more to learn even for a front-end developer who just wants to modify the front- end of a Rails web application and doesn’t have the required backend knowledge, but this article will serve as a first step to the giant world of Ruby on Rails. You can head over to Official Rails Guides for getting more information about How does Rails work, and how to work with it effectively. All the best!
