Since last week was a bit disrupted, I was even more excited than usual to come back to work experience this week – and I was not disappointed! Our first day this week we started looking at the Sinatra framework for Ruby. If you haven’t heard of it, it’s a bit like Rails but a much lighter version. It has less scaffolding, which means you get a bit more control yourself, and there’s a bit more clarity with what it’s doing, rather than it all being done as if by magic, which can sometimes happen with Rails.

We built two apps in one day – both were number guessing games. In the first (‘NewYork’, after the famous Sinatra song) , we had our app generate a random number, we made a guess as to what it was, and then it responded if our guess was too high, too low or if we’d got it! We also added a guess counter, so that if you couldn’t guess in 10 tries, you lost! Our second app (less creatively titled ‘Guessing Game’) was similar, but the user thinks of a number and the computer guesses what it is, with you giving it hints each time.

The great thing about using Sinatra is that we were able to (relatively) easily connect the back-end ruby code we wrote with an interactive front-end.  Sinatra uses routes and views  to make this fairly effortless – and gives some great, descriptive error messages if you haven’t set up the correct routes.

A route is the app directing the website to send or retrieve information depending on which route is called. For example we could retrieve a new random number when the ‘new_game’ route was called, or send information back to the ‘view’ to tell it what clue to show the user. The views, as the name implies – is setting up what the user sees in their browser. It uses ‘erb’ files (which stands for Embedded Ruby) which start with fairly simple HTML but adds bits of Ruby code in to call the routes or display variables etc. In the erb files you can recognise the embedded Ruby code by the special tags it uses: <% %>. Neither of our apps are perfect by any means, but were a great chance to hit the ground running with Sinatra – feel free to check out the code on my GitHub.

Our second day was…drumroll…more guessing games!  This meant we could focus on learning some brand new skills rather than trying to figure out the logic and layout of a new app as well. We revamped our previous app by trying out some new skills in JavaScript – using JQuery, AJAX and JSON. JQuery allowed us to add some interactivity on our site, by making our buttons and inputs actually call functions. The real beauty was in using AJAX – which meant we could  send and retrieve data without reloading the whole page. This made our app into a much more user-friendly single page app. When we entered a guess, instead of loading a whole new page, AJAX simply sent the relevant information to a route and then would change certain individual parts of the existing page rather than going to a different one. For example when we made a guess it would reload just the text to tell us if we were too high or too low – if we guessed correctly it would automatically hide the input and button to make a new guess, so our only option was to start a new game. This code is on Lilly’s Github under the K2SO repo if you want to see under the hood.

It’s been a huge week for me – taking my first steps from purely back-end code into becoming a full-stack developer. Next week we will hopefully move into Ruby on Rails…though I’m also secretly looking forward to going back to our beautiful object-oriented Ruby classes. Now off to make something new in Sinatra – wish me luck!