Understanding Yield and Layouts in Sinatra

Photo by Shane Rounce on Unsplash

Introduction

Using yield and layouts were a little bit fuzzy for me until I got more deep into Sinatra during my journey with Flatiron school online web developer program. In this post, I will demonstrate what is meant by Layouts and how did I understand the powerful keyword “Yield”, hope to help you too 😁.

This post assumes that you are comfortable writing ERB syntax and has a good knowledge of HTML basics and of course Ruby .

What is meant by Layout?

Most websites are sharing a common HTML structure like header, footer, body tag and so on. And it is a good practice to keep your design consistent across all that navigation pages. Imagine having a website with large number of navigation pages, how many times copying and pasting the HTML main structure you will do to make your design standard, it is so much work!! At this point, layout comes in handy where it manages the outline frame of your site or application.

So Why developers use layout?

As an implementation for the concept of keep your code DRY “Don’t Repeat Yourself”, it will be more efficient to implement all those HTML in one file then use them. Incase you want to change a tag or render an additional navigation menu, it will be added into the layout file only, and magically, this change will be automatically applied to any number of pages your website has.

Yield Keyword meaning

When you saw a yield sign on a cross road or when approaching to roundabout circle, the action you should take is to wait/yield to the other cars that are already crossing the circle then you can proceed. Yield keyword in layouts has the same meaning. In Sinatra or Rails, we are dealing with forms which is HTML fragments, not fully structured. Yield means that the layout should wait to the templates to render then proceed. What happens is that the page is rendering the layout file then proceed… until it hits the yield statement, then it stops and drop in the template file. When the template is done, it keeps going to render everything else after the yield statement in the layout. Therefore, it is very important to be cautious about choosing the right spot for yielding statement in your layout.

How to use layouts in Sinatra

To use layout, you have to satisfy two prerequisites:

1. Make layout value to true in the controller file.
2. Invoke it as a symbol.
3. Specify what template to render

It is important to reference templates with symbols otherwise the layout will render any strings passed to them whatever they are.

According to Sinatra documentations, Templates take a second argument, the options hash:

get '/' do
  erb :index, :layout => :post
end

This will render views/index.erb embedded in the views/post.erb (default is views/layout.erb, if it exists).

Conclusion

Using layouts make your code more efficient and easy to improve. Try to use it as much as you can.

Hope this reading gives you a better understanding of what layout is and why it is being important to use. If you have any questions, please comment them below or follow me on twitter @salmaeng. Thanks for reading!