Integrating JQuery Front End to my RoR App (I HAVE THAT!)

The Beginning

For this final project, I decided to turn my Rails app, I HAVE THAT!, a community lending app, into an app with JQuery front end. To read more about the app and its features, click here..

I struggled quite a bit with this project. One of the biggest challenges I had with this assignment was a theoretical one. Why and on which page views should I integrate a JQuery front end and what reasoning and implications would my choices have on the user experience while fulfilling the project requirements. The next mental hurdle I had was in thinking through how to adjust already exisiting code that wasn't written with a different front end integration in mind.

I wrote down each question in a bullet point list:

• What page views can be replaced with JQuery and AJAX to optimize user experience?
• Will my JQuery front end replace my rails front end completely?
• What implications will my choices have on my app as a whole and user experience?

With these questions in mind, I started by watching some video tutorials from the wonderful Tech Coaches of Flatiron School:

• Submitting a Form with AJAX
• JQuery Office Hours
• JQuery JS API Lab

The Process

Watching these videos gave me a good idea of where and how to start building out my new Javascript (JS) front end. The first thing I decided to do was to map out which page views I wanted to dynamically load on to the DOM.

The 'Community' page (users#index) in my app lists all the Users of the app and their location. Each username was linked to their users#show page and clicking on the link would redirect you to that page which displayed the items the user has listed for lending. I knew I wanted to hijack that click event and use AJAX to display the users' items and to add a NEXT button dynamically so that each time the button was pressed, the DOM would update to display the next users' information and items.

I made a list of to-dos to accomplish this task.

1. Generate Users Serializer
2. Generate users.js (delete users.coffee)
3. Make to inject data in the application layout.
4. Hijack click-event.
5. Make AJAX request for data. *Edit Users Controller show action to render JSON
6. Parse Data - maybe create Class and prototypes?
7. Inject data into appropriate along with a button for NEXT

   I then made a list of to-dos to accomplish the task of hijacking my NEXT button and displaying the next user.

   1. Figure out where to put the method or function of getting the next user (user.rb, users.js, users_controller?)
   2. Figure out the method or function of getting the next user
   3. Pass in the user :id to the NEXT button function
   4. Make an AJAX request for data
   5. Delete DOM
   6. Inject new data into DOM with NEXT button.

   Once I accomplished this, I moved on to my next task and so on until I had created an app that was very close to a single page app (SPA) - other than my login and logout pages, my app was all JQuery and AJAX with no redirects.

   The Takeaways

   Upon creating a very close cousin of the SPA (see below), I started to realize the limitations of SPAs and read a few articles (like this great one) that exposed the shortcomings of what I had coded. I also read this GREAT article about the best uses of AJAX (the when and where of AJAX use) and the disadvantages of using AJAX, an article I wish I had read before starting this project!

   The other big takeaway is that planning is invaluable. For example, I had a list of items on my items#index view that rendered each item by name, description, the user the item belongs to, and if the item was available to borrow. I had the item name in

   and the rest of the information in

   . So when I decided to have a search field, because I had other text with

   in the DOM, I had a difficult time isolating the item name

   for my search function. And even though the fix was relatively painless - I had to put the

   inside a

8. - it caused me to go back and code that in when I should have had a list item in a
9. as basic protocol. You never know how your app will need to expand (what it will need to integrate, what functionality will need to be added) and it is always good practice to be neat, write clean code, and be smart about your HTML markup (another big takeaway - give ids or classes to your s)!

   The thing I love about coding is that there is such a wealth of information out there because there is such a generous community of coders and more you look, the more there is to learn. And while this can feel overwhelming at times, it also feels so generative and exciting.

   Here's the video walkthrough of the final product.

   Onward!

   Happy coding.