A tutorial highlighting the key methods and conventions of a Rails app for designers.

We're about to start working with a new front-end developer who'll be responsible for taking the designs created for sites and creating the HTML, CSS & JavaScript. What we'd like to do straight away is get the developer as familiar with Rails as possible so that they can start creating these templates directly into a Rails app instead of one of the other developers doing this at a later stage.

To help with this I thought I'd write a concise article covering the more frequent Rails conventions such as the folder structure of a Rails app and more common Rails methods that they will be working with. I'll use this websites code as an example of how I've used the common Rails view methods and general Rails convwentions on this site. The page we'll be looking at in detail

The first thing to familiarise yourself with is the folder structure. The main folders you'll be interested in are the 'app' folders and the 'public' folders.

The 'public' folder

The 'public' folder will be the most familiar to yourselves when working with other web frameworks or static websites. The public folder is the root of the web site / app. This means if you're linking to for example an image in '/public/images/' folder. The following path is incorrect...

<img src="/public/images/myImage.jpg" alt="myImage" />

Whereas this path is the correct path.

<img src="/images/myImage.jpg" alt="myImage" />

If you need to link to any file inside your public folder you will never need to put the public in front of it.

The 'app' folder

The next folder you familiarise yourselves with is the 'app' folder. Inside the app folder are 4 additional folders 'controllers', 'helpers', 'models' and 'views'. The one you'll mostly be interested in, is the views folder. Inside this folder are the main template views for your Rails app. Most of the file formats in this folder will be .html.erb files (you will occasionally see .xml.builder, .iphone.erb or .js.erb files too), these are your template files that will contain a mixture of HTML and Ruby code.

These files will be sat inside additional folders inside your views folder and the names will typically match up with he names of your models and controllers. If you have a articles controller and articles model you will usually see a articles folder in 'app/views/articles' and inside this folder you will have 4 files 'index.html.erb, new.html.erb, edit.html.erb and show.html.erb'. The index file here will show all articles, the show file will show a specific article. The new will be a form to create a new article and the edit a form to a specific article.

The other folder already inside your views folder will be the layouts folder. This will have no model or controller and will contain a file called 'application.html.erb' and most likely if you have an articles model, controller and view an 'articles.html.erb'. As the name suggests these are your layout files and will contain the main markup of your page such as html tags, css and javascript includes.

Published: 13 days ago by David White
Tags: