JavaScript SPA

Posted by Ariel Ibarra on January 8, 2021

Building a single page application with JavaScript and Ruby on Rails has been a wild ride. Back when we learned Rails, I remember my cohort lead exclaiming how exciting it was that we had moved into building full stack applications and how far we’ve come from day one. At the time I didn’t fully understand the scope of what it meant to have moved into full stack programming but as we cruised through JavaScript the significance of it finally hit me. Since JS is completely frontend I finally understood how Rails provides the ability to build frontend views but can also be utilized strictly as a backend using, the ever so popular, JavaScript to build the ‘views’.

JavaScript has been really fun to learn! That being said, it has also been a challenge to learn as it is so different from the Ruby and Rails framework. Learning how to manipulate the DOM content through the ‘inspect’ property on any webpage was probably my favorite part about getting into JS . I had some fun messing with friends by clearing their social media pages or adding fake content but that didn’t change the fact that learning JavaScript still felt like learning a foreign language after coming from Ruby. It wasn’t until after getting into the nitty gritty of AJAX, using fetch, and object orientation that JS started feeling more familiar. Coming from a Rails background that utilizes CRUD techniques helped me understand how JavaScript was able to control what’s displayed on the web page and when.

Building Brewery Buddy 2.0 was really where things came together. I create the original Brewery Buddy app using only Sinatra and I wanted to expand on the idea with all the new skills I had acquired. Building a Rails API backend with a JavaScript frontend felt pretty scary at first but as I began putting together the API everything else seemed to fall into place. After seeding some data to the API I was able to utilize the Rails serializer capabilities to create the JSON I needed to begin creating my frontend. From there I was able to fetch the JSON from the API and return the ‘promise object’ asynchronously to my web page. Of course, like all projects, there were times that I got stuck but overall building Brewery Buddy 2.0 was a great learning process and I’m pretty happy with the end results.