Javascript x Rails API
In one year I conquered a brain tumor and learned how to build a Javascript x Rails API. Pandemic#goals.
My most recent project for the Flatiron School required me to build a single page web application with HTML, CSS, and Vanilla JS with a Ruby on Rails backend. This was undoubtedly the most challenging project to date.
The interactions between the client and server happened asynchronously and had to use JSON (javascript object notation) to communicate with each other. We had to use Object Oriented Programming to capture data behavior and functionality. The backend had to include certain relationships between the data (i.e. one-to-one, has many, etc) and implement CRUD functionality. After watching a few other students demo videos on youtube, I decided to make a trivia app based on my favorite tv show, Arrested Development.
Rails
Setting up the Rails backend was not too difficult or time consuming as we had practice with doing so in the previous project. After planning out how I wanted my project to look and operate, I created my models. There is a user, a question, and a round model. A round has many questions, and a question belongs to a round. Then I generated the Controllers so that they would meet the CRUD requirement (Create, Read, Update, Delete). The controllers all rendered JSON to the browser so that the client and the server could communicate. Rendering the data as JSON would allow the front-end (Javascript) to do stuff with (i.e. render a round of questions that a user can answer in the trivia game). I also installed Rack CORS so that AJAX calls could be made between the client and server.
Front-End (HTML, CSS, and Javascript)
In a quick summation, the user experience in this trivia app is that the user is greeted with a prompt asking them if they would like to play a game. If they decide to play, they are given some rules/directions to play the game, and then the game begins. I decided to use a form that would render out 3 rounds of 3 questions which would be easier to build than making a request for each individual question and rendering one at a time to the browser. Once they fully complete each round (the app prevents a user (using preventDefault() from completing a game if they do not answer each individual trivia question), their results are rendered to the browser. They are then given the option to play again.
I separated my javascript into 3 individual sections to keep things organized and readable. Models, to create Javascript objects that mirrored the models in the Rails database. The Repositories, which were responsible for making AJAX happen (all fetch requests were made here). The views, finally, were responsible for rendering the data from the API and dynamically created HTML. This helped me build my program more efficiently as I was getting lost in a sea of endless functions on one main.js file prior to separating my code based on concerns. On main.js, I placed the logic that pertained to more user interface content that was separate from the communication from the front end to the back end. Learning how to structure my code logically changed the entire process of building out of my project and made things much less stressful. Dynamically generating HTML from a Javascript file is also a better way of changing the DOM than filling up a HTML file with an abundance of elements. It’s better practice to keep an index.html file with the bare bones of needed HTML, the rest can be done with Javascript when it is appropriate to appear in the user interface. The significance of good architecture in coding was the most important thing I took away from building this project. I had a multi month hiatus from my last project (again, brain tumor), but now that I am back up and running, I am excited to take everything I learned from this unit and attack the final React project.
