0

Background:
I was working on a personal project to create an Task Checklist Web App. I worked on the code with vanilla golang and javascript. It is a very simple app with limited capability. I've used a json-rpc like endpoints for the application.

Code and Implementations:
Endpoints:

/getTsk GET
/addTsk POST
/delTsk POST

Html implementation of the ajax updated div:

<!-- Pending task loads here -->
<!-- On reload, everything in this div is deleted -->
<!-- The tasks div are then added into this div -->
<div id="pendingTasks"></div>

Ajax Javascript Code to add new task:

function saveTasks(value) {
let request = new XMLHttpRequest();
request.onreadystatechange = function () {
    if (request.readyState == request.DONE) {
        if (request.status === 200) {
            reloadPending(); //If sucessfully added task, then reload the corresponding div
            showAlert("New Task Added.", "alert-success");
        } else {
            showAlert("Failed to Add New Task, Please try again later.", "alert-danger");
        }
    }
};
request.open("POST", ep_prefix + "/addTsk");
request.setRequestHeader("Content-type", "application/json");
request.send(JSON.stringify({ description: value }));
}

Ajax Javascript to reload the div after sucessful addition of task:

function reloadPending() {
let content = document.getElementById("pendingTasks");
content.innerHTML = "";

makeGetRequest("GET", "/getTsks", initPending, showEmptyPending, "?status=0"); //Get all the task from backend again
}

Population of task elements in the div:

//Population of the entries
let fragment = document.createDocumentFragment();
console.log(tasks.length);
for (let i = 0; i < tasks.length; i++) {
    console.log(tasks[i]);
    let taskElements = createTask(tasks[i], "pending");
    fragment.appendChild(taskElements);
}
document.getElementById("pendingTasks").appendChild(fragment);

Problem:
I've implemented my app in such a way that, when a post request is sent to the endpoints, it will only return a success code(http 200) and I will have to make another ajax get request to get the data from the backend and update the DOM element, which causes flickering and is not smooth and also not practical, considering if I have 100 elements i will need to get all those elements again just to add one element.

Question:
How should I design the endpoints or my web application such that the addition of a new task will not require a full reload(Get all task again from backend) and update of the div?

Thank you.

  • Nitpick (and I'm just curious): why would you name your endpoint /getTsk instead of /getTask? You don't like vowels? ;-) – Mael Nov 21 '17 at 9:39
  • Also, have you thought about using GET /task, POST /task, and DELETE /task instead of using POST and putting the action in the endpoint (like /delTask for, I assume, deleting tasks)? – Mael Nov 21 '17 at 9:41
  • @Mael First of all, i do not hate vowels, and i probably should have name my endpoints better xD. As for the use of REST api, i did consider them, as I actually learn of them first before the json-rpc like api. I was slightly lazy at the time and went for the easier(?) way. – Alphonsus Chen Nov 21 '17 at 9:54
  • 1
    What data exactly are you're fetching from the back-end after adding the task? If you just added a task through the client, then it already knows the content of the task, so there's no need to fetch anything just to display that... – Sean Burton Dec 21 '17 at 14:58
0

You can "cheat" and just not reload the list of all tasks. I assume that your list of pending tasks looks kind of like this:

[task #N (created 2017-11-21 09:55)] Ask question on SE

What I would do is to just include the task ID (the #N part) in the response generated by the POST request. Then, you would have all the data required to push just this one task to your list of pending tasks - no need to reload them all.

Mind you, I am no expert when it comes to REST API or Web application design, but I generally try to make life easier for myself. If you know that you'll need some data, design your API calls to return it to you. When you call a function (or issue an HTTP request) that creates a resource (a task, in your example) design it to return a resource ID for the thing it just created.

Avoid work when not necessary: if you just added one task, why would you reload them all? This would reduce the flickering, traffic, and delays.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.