Rich Web Apps with Thin Client

Before I get into details on "how" Agile Toolkit implements Rich Thin Web Apps, I would like to discuss "why?".

Conventionally Rich Web applications are relying on a heavy JavaScript logic running in user browser. This custom-bulit logic allows apps to communicate with the server using JSON RESTful API.

Agile Toolkit relies on a similar concept, except that HTML rendering and server-side communication part is carried out by the same component - a View. Such Views in most cases are generic classes of Agile Toolkit and to make them work dynamically requires almost no effort on the part of Developer. Additionally Agile Toolkit allows multiple components to co-exist and each of them to work with their own API independently.

Agile Toolkit introduces a new concept of a "Thin Rich Client". This means that JavaScript is used minimally, to bind actions and reload parts of the pages and would contain as little logic as possible. By moving all the logic to the server-side, performance and security is improved and developer can focus on the server-side assuming that the client would work properly

The way how Agile Toolkit handles reloads makes it possible to develop HTML pages which are fully functional without JavaScript, but work better with with JavaScript enhancements.

The Game

Since we are in the middle of the HTML page, why not play a game?

Result

The Hangman Game

Select Difficulty

 

Code

$page->add('Hangman');

Curiously the above game is implemented completely in PHP-only code in under 50 lines. What happens there really is actually quite simple. Eeach letter is assigned a "onclick" action which reloads the actual game and passes argument containing the letter you have clicked. How about a simpler example?

Result

Hello
 

Code

$element $page->add('HtmlElement');
if(
$_GET['hello']){
  
$element->add('Text')->set('Hello');
}else{
  
$element->add('Button')
    ->
setLabel('Say "Hello"')
    ->
js('click',
        
$element->js()
          ->
reload(array('hello'=>1))
      );
}

What's curious is that the same code would work if you simply open the URL: /learn/understand/jsapi/structure?hello=1#hello.

Agile Toolkit's contribution to JavaScript and jQuery

For everything to work this smoothly Agile Toolkit adds quite a few additional functions into JavaScript space. For instance - that "js()->reload()" we used before is clearly NOT a function implemented by jQuery or jQuery UI. In fact this function appears in the browser as $('#id_here').atk4_reload('/learn/understand/...',{'hello':1},null);

atk4_reload() relies on ui.atk4_loader.js widget which enhances the way how AJAX loading work, but esentially is quite similar to jQuery.load().

How this approach is used with Grid?

Lets look into how Grid in Agile Toolkit is different from jGrid (or jqGrid or some other JavaScript based Grid):

In a separate tutorial I'll demonstrate how to build jQuery UI Widget for Grid enhancement

Task
Conventional JavaScript Grid
Agile Toolkit Grid
Including the code The JavaScript code is added into global header and most often is included on all the pages of your website. JavaScript code bindings for the Grid is loaded only Grid appears on the page. For pages loaded through AJAX, the code is loaded dynamically.
Initializing Grid Content When document is loaded, JavaScript onReady() action sends AJAX request to the back-end and fetches data for the Grid in JSON or XML. Grid is rendered on the server-side and is transmitted as regular HTML. Data appears on the page along with all other content.
Displaying Paginator Either all the available data should be sent to JavaScript Grid then split into pages in your browser or the XML/JSON data should contain number of total records Paginator is rendered on the server and is transmitted as a regular HTML. Additionally links in the paginator are enhanced to use AJAX for reloading grid if JavaScript is available.
Clicking page links or sorting links JavaScript Grid handles those clicks internally. It will request data from the server if necessary Clicking link send AJAX request to Agile Toolkit on the server, which will respond with properly sorted, relevant data only.
Formatting fields Commonly is done in the JavaScript All done on the server side
Enhancing By writing plug-ins for the JavaScript Grid, if it supports them Create a simple widget and apply on the grid