The Worst Programming Mistake I've Ever Made: An Ode to Vue Components

It must be said up front that the reason this is the worst programming mistake I have ever made is because I am currently working on my final capstone project before graduation. The bar of "worst mistake" is extremely, painfully, agonizingly low. The bar is basically on the ground.

Now before we get to the meat of it, you might need just a hair of backstory. As mentioned previously, I am currently working on my final capstone project before graduation. A team of three students and I are building a family reading log from the ground up. It's an opportunity for us to sharpen the skills we've learned, Google a few new tricks, and build a real, functioning, full-stack web application. I am super pumped about this project for several reasons. The first reason is that I love reading. Second, I have an absolutely amazing team to work with (the communication is so choice and the jokes are bottomless). Lastly, I have been appointed lead of UI/UX (user interface/user experience) and branding.

So.. onto the good stuff. My mistake. I am currently working in Vue, a JavaScript framework, but this mistake could really transcend other component-based language. Essentially, I wrote all of the code for one of my pages as a view rather than a component (a "view" in Vue is often referred to as a page because that is essentially what it is - a page of your website, app, etc. Example: the page you are reading this blog post on). Now, to someone who isn't in the business of writing code, or is very new to the industry, you might be thinking "well, what's wrong with that? It makes sense to have all the code for one page in one place". Before I dove head-first into this deep and ever-expanding abyss, I probably would have thought the exact same thing. Let me use one of my favorite topics as a metaphor for why breaking down your code into pieces makes for a much cleaner, and maintainable program.

Picture a household with two parents and two children. We'll say child no. 1 is four-years-old and child no. 2 is one-year-old. The parents love drinking coffee in the morning so they decide to bundle up their clan and walk down to their local coffee shop that only sells organic, fair-trade coffee and vegan, locally-sourced, gluten-free pastries because they are just so trendy and hipster it hurts (for the record, I'm a sucker for a good local coffee shop that sells organic, fair-trade coffee and vegan, locally-sourced, gluten-free pastries). The parents both order a mocha latte and once their nice, warm cups of bean water are securely in their hands, they set out for the nearest vintage shop or record store. On the way out the door, child no. 1 sniffs out the chocolate in those recycled, bio-degradable cups and starts jonesing for a taste of the good stuff. Meanwhile, child no. 2 is ready to take a sweet little baby nap and needs a bottle of warm milk.

So let's break this down a little bit. For the sake of staying on topic, we're not going to dive into why these fictitious parents didn't purchase any tasty treats for their children or why, for some reason, they weren't already prepared with a bottle for their child who was nearly ready for a nap. We're going to stick with our metaphor. The lattes are the final product, or the view/page, made up of espresso, chocolate syrup, and steamed milk all mixed together in one eco-friendly cup. Both of which are fine, whole, complete, and functioning on their own (not to mention delicious). However, I now cannot use the pieces or ingredients to fulfill other needs (like filling baby's bottle with just milk or making a nice glass of just milk and chocolate syrup for a toddler). One way to solve this problem (aside from just ordering them from our hipster coffee shop - stick with the metaphor!) is to purchase the individual ingredients and mix them as needed or in different combinations. The parents could brew their own espresso, use milk from the fridge and possibly even have a few other flavors of syrup besides chocolate if they really wanted to get crazy. The possibilities are endless! Cappuccinos, americanos, macchiatos, oh my!

One of the main benefits of breaking down your code into pieces is to make your individual pieces reusable and more maintainable (if the milk goes bad, all you have to do is replace it rather than everything being spoiled). Obviously, you cannot reuse milk or other consumable ingredients so let me tell you about what I wish I had done (and will have to go back and fix) in my program. One of the features of the application is being able to add a book to your library. Easy enough, right? I wrote and styled a page that allows you to add a book to your library. Done. Except not really. Another function of the program is that users can log reading activity. Also seems pretty simple right? Well, users indicate which book they read when logging their activity, but what if they forgot to add the book they're reading to their library? They would have to stop, navigate to the page to add a book, add the book, then go back to the page where they log their reading activity and start logging all over again. Bulky, time-consuming, and annoying. It would have been better if we had written the "Add a Book" feature as a component. It could have been alone on a page, but it also would have allowed us to reuse that code and add a feature that if they don't see the book they want to log activity for from their list, they could add it to their library from the same screen.

Some of the two biggest and most important principles in writing software are DRY (Don't Repeat Yourself) and OOP (Object-Oriented Programming). I broke both of them. Sign. I'll write more about these principles later but, for now, the world can laugh at my rookie mistake.

Peace out, Girl Scout!

Sarah :)