Module 3: Ruby

Earlier in the prework, we looked at HTML, CSS, and JavaScript. Together, they form the three pillars of front-end web development. On the back end (i.e., the server side), however, there are many other programming languages that can be used. Java, Python, PHP, and C# are just a few examples. Even JavaScript can run on the back end now, thanks to Node.js.

Do you have to know all of these languages in order to be a web developer? Of course not. But having a good understanding of 2–3 of them makes you a more versatile developer and shows future employers that you can pick up others as the situation arises.

In the boot camp, we'll be using a language called Ruby, so let's start there.

Writing Ruby

JavaScript can run in the browser as is, but it takes a few more tools to get a Ruby environment set up. To keep the prework simple, however, we won't go through an entire Ruby setup just yet. Instead, we'll use a website called repl.it that will handle all of the behind-the-scenes magic for us so we can totally focus on writing our first Ruby code.

Click this link: https://repl.it/languages/ruby to open a Ruby coding environment. It will start you with a blank file. Go ahead and type the following code into the given main.rb file. Don't just copy/paste—use this as a chance to get familiar with typing this syntax!

def check_name(name)
  puts "Hello, " + name

  if name[0] == "A"
    puts "Your name starts with an A!"
  end
end

check_name("Amy")
check_name("Jim")

Now click the green "run" button, and you should see the terminal on the right output a few lines of text:

screenshot

Congratulations! You got your first Ruby script to run!

Okay ... But What Just Happened?

In programming languages like Ruby, we can write blocks of code called functions or methods that can be called again and again to run the same lines of code, potentially with different data each time. In our Ruby code above, we defined a block of code called check_name using the def and end keywords:

def check_name(name)
  # anything in here is part of our "method"
end

Code that we write inside this method will run whenever we call it. To call it, we write check_name("Amy"). At the same time we call it, we also give it some data to work with. In this case, we gave it the name "Amy" in quotes. We could pass it anything we want, though:

check_name("Bill")
check_name("Carly")
check_name("David")

Each time we call, or use, this method with different data, the method is going to essentially rename the data so it knows how to access it inside. That's what (name) in def check_name(name) is doing. To clarify, "name" will be different each time, as these code comments explain:

check_name("Bill") # name = "Bill"
check_name("Carly") # name = "Carly"
check_name("David") # name = "David"

We can combine this temporary "name" variable with some more text and use Ruby's puts keyword to print a sentence to the terminal: puts "Hello, " + name. ("Printing a sentence to the terminal" means the sentence will appear as output in the terminal window.) However, we also want to see if the name starts with an A to optionally print a second sentence. We can use an if statement to do that:

if name[0] == "A"
  puts "Your name starts with an A!"
end

Or in plain English:

if the first letter of name equals A
  put this text on the screen
end the if statement

name[0] looks at the first letter of the word. (Yes, counting starts at zero—that's a common programming thing.) But if the first letter equals A (checked by using two == signs, not one), then we'll use the puts keyword again to print more text.

Your turn: try adding another if statement somewhere inside the method that checks for names starting with B.

Ruby on Rails

What makes Ruby particularly powerful (and popular) is a supplemental framework called Ruby on Rails. This makes it much easier to build full-stack web applications than if you were to do everything yourself from scratch. We'll go into Rails in more detail once we're past the prework, but to give you a taste of what it does, open this link: https://repl.it/@coding_bootcamp/rails-example.

This is a prebuilt project with several files already created for you. Don't worry about what they all mean; you'll gain an understanding of these different pieces over time. For now, let's open the file navigation on the left and find the file located at app/views/welcome/index.html.erb. The file should look like this when opened:

<h1>Welcome!</h1>

<hr/>

<p>
  Today is <%= DateTime.now.to_date %>
</p>

<p>
  Five times ten is <%= 5*10 %>
</p>

Some of this should be familiar. It's HTML! Except what's with the <%= %> characters? That's where Ruby on Rails comes in. Rails lets us inject Ruby code into our HTML to more easily create templates and display data from a database. You'll get a better sense of how useful this is later on. For now, let's try adding something we already know. Add this <p> tag to the existing HTML:

<p>
  The first letter of the word "hello" is 
  <%= "hello"[0].upcase %>
</p>

If you haven't already, click the green "start" button at the top. Rails will compile everything and display an HTML page on the right that looks like this:

screenshot

"hello"[0].upcase is Ruby code to get the first letter of the word and convert it to uppercase. Okay, you're right, we didn't really need Ruby to accomplish that. But once you start learning more Ruby commands and working with more complex data, you'll start to appreciate what you can do with Rails.

The Power of Loops

Let's try a different code snippet that should prove to be a little more useful:

<p>
  <ul>
    <% 20.times do %>
      <li>hello!</li>
    <% end %>
  </ul>
</p>

This will print 20 <li> tags to the screen, even though we only had to write it once! We could do something similar with regular Ruby code and the terminal, like this:

20.times do
  puts "hello"
end

With Ruby on Rails, however, we're not limited to puts. Instead, we can write HTML within this block of code, so any HTML between the <% 20.times do %> and <% end %> will be repeated. Experiment with this by increasing the number of times it loops or adding different HTML content. Once you're comfortable with how this block of code works, let's expand it a bit:

<p>
  <ul>
    <% ["apples", "bananas", "oranges"].each do |fruit| %>
      <li><%= fruit %></li>
    <% end %>
  </ul>
</p>

What differences do you see? Here, we've added a list (or array) of fruit names, represented by [ ]. We then tell Ruby that, for each item in this array, do some stuff. Notice also that we added an extra |fruit| at the end of our loop. This is going to rename the data on each iteration, much like how we used name in the check_name(name) method earlier.

With this fruit variable in place, we can use it inside the loop to print each fruit name. For example: <%= fruit %>. If we were to call it |thing| instead, then inside the loop, we would have to write <%= thing %>.

Go ahead and try to rename the variable, add new fruits to the array, or use different HTML tags. If you're feeling particularly brave, you could even add an if statement:

<% if something %>
  <p>content here will only display if the condition is true</p>
<% end %>

More importantly, get excited! You'll be building some pretty cool stuff with Ruby and Ruby on Rails once the boot camp officially kicks off.

Module 3: Ruby

Writing Ruby

Okay ... But What Just Happened?

Ruby on Rails

The Power of Loops

Resources