/ capstone

Capstone Week 21

This week is spent fixing the bugs that existed in the ReactJS version of the project, some bugs came from the migration to VueJS.

Because of the asynchronous nature of the application, there are some logic/race condition flaws when loading data. This causes situations where the data would not load correctly.

Because this is caused by network latency, it is difficult to reproduce the issue reliably, which cause me to rethink about flow of operation. However, the solution is relatively trivial once I've figured it out and find the corresponding methods to make it work.

VueJS lifecycle only updates the data when it has been created/destroy; which uses the immutable concept. The view does not update when an object has been updated.

View will not updated to reflect new value of 22, because object has been mutated

var a = [1, 2, 3]
a[0] = 22

View will be updated as Javascript will recreate this object.

var a = [1, 2 ,3]
a = [3, 4, 5]

Previously the method of fetching data works by pushing the data whenever data is retrieved from the API. The following pseudo code represents the way it used to work.

# pseudocode
var allFetchedModules = []
var moduleList = getListOfModules()
foreach ( moduleID in moduleList) {
    let module = fetch(moduleID)
    allFetchedModules.push(module)
}

function fetch(ID) {
    return async data(ID)
}

The issue with this is that by sending a chain of fetch requests, each request may return out-of-order because of network latency.

However, I need to calculate values like, currentModule, completedModules, which relies on having a numbered list of modules that does not change. This out of order fetching causes those logic to fail. There were previously attempted solutions but they did not work for one reason or another. The final solution that I've settled on is as follows.

The fetched list of modules will always be in the correct order. I know that the request are sent out in order, only the response are out of order. Instead of doing a push operation, I write into the index of the array directly.

However as shown in the above code examples, VueJS will not update the view which cause the application to appeared to have malfunctioned even though all the data is loaded correctly. This is when I discovered the special VueJS method that resolves this issue.

Vue.$set(ARRAY, INDEX, OBJ)

This is a framework specific method of mutating array objects while still activating it's lifecycle hook to refresh the view. Thanks to this method, all the modules are able to load in the correct sequence.