DEV Community

Gia Jennings
Gia Jennings

Posted on

Javascript Meets Ruby

THE BUILD

First and foremost, this was the most challenging project I've worked on to date. From Ruby to Javascript, it is quite the transition but it's been a rewarding journey to complete a fully functional single page application. So let's get into some highlights of the build, shall we?

Backend

For the past six months or so, I've been fully submerged in the world of Ruby. Learning all the ins and outs, but this was my time to shine. One of the project requirements for this project was using Ruby for our backend portion. Building the backend took me no longer than 20 minutes; setting up the database with necessary data and relationships...BAM, done. Before we move pas this section since we're now pros in Ruby, I wanted to touch on serializers.

Screenshot of code

As you see here, we have our models and controllers. But wait...where are the views? Well there are no views when utilizing a Javascript frontend and we'll get into how that works right now.

Frontend

Whew, now we're to the most challenging part of the build; the frontend.

To display the application, with a Javascript frontend, we use an html file. Here's what mine looks like.

index.html file

Within this file, we include div classes to populate the different sections of our app that we build within their own files. Organizing our files or classes to include functionality related to themselves is called OOP or Object Oriented Programming. This is similar to Object Orientation in Ruby.

Now, let's dive into a particular part of the build which I found to be pretty cool and a lot different than the Ruby apps I built in the past. With Javascript, we can actually use .innerHTML to set or return the HTML content of an element. As you can see below, I used this to return the values of each attribute within it's appropriate element.

Alt Text

In Ruby, we would populate the values of the attributes we wanted displayed, within the actual view or layout. However, in Javascript we can do this within the object file itself and call the div section in our html file. This helps keep our code super clean and easy to follow, especially if we're working on a team with others.

I've learned a ton and will continue to develop in the world of Javascript. This is only the beginning!

Discussion (0)