Progressive Loading

Contents[Hide]

1. Progressive Loading

 

While Streaming on the server side allows to start sending the records to the client immediately after the first records of the result set arrive from the database, Progressive loading adds a possibility to display the first "page" immediately after a part of JSON has arrived to the browser, way before the AJAX request is fully loaded.

So Streaming and Progressive loading it’s possible  to display the first "page" of data even before the database has finished sending the whole ResultSet to Java server.

 

 

To activate this mode, an additional parameter "hints" needs to be added to the call of client side API of the service exposed by LightLink.

We can define the service call as

myPackage.myServices(inputParameters, callbackFunction, scope, hints)

where

                inputParameters : a plain JavaScript object that will be available on the server-side JavaScript under "p" variable

                callbackFunction : the callback function that accepts 2 arguments : (res, isPartial)  "res" is a parsed JSON reply from the server; "isPartial" informs the application if the response is complete (all data has been received by the browser) or partial (loading is in progress and more data is expected)

                scope : "this" reference for inside the callbackFunction

                hints: hints object. It may contain more properties in future, for now we are only interested in "progressive". It must be a numeric array: {progressive: [30, 100]}. In this case 30 and 100 define slices (as record number) upon arrival of which the callbackFunction will be called with isPartial=true.  In the above example, for 300 records result set, the callback will be invoked after the arrival of 30 first lines, 100 following and at the very end of AJAX request with the full result set available for the application.

Example (with AndularJS and ag-grid from the LightLink demo page):

        employeeController.employeesStreamWithoutMapping({}, function (res, isPartial) {
            $scope.gridOptions.data = res.resultSet;
            if (!$scope.time.loadProgressive)
                $scope.time.loadProgressive = ((new Date().getTime() - t) / 1000) + "sec";
            if (!isPartial)
                $scope.time.loadProgressiveAll = ((new Date().getTime() - t) / 1000) + "sec";
            $scope.$apply();
        }, this, { progressive: [30, 100] });

 

Final note, there can be any number of slices, however it’s important to state that the browser uses slightly more CPU while handling partial slices. Then, between the end of the last partial slice and the end of AJAX request, the CPU usage is minimal. The overhead depends of the bandwidth and is generally not noticeable; however it’s generally more better to define the slices in the beginning of the expected dataset. For example : in case of {progressive: [30, 100,1000,5000]} between 5000-th and 10000-th record loading the CPU usage is minimal, and is slightly. In case of {progressive: [30, 100]} the CPU usage is minimal between 100-th and 10000-th, almost all the time.   And for the user s’ perception there is very little impact between [30, 100,1000,5000] and [30, 100], as long as he have seen the first page, or maybe some following pages, he might only care to know when the data is fully loaded (application may hide “loading” indicator to do this).