On the Shoulders of Giants
The further along I get in Flatiron School’s Software Engineering Bootcamp, the more I am blown away by the world of programming. When our cohort was introduced to Object Relational Mapping (ORM) near the start of Phase 2, I was immediately impressed by the idea of translating classes into database tables, where each instance of the class represents a row in that table. With this knowledge, I began to see classes in an entirely new light — they became more than just the elements that create an object (in Object Oriented Programming), they now represent tables of data, and they bring those tables to life. The genius meta-programming of ActiveRecord allows these tables/classes/objects to interact and bump shoulders with each other within your program. And to take things even further, we were introduced to the Model/View/Controller (MVC) application structure, which completely changed my perspective on programming altogether.
In just a couple of months, Flatiron School has provided my cohort with the knowledge to be able to create a functional web application. Our Phase 2 Project utilizes Sinatra and ActiveRecord, as well as the MVC structure. I decided to take the idea that I had for my CLI Project, but instead, write an application to bring the “Hogwarts Social Network” to the web browser.
Everything is Connected
To start things off, I found it helpful to draw out the structure of my models. I’m very much a visual learner, so to have this sort of diagram in front of me allowed me to connect the object relationships and how they could interact with each other in my application. One of my “Aha!” moments during this project was when I realized how you can use ActiveRecord to literally bring every object in the program together. Everything is connected!
One of the bigger mental hurdles I had to wrap my head around was creating a “has many” to “has many” relationship between two objects derived from the same model. The idea was to allow a Wizard to add other Wizards as friends, and the association would be reflected from both Wizard profiles (the Wizard who added a friend, and the Wizards who were added as friends). I understood, that when creating this type of association between two different models, you would need a “join table” to assist in their relationship. When applying the same idea to just one model, I realized that it’s basically the same concept — you would still need a “join table,” but you can actually tell ActiveRecord which model to look at for the specified attributes. Here’s where specifying the “class_name” and “foreign_key” comes in handy.
Once I finally got the hang of how ActiveRecord is able to bring my objects together, I suddenly had the confidence to add more models to my application, and I could see how they would all connect even before creating the user interface or the controller routes. Wizards can have many Posts and many Comments, Posts belong to a Wizard and can also have many Comments, and Comments belong to both a Wizard and a Post. I then realized that if I wanted to add a “Like” or “Upvote” feature, it would basically have the same structure as the Comments model, except we’d just reference its size, as opposed to a Comment’s content. With all of my associations defined, I finally felt comfortable and ready to build my Controllers and Views.
At this point, my brain was deeply inspired and I found myself in some type of programming flow — I just kept on coding for hours straight! I’ve had some experience using Bootstrap in the past, so developing the User Interface in tandem with the logic of my routes went by rather smoothly, and before I knew it, I had a functioning web application.
SQL Query Optimization
With my project nearing completion, I noticed my Views were running a bit slower in the browser — it was taking quite a bit of time to load each page. With some assistance from my Cohort Lead, we discovered the issue was due to the number of SQL Queries being made to the database when loading each route, it was somewhere around the 40 to 50 range for just one page. I hadn’t realized it before, but each time you make a reference to an association, it essentially executes a SQL Query. Because of the fact that I had multiple Upvotes and Comments for each Post loading on the same page within an enumerable method, the number of my queries was massive, more massive than it needed to be. To fix this issue, the .includes() method allows multiple queries to be condensed into one large query. Better to have one massive query than a massive number of queries!
With this knowledge, I was able to update each of my controllers using the .includes() method, and like magic, my application was performing better than ever.
Model, View, Controller
One of the greatest takeaways from Phase 2 was definitely the MVC application structure, paired with RESTful Routing. We’ve learned that an application should have the ability to Create, Retrieve, Update, and Delete its resources directly from its interface, and MVC provides an incredibly clean solution to keeping your logic separate and organized. In a nutshell, Users interact with your Views, Views are connected to your Controllers, your Controllers handle the Models based on specific routes, and your Models interact with your database. Once the database has been updated, the data is given back to the Views where the User can now interact with the updated data. Awesome, right?
I’m so grateful to be able to stand on the shoulders of the giants who developed such a scalable and reusable structure. This is knowledge that I will absolutely bring with me in every application I work on moving forward.
Conclusion
Phase 2 has been an incredible month of learning — it really feels like Christmas came early this year. With all this knowledge from ActiveRecord to MVC, the programming world has never been more appealing to me. The range of possibilities just seems infinite, and with 3 more months left in this program, I’m extremely excited and ready to learn whatever amazing technologies they have in store for us next!
Hogwarts Social Network ~ Sinatra Edition
If you’re interested in viewing or contributing to this project, check out the Github Repo here. Additionally, the video below provides a walkthrough demo of the application:
