So you are a front-end developer, who is taking on his next project which is written in Ruby on Rails, and a little bit afraid of the conventions and customs used in Ruby on Rails. If so is the case, the good news is that we have got you covered. In this article, you will get to know the essential knowledge to develop front-end of a Ruby on Rails project.
The very first thing: Rails is modular, and it is highly modular. At the end, the job of a web application is to return an HTML page to the client, and Rails is no different in accomplishing this job, though it takes a slightly different approach.
In Rails, the code for an HTML page is not written entirely in one place, rather there are different components that make up a single page so one doesn’t have to repeat one’s self, and this is a principle commonly known as DRY: Don’t Repeat Yourself, and Rails follows it all the time.
So let’s get started with a Rails project, and see which are the files that matter most to a front-end developer.
What follows is a very simple Rails project, which is in initial phase of development.
As you can see on the left side, we have got all the directories with the app directory on the top. Inside app directory, there is one called views and inside views we have got one called layouts.
layouts is a directory that contains different view files, and those different view files control how the HTML for a particular page is rendered. Since, most pages share the same header and the same footer, so Rails – being a modular framework – puts those headers and footers in this directory called layouts.
The most important file in layouts directory is application.html.erb, and by default every page that gets generated by the Rails, comes through this file. Before we move on to what this file does, you may be looking for what those signs: <%= and %> mean, and I’m happy that you are looking for them, and we are going to tackle these right now.
In Rails, sometimes we tend to write HTML code in plain HTML way, as you can see regarding <head> , and <title> tag, but Rails provides us with its own functions that make it easy to write HTML code.
For example, if you are to write an anchor tag in HTML, you would do something like this:
<a href="https://www.square63.com">Square63</a>
But Rails provides you with its very own function called link_to that does a very similar job.
<%= link_to 'Square63', 'https://www.square63.com' %>
Now link_to is a method, that takes two arguments. The first one is the name of the link that will be shown between those anchor tags, and the second argument is the actual link to which the anchors tags will point.
(Note: A method is simply a piece of code that may take input called arguments, and in return, it does something for you, be it generating the HTML code or something else.)
The <%= and %> signs make sure that the code gets executed and gets included in the generated HTML page as well. A close cousin of these signs is: <% and %> . The signs <% and %> execute the code, but do not include the code while an HTML page is generated.
<h1>Result: <%= 1 + 1 %></h1> will produce <h1>Result: 2</h1> in the final HTML page, while <h1>Result: <% 1 + 1 %></h1> will print only <h1>Result: </h1> to the final HTML page.
<%= %> , and <% %> are called ERB tags, and ERB stands for Embedded RuBy, and this is why the extension of the application.html.erb is .erb. In Rails, if a file name simply ends on .html , you can not include the above mentioned ERB tags over in that file.
Well, the was just scratching the surface, and there is more to cover – so head over to the next article to get more flavor of front-end development in Rails. Till then, Happy coding!
