async API requests

[alfredodeza]

Because this was a proof of concept when I started it, I decided it was easier to just do the request to the API in the controller, before even being able to return something.

This is far from ideal to have as a permanent solution and although there is some complexity in doing ajax calls, we are already dealing with a nice API that behaves correctly (usually a big part of the problem).

The biggest advantage I see, for now, is x20 (maybe a bit more in some cases) improvement in response times.

At some point, when we decide to have more information in the page we can take advantage of that work by re-using the same data without having to talk to the controller and re-loading what already exists in the DOM. This is similar to Github where you have tabs in a pull request but clicking them do not really reload the page at all.

This ticket might be big, so it would make sense to split up if the changes take too long.

The idea is to make the controller return the most basic things it needs to render the page (like title and page headers) along with what AJAX call will need to make the request, like the resource URL for example.

We have JQuery already, this is how a simple AJAX call would look like (note that you can use Mako variables inside there!):

$.ajax({
    type: 'GET',
    contentType: "application/json; charset=utf-8",
    url: '${api_resource_url()}',
    success: function(response){
        // Use the data in the response to fill in the DIVs
    },
    error: function(){
      // Show a nice message with a default error message or
      // re-use what came back from the API
    },
});

For that to work, we need to enable CORS in the server, I already created a CORS Pecan hook (it lives in hooks/cors.py) and it just needs to be added in the app config in the hooks section.

[zmc]

Doing this will mean that both paddles and pulpito will have to be outside the firewall, and both with have to have auth implemented.