Rails App w/ jQuery Frontend

I really enjoyed this project. It was basically just a revamping of the last project we’d done, replacing the front end ERB with JS and JQuery, and accessing the database through a Rails API instead of just using ERB.

The most important part of this project for me was understanding the concept of rendering what looks like a new route, but is just dynamic JS, made possible through an Ajax call to a backend Rails API. It would never have occurred to me to simply wipe the entire DOM clean and replace it with the content that makes up a new page, instead of loading the page itself from scratch. I was also struck by how much faster the loading time was, using this approach.

There were a couple of less abstract things I learned as well, specific methods and the like. The biggest deal was probably learning the alternate syntax for ‘.on’ that allows us to┬ádelegate an event to an element higher up in the DOM tree, usually ‘document.’ In other words, I learned the difference between this:

$('#id').on('click', function(){});

and this:

$(document).on('click', '#id', function(){});

The second option became extremely important for making listeners work when they were loaded dynamically. In this situation, the listeners had to be available pretty  much for every page on the app, since they all had access to the customers index that I rendered dynamically, without changing the route.

I also learned about history.pushState, which is necessary for making the URLs in the address bar look right, even if we didn’t technically use that URL to load the page.

Near the end of the project, I was creating a a dynamic version of the customer show page, and it struck me how silly it felt to be appending element after element to the body of the page, building it up one ‘plus equals’ at a time, in a function that kept getting bigger. It occurred to me that this was the sort of thing that React components were created to fix, and it got me pumped up for the upcoming React section of the course.