Javscript and Rails
Putting the two together
I am currently enrolled in the software engineering program at Flatiron School. Prior to attending, I had no coding experience whatsoever. So understanding what I was doing everyday was sometimes hard to connect the dots. The first coding language I learned was ruby, soon after we learned rails. I had no idea what “frontend” or “backend” meant but I was being told that rails could do both. After completing my first rails project, I had a much better understanding of both terms.
Now in mod 3, we have been introduced to Javascript. The first few days of learning Javascript, I found myself in a familiar place of not knowing what was going on or how I would be using this language. But a couple of days after my javascript introduction, I was told that Javascript could be used as a frontend with rails as a backend! This honestly blew my mind because I thouhgt I had it all figured out.
Our first lab that connected the two was called New Pokemons Teams Project. I’ll give you a brief look into how we setup things up. In this lab, we started with the backend first by typing into the terminal:
rails new pokemon-teams-backend — api
Just a heads up, rails is going to act as our API to get whatever data we are using in our application, not the db.json server we got used to while learning “vanilla” Javascript.
Next thing we had to do was uncomment the gem ‘rack-cors’ in the gemfile and run ‘bundle’ again. Then uncomment the following code in the config/initializers/cors.rb file, and add a “*” to origins.
After this we started doing some more familiar things. We used our generators to create our trainer and pokemon models, migration tables and controllers, then we migrated:
rails g resource trainer name
rails g resource pokemon species nickname trainer:reference
rails db:migrate
We added our has_many relationship to the Trainer model. Both models are shown below:
Seed data was provided for us so we just used:
rails db:seed
Our routes remained pretty familiar as well.
The next step was adding the frontend. A folder was provided for us called pokemon-teams-frontend. In this folder we had an HTML, CSS and JS file already setup. We started the server from our terminal with rails s and started the frontend with open index.html from the terminal to see the page as we made changes.
This is where things start to connect and get interesting. We rendered data using the ‘get fetch’ to our page using Javascript but the pokemon data was coming from our SQLite database using rails.
Once we had the data we wanted, we could add it to our HTML elements just as we had been doing before when we got our data from db.json.
On our backend is where things were the most different for me. Now in our controllers, we don’t render views anymore. This particularly made me sad because I had finally gotten the hang of having the controller and view work together along with the routes to get an actual webpage going. But anyhow, now we render json: . Let me show you what it looks like in our controller.
Yes! It’s that simple (although you can image things will probably get more complicated down the road). This code will render all of our pokemons to json and the frontend will get them from our rails API when it uses fetch.
The really cool thing that can happen now is that we can use Active Record. Our Trainers model has_many Pokemons. Me and my partners first thought was to find the Pokemons through the Trainer object when we rendered them using Javascript. But there’s an easier way now! We can get the pokemons that belong to the trainers through their association. Let me show you how it looks:
Yup! We simply tell our Trainers controller about the asociation using include: and now our frontend can get to the pokemons that belong to trainers. I thought this was amazing!
I started to see how the connection between Rails and Javascript was being made and it made me excited to see the possibilities for the future. Full CRUD can stil be carried out using the two together. In this lab, we only needed to use create for a pokemon to be added to a trainer, and delete for a pokemon to be relaesed from a trainer. This is what it looks like in the Trainers controller:
This still is very similar to what we learned in rails, we are still just rendering json: in each action. The frontend will also still use a ‘post fetch’ and a ‘delete fetch’ to add a pokemon and delete one.
All in all, after completing this lab I felt I could see things a bit clearer. I’m looking forward to using Javascript to add more functionality in my upcoming mod 3 project. I think the flexibility of Javascript will make a more fun and creative experience building applications from now on.
