Tea Leaves with jQuery
concepts & coding practices
Last time I wrote Tea Leaves with Rails and basic front-end. In order to have content loaded more smoothly, I updated the old Tea Leaves app using jQuery and JSON API.
- Write todos in NOTE.md
- Code to meet the requirements set in NOTE.md
- Review NOTE.md
- Display index of teas on categories show page, fetching the tea info via AJAX GET request, with backend rendering in JSON format, and then appending the tea info to the page.
- Allow a user to browser through categories by clicking “Next” and “Previous” buttons on the categories show page, with the next/previous category being fetched and rendered via jQuery and AJAX.
- JSON API has has-many relationships. For example, when I render the next category info via AJAX call, I also have the list of teas in that category rendered through the API.
thoughts: working on existing projects
Adapting an existing project to another language framework proved to be more challenging than constructing something new from the ground up. I googled so much because my problems were so specific to the app setup. I couldn’t write my app in a simple way to avoid complications. For example, I had to research how to dynamically listen to a list of buttons, not just one; I had to be mindful of all the parameters and object relationships that were passed around in each js call; etc. However, it’s probably the more common way to code. This experience is very helpful to see what the workflows would be like.
To quickly understand the structure of an existing project is the key. For a project that was originally built by myself, it still took me quite some time to familiarize with the web app. I interacted with the app in the browser, and then I went back to the codes to see how the corresponding functions were written and what variables and parameters were involved. That covered 80% of the scenarios.
What about the other 20%? A trick I learned during this process of working on existing repo is to write concise comments along with writing functions. It may seem like extra work in the beginning, but these comments serve three purposes:
1) Push me to define the purposes of the functions before they’re written out.
2) Make it easier for other coders or in this case, myself, to understand what the following lines tried to accomplish.
3) And most importantly, it helps me to stay clear-minded and delegate extra tasks to other functions. We all know the feeling of watching a function growing to a twenty-line fat existence that tries to do a thousand things. Not good.
how to work with current view pages(formatted) and JSON data
This can be a challenge. The way I handled it is, first, to pay close attention to the parameters and object relationships; and second, to have the pages rendered through previously formatted html view files and incorporate them into new js templates.
Here is a workflow I developed in this project to adapt a non-js project to jQuery & AJAX with JSON API:
- Review current views and decide which elements I would like to load via AJAX call.
- Write a NOTE.md with a list of basic tasks to keep myself on track. Use pseudo codes or plain English to define what I try to accomplish. I recommend limit the list to 5 items for a starter.
- Add serializers for JSON responses. Adapt controllers to have them render JSON formats when requested.
- Write out the get/post function and use debugger to look at the response I get back from the calls. Save the response for templating later.
- Delegate the data-loading part to another function. Don’t write everything inside the listener functions. It would make debugging difficult.
- If all is well, I write my Handlebars templates now. If I am not sure about something, I would go back to the original views for reference. I tried to maintain a consistency between the original views and the new ajax looks.
- Render that response! Move on to the next task in NOTE.md. Repeat 3–8 untill all requirements are met.