Busy City

HTML

CSS

JavaScript

SASS

WebPack

The Thought Process

For this project, I decided to stay focus on the fundamentals. The only technologies I used were HTML, CSS, JavaScript, SASS, and HandleBars. I decided to not use a JavaScript framework for this project because I was working on this project while reading Eloquent JavaScript (a fantastic book on the fundamentals) and I decided this project would be perfect to reinforce my learning. SASS was used to keep my CSS tidy due to features such as nesting, variables, and mixins that make working with styling much more pleasant. Lastly, Handlebars was used to create reusable templates, which make manipulating the DOM in vanilla JavaScript much cleaner and convenient. As for tooling I used WebPack, Babel, and a couple of WebPack plugins to bundle, minify and transpile my code for performance and backward compatibility.

The most difficult part of this project was building a data structure that would effectively handle the data for each train. The challenge was broken down into three sub-challenges: adding trains to the data structure, finding and updating existing trains, and removing inactive trains. In my original project, I was simply grabbing data from the CTA’s REST API, checking it against an array of objects (each train being a separate object), and either updating the existing train or adding a new index to the array depending on it the train's ID had already existed. Looking back at it, this algorithm was running in O(n) time, and this could be improved. For this project, I decided the hashmap was a much better solution. My final solution was to store all of the trains in an object, with each train’s ID number as the key of the object, and the corresponding data as the value (stored in an object). This results in more memory usage, but that was a tradeoff I was willing to make considering the small amount of data associated with each train.

I am glad I opted for using vanilla JavaScript for Busy City. While working on this project I learned and solidified many key aspects to building bigger JavaScript projects such as importing and exporting modules, ES6 Array methods, the spread operator, and so much more. I am a firm believer that too many developers dive into frameworks before fully understanding JavaScript, and this project put me in a perfect place to start diving into frontend frameworks and all of the other cool technologies that come along with them.