Project Avatar

Thin Server Architecture

Project Avatar provides a JavaScript services layer zeroed in on supporting REST, WebSockets and Server-Sent Events, and a rich client side framework that assumes very minor JavaScript knowledge. The services side is focused on building data services using JavaScript, while the optional client side is entirely focused on supporting HTML5 and TSA (Thin Server Architecture).

Project Avatar

Project Avatar

With the introduction of HTML5, CSS3 and fast JavaScript engines, modern browsers have become a powerful platform. In the advent of the so called single-page application (SPA), also known as single-page interface (SPI) the design of modern user interfaces shifted away from server side generation to web applications or web sites that fits on a single web page with the goal of providing a more fluid user experience akin to a desktop application. An SPA moves logic from the server to the client. This results in the role of the web server evolving into a pure data API or web service.

This architectural approach has been coined Thin Server Architecture to indicate that complexity moved from the server to the client while reducing overall system complexity.

In addition to REST, Project Avatar also has built-in support for Server Sent Events (SSE), consisting of push services on the server side and push models on the client side.

var avatar = require("org/glassfish/avatar");
var message = 'The server time is ';
var getTime = function() {
    var current = new Date();
    return {
        msg: message,
        h: current.getHours(),
        m: current.getMinutes(),
        s: current.getSeconds() };
avatar.registerRestService({ url: "data/message" },
    function() {
        this.onPut = function(request, response) {
            message =;
avatar.registerPushService({ url: "push/time" },
    function() {
        this.onOpen = this.onTimeout = function(context) {
            return context.sendMessage(getTime());

To communicate with this new push service, the client side needs a push model as well as some other changes to support updating the message.

        <script data-model="rest">
            var Message = function() {
                this.msg = '';
        <script data-model="push">
            var Time = function() {
                this.msg = this.h = this.m = this.s = '';
        <script data-type="Message" data-instance="message" data-url="data/message"></script>
        <script data-type="Time" data-instance="time" data-url="push/time"></script>
        <output class="time">#{time.msg}#{time.h}:#{time.m}:#{time.s}</output><br><br>
        <label for="im">New Message: </label>
        <input id="im" size="35" data-value="#{message.msg}"/>
        <button onclick="#{message.put()}">Update</button>
Posted in Java EE, Mobile

Leave a Reply