Sync with JS

When creating software applications a lot of developers prefer JS, it allows the user to see updates while JS is working through functions. It isn’t really rendering AND working through logic at the same time. However, it does give the opportunity to render data to the page when it is jumping between functions. Let’s see how it works!

I like to compare this to transportation. Let’s say that after each street an update is made to the browser.

Lets say for Ruby on Rails, you’re a passenger and have no clue of street names or where you are at and you have a personal driver. As you’re on the road, your driver wouldn’t call out every street that they pass and constantly be telling you where you are at or going to. You can however ask (or refresh the browser) to get (see) the update. Once you reach the destination, you finally see the end point (web page).

Now for using JavaScript, you’re a passenger who still has no clue of street names or where you are at, but in a public bus transportation. There are signs inside the bus and speakers that constantly say the streets you are at or approaching. You also get off the bus when you reach your destination. This is a great example of JavaScript doing visual updates on the website without you physically refreshing the page. Take a look at this diagram:

Ruby on rails will render the webpage once all the logic and code has been read, if an action is requested a refresh might be needed. Java Script on the other hand can render the web page in between functions, which allows us to see live updates and new information as we interact with the web page. Here is a diagram of how AJAX really works behind the scenes.

The web app is loaded and sends the first function to be used into the call stack. While the Call Stack is operating the first function, the web app sends the next one to the Call Back Queue, waiting for the Call Stack to be empty again. Once the Call Stack is empty, the Web Page is rendered with the current information. After the Web Page is Rendered, the next function inside of the Call Back Queue is added to the Call Stack. Any functions or data coming from the user interactivity, will be added to the Call Back Queue. The Web API are functions that are activated by the user interacting with the web app. Any functions called from any interaction will also get added to the Call Back Queue. The cycle then repeats itself.

Here is an extra example of expecting things to happen at a certain time but they sometimes won’t. There is a method called setTimeOut() that post pone certain functions after a certain amount of time(interval). Here are two examples of how it could work: the interval inside the time out function is set to 5 seconds(the 5000 = 5s) and the last column of seconds is the amount of time the function takes to process once it enters the “Call Stack”.

Here is a different example, with some changes to the seconds it takes to process:

This is the big difference between JS and many other programs. JS allows you to see a web page and any updates while you are still on it. On other programs such as rails, you would have to refresh or go to a new page every time to see the difference. JavaScript and its AJAX has clearly improved user interactivity and navigation.