chaq.rocks

CHAQ

There are lots of ways to build a web application.

But, let's unfold the one you're using right now, by finding simple, significant, and revealing patterns, in order of use, that can be used universally in all webapps.

Central Handler / Action Queue

(1) every webapp needs to:

(a) HARMONIZE with its ENVIRONMENT, that is, the browser ...

(b) and ensure a central point of origin for all its actions.

One solution is:

A queue of actions processed by a central handler.

Any webapp must return control to the browser after asking it to do something. Many frameworks hide this from you. But the result is often the same: unnecessary and confusing scattering of control flow among listeners and setTimeouts. A central origin for all action begins solve this problem.

Original site

CHAQ

    Before you see the central handler, 
    note how it is first called from HTML.


    <html>
    <head></head>
    <body id="body" onload="central_handler({'name':'start'});">
    </body>
    </html>

CHAQ

This is how it works.

The 'onload' call from HTML calls the central_handler
with one action name. 

(NB: this could actually be an array of independent 
 action names, which will be performed in a single-threaded 
 manner in current browsers, but future browsers will be 
 able to execute them in parallel.)

 'central_handler' will take that action name,
 and push it on the action queue. It will then
 launch processing on all the actions in its queue.
 So, setTimeout is only issued from one place in
 the entire webapp, and only to process.

 'process' will be explained in a moment. Here's what
 the Central Handler / Action Queue code looks like.

CHAQ

// ***************************************************************
var action_queue = [];
var the_action = null;

// ***************************************************************
// Called from initial onload, and any handler / listener that needs
// to launch some action for processing.
//
// Any action can be found as a global variable name in the 'essence',
// or central description.
//
// The parameter a can be one action, or an array of independent actions.

function central_handler (a) {
    action_queue.push(a);
    while (action_queue.length > 0) {
	the_action = action_queue.shift();
	var delay = 1;
	if ("delay" in the_action) {delay = parseInt(the_action["delay"]);}
	setTimeout(function() {process(window[the_action.name])},delay);
    }
}

CHAQ

You may not have noticed this in your development stack because it's hidden from you, in an attempt to simplify your development life.

I believe that, instead, it's good to see the fundamental technology that you are using.

CHAQ

The essence

The next idea is the overall structure of the program, stored in one place, kind of like its essence.

It's a central description of the webapp.

You could do that in many ways. To keep it simple, we'll do it here as native javascript structures: JSON objects.

CHAQ

Here is a central description, or essence:

var start =   [   
     {
         "feature":"card",
	 "id":"card1",
         "target_id":"body",
         "content":"CHAQ"
     },
     {
         "feature":"text",
	 "id":"card1_text1",
         "target_id":"card1",
         "content":"Central Handler / Action Queue "
     }
		  ];

CHAQ

Cascading Routers

	     So what is this mysterious function process() that
	     takes an array of json objects and creates a program
	     from it?
	     
	     It's a "feature router" which routes features like
	     "cards" and "text", or whatever you like,
	     to an implementation, the most repeated aspects 
	     of which are a combination of independent properties,
	     which are implemented through a "property router".

	     Any implementation of a feature that's more 
	     context-dependent, or unique, can be found in the
	     implementation details in either router, which are
	     called in order.

CHAQ

function process(obj) {

    // recursive traversal
    if (Array.isArray(obj)) {
	for (var x of obj) {
	    process (x);
	}
	return;
    }

    // A feature router
    if (obj["feature"] == "card") {
	var element = document.createElement('div');
    }
    if (obj["feature"] == "text") {
	var element = document.createElement('div');
    }
    // ...

    obj["element"] = element;
    property_router(obj);
}

CHAQ

The overall effect
is to make cut-and-paste
something that we do, not with code,
but with descriptions of programs
such as those found in the JSON structure.
We have made a central description,
the essence of the program,
something that changes a great
deal, and quite easily, while the
rest of the platform changes much
more slowly. It's the contingent versus
the universal. It makes cut-and-paste
a positive and easy habit, to be encouraged.