Coming from the comfort of building an app with Ruby on Rails, working with Javascript can feel like stepping into the wild where anything is possible. To be clear, Javascript is everywhere, its power is undeniable, and to be a web developer means to work with it frequently in a variety of settings. With this sort of prevalence and openness comes a caveat though. Being able to do so much with a language introduces a vast amount of choices to make when it comes to building something from scratch. For this particular project, the goal was to build a single page application (SPA) using vanilla Javascript and a Rails API as the backend. This was certainly a challenging project, but the upside is that I learned some much needed skills as I navigated uncharted territory. Learning to love Javascript can be an arduous journey, but it is well worth it.
One of the more intimidating aspects of this project was the dearth of information from Google when it came to building SPAs using vanilla Javascript. Discussions and solutions for popular frameworks and libraries such as React and jQuery are everywhere, but translating that to something simpler is difficult to find. This is a blessing in disguise though, as it requires you to really grasp the fundamentals of Javascript and use its native power to build an app. I highly recommend checking out Javascript: Understanding the Weird Parts on Udemy. This is a great course that looks under the hood of Javascript and explores what is actually going on. Having a deeper knowledge of these things immediately helped me as I was working on this project. More on that later. First, a few words of advice for building a SPA using plain Javascript.
I think one of the most helpful approaches for building a SPA is to embrace the challenges of truly thinking like an engineer. Initially I had a lot of separate working components in my code, but the question quickly became — what exactly do I do with all of these parts? How can I connect them in a way that makes sense and extends functionality? Having a precise user story really helps clarify what to do with different aspects of your code. Consider exactly what you want to happen from the moment a user views the landing page to every subsequent action thereafter. Remember, a single page application does not have different routes or views — everything is happening right in front of you. This enables you to really delve into the details of how to implement various components and data you want to show throughout your app. This takes time to figure out. However, your plan will be a welcome refuge when problems or bugs appear in your program. Trust the process!
Now for some thoughts on the oddities of Javascript. I’ve been working with the language for over a year now, and there are still times when I get stress dreams trying to make sense out of its complexities. Whereas Ruby can be incredibly readable and programmer-friendly, looking at Javascript code can sometimes be mind boggling. I’ve found that diving underneath the hood and seeing how the Javascript engine and syntax parser work is definitely a must to become more fluent in it. To start, I think it is crucial to understand that there are two phases in which Javascript code is translated and executed. When the syntax parser reads through code you have written, variables and functions are set up in memory in what is known as the creation phase. The term hoisting is used to describe what happens during this first phase in which the stage is set for the code to run. The next phase is called the execution phase, in which the code is executed synchronously line by line. Having a mental image of both phases really helps in constructing your code and being able to figure out what is happening when errors appear. Another aspect to be aware of is the relationship between objects and functions in Javascript. Functions are simply objects and are known as first class functions since they can be passed around like any other data type. This is incredibly powerful as functions can move around easily and be implemented wherever needed. But again, understanding the context in which a function is called and what is created for you by the Javascript engine during the execution phase (e.g. ‘this’, global object, and the outer environment) really goes a long way in grasping what your code is doing. As I mentioned before, Javascript is an incredibly dynamic language, and utilizing it in an object oriented fashion is no different. This enables you to connect classes and objects together in a meaningful way that makes implementing your code much more straightforward.
Overall, building this app was an incredible experience and it set me on a path to learn so much more about the beauty and power of Javascript. There is so much to know about the language and I’m barely scratching the surface, but there is definitely a feeling of accomplishment as my project took shape and emerged as I had hoped. Check out my app — Brew Log — on Github and enjoy the journey into the strange and wild land of Javascript. Cheers!
