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
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)