AsyncQueue: Building a UI with AsyncQueue
This example illustrates how to break up the initial rendering of an application UI into queued code chunks, yielding back to the browser regularly to draw portions of the UI as they are ready.
Note: This method is mostly useful for apps constructing complex DOM structures. While the DOM structure contained in this example is not complex, some artificial delays were injected to simulate process intensive operations that would normally cause such delays.
The module will be inserted here. Click the button below.
The Markup
The markup will start with just a place holder element for our application.
And will end with the following markup (indented for readability):
The CSS
Some CSS is added to make it look like an application.
Example application structure
For this example, we'll create a simple application that we'll contain under the MyApp namespace. The basic structure of the namespace will be as follows:
The MyApp.render function will add the rendering methods to the MyApp.q AsyncQueue and set it in motion. Each of the methods will be executed in turn, yielding back to the browser between steps. So as each piece of the UI is assembled, the browser is then given the opportunity to draw it.
If there are any process intensive operations in the rendering steps, the UI generated in all previous steps will have been drawn by the browser before the heavy lifting begins. This way, the user will be shown a part of the UI and can begin to develop an understanding of its structure and operation while the rest of it is being constructed.
A note on artificial delays and animation
In this example, rather than include code that would spike your CPU, delays were simulated by inserting AsyncQueue callbacks with a timeout and a function that does nothing. There is a distinct difference between a delay caused by code execution and a delay caused by setTimeout. In the former case, the browser is busy and likely won't respond to user events (such as clicks) until the executing code has completed. In the latter, any number of JavaScript event threads may execute to completion in the intervening time.
The rendering methods include animations courtesy of Y.Anim. Anim is similar to AsyncQueue in that it also works by scheduling a callback (the application of the easing calculation) for repeated execution, yielding to the browser between each update. However, Anim's schedule lives entirely outside the AsyncQueue's schedule. Stopping or pausing an AsyncQueue will not stop or pause a Y.Anim instance that is run() from an AsyncQueue callback. Similarly, if a callback starts an animation, AsyncQueue will not wait for the animation to complete before executing the next queued callback.
Full Script Source
The complete code for this example includes the artificial delays added to MyApp.q in the render method.