Using JavaScript Event Listeners👂and why JavaScript isn’t all bad

Learning JavaScript can be a challenging task. I’m currently learning JavaScript after spending six glorious weeks at Flatiron School working with Ruby. Ruby was a simple and clear language — JavaScript is much more verbose and takes a lot more lines of code to produce the same thing in Ruby. This has caused JavaScript to have many haters.

While I was among the haters, I’m slowly coming around to JS. Also it runs the web soooo I really need to get on board.

One important aspect of JavaScript is making the page dynamic without reloading. In a previous project that I worked in using Rails, we implemented a lot of the same functionality that once can implement using EventListeners in JavaScript. This represents one time where JavaScript is actually more concise than Ruby so let’s see how it works!

My Ruby project, which I created with hui wang, is a social events app. In it, users can add/delete events that they are attending. They can also follow/unfollow other users as well as have followers. To add and delete events from a user’s page, there were multiple steps involved.

Using Ruby

Screenshots from the Events app I created. Left is some of the code and the right is the actual page.

In my EventsApp (working title: “Let’s Have Fun Together” and can be shortened to “Let’s” for the hip people. I imagine users telling their friends that they found the event on “Let’s”. “Hey, how’d you hear about this?” “Let’s!”) a user can add and remove events from “their events”. You can see in the screenshot the “Remove” button under each event. On pages that have events you are not attending, you would see “Add to my events”.

To make this happen, here’s what we had to do:

• Create add/remove events actions in the controller
• Add routes for the controller actions
• Create class methods that define what will happen in controller actions
• Update views to include buttons that access above actions

This was a lot of work and left much room for error.

In the screenshot here, I copied the lines of code that were specific to our add/remove events. As you can see, it took 37 lines of code in two controllers, one class and almost every view. That isn’t very DRY.

Using Javascript

In this project, I was creating a Task Manager app with Roman Mullady where a user could create To Do lists with various tasks. The user could also delete their entire To Do List or specific items on the list. This project is still in progress so apologies for the lack of formatting. It’s “early internet chic” which is totally in right now. Seriously.

But I digress. For this project, to add/delete lists we had to:

• Create constants for the elements we were selecting (not really a ‘required’ step)
• Add event listeners to the buttons
• Create functions that fire when buttons are clicked

Much less steps! Also, even with the extra steps of setting constants, we only wrote 26 lines of code. JavaScript required less code than Ruby!

Let’s break it down.

In JavaScript, event listeners are basically functions that are waiting around for someone to come along and trigger them. In the example I provided above, the event they were listening for was a user’s click on one of the specified buttons. I also had event listeners for the specific tasks but I only included those for deleting a list to keep it simple.

By adding event listeners to my JavaScript code, I was able to accomplish the same goal as my Ruby code in a much more concise way. While my Ruby application was doing quite a bit more (making API calls, storing to the database, etc) I feel that I could implement JavaScript event listeners to simplify that code.

Also by using event listeners, I can change a lot more about my current code without having to go through all the different routes required by my Ruby project. In all honestly, I had to do a bit of hunting through my code to find everything related to my add and delete event actions (and it’s entirely possible there’s some more code, like my routes, that I didn’t include in my example). That’s not good.

In summary: JavaScript is a wordy language that can be quite difficult but it has much more functionality than Ruby and allows for a more dynamic page with less headache.

More reading about Event Listeners:

EventListener — Web APIs | MDN

JavaScript DOM EventListener — W3 Schools (I personally prefer W3 to MDN because W3 allows you to play around with the code using real examples)

If you enjoyed the article, I’d love for you to let me know by giving a clap! You can also see my code on GitHub or learn more about me professionally on LinkedIn