A Change of Pace: Javascript
Just when I began feeling more confident in my skillset involving Ruby, we began our fourth phase learning the unknown frontend concepts of Javascript. This was the most challenging project thus far not only because Javascript’s syntax was completely different than Ruby’s but also because Javascript code can run asynchronous and synchronous. The main focus of this project was to use Ruby as an API on the backend and use Javascript on the frontend with three AJAX calls, Object Oriented Javascript, and no page refreshes at any time.
I decided to make a single page application to track songs that a user would like to learn on the ukulele. I picked this idea because I have been teaching myself how to play ukulele for many years now and in the process of doing so, I’ve been kept a folder in my bookmarks bar filled with links to Ultimate-Guitar.com tabs. I figured, why not make an application to store all of these chords in one place? That way, I could refer back to it later and be able to see the songs I already know how to play or that I would like to learn. It’s almost like a musicians binder filled with sheet music, but instead, on an online format.
I started this project getting the Ruby on Rails backend set up very quickly so I could focus on the Javascript side for the rest of the way. I realized coding everything for Javascript in index.js was not the best approach compared to maybe just starting off using OOJS from the beginning. To my defense, however, I was already feeling anxious about starting the project and I came to the conclusion that safest route would be to progress incrementally to make sure the functionality works properly first before making any big changes. Taking the long route definitely extended the amount of time I spent creating this; however, I did learn a lot in between while trying to transition all my code to their own individual classes with separation of concerns. I even restarted my project from scratch after “finishing” the first repo I did, because I wanted it to be better and less simple looking (even though it was fulfilling the requirements).
I had many issues during this project, but overcoming every one of them felt very rewarding despite the frustration in the moment. One of the issues I had while converting all my code to classes was that my genre objects were not rendering on the page like they were before when I had all my code in index.js. I was throwing a debugger everywhere until I reached the part of my code where I knew the problem was occurring, my fetch call, fetchGenres(). Fetches run asynchronously, meaning my renderGenres(), a synchronous function, was running instantaneously before the fetch resolved; meaning that since the fetch was not completed the only code my renderGenres() could complete was:
ul.innerHTML += `<h1 id='genres-header'>Genres</h1>`My renderGenres() didn’t have any javascript objects to work with and render, which is why I shouldn’t have expected it to show! I’m really happy that I went through this obstacle because it was definitely one of the major differences in this coding language, unlike Ruby where we expect our code to run line by line in the order it is in. This is one example of why it’s important to understand the way Javascript works behind the scenes. Each fetch plays a key role in this project because each one is either requesting information from my API backend or requesting to post/update information to my API backend. It’s important that once a fetch is made, it’s promise needs to resolve so JSON can be pulled from the response object and used in Javascript land like making new Javascript objects using pre-made class constructors for each model. Now I realized I could’ve used “await” to fix this issue with my async fetch call; however, I decided to find or create by each genre first and call renderGenre() on that genre right after it. On the bright side, knowing that “await” pauses an asynchronous function until the request completes, then the response is assigned with the response object of the request, is very helpful knowledge for later! I also could’ve solved the issue by calling another .then to render all the genres of the Genre class:
.then(() => Genre.renderGenres())I thought calling it on each specific genre being found or created was better than just calling it on the whole class.
