Avatar Overview

Landscape

With the introduction of HTML5, CSS3 and fast JavaScript engines, modern browsers have become a powerful platform. HTML5 provides many new standard capabilities for defining the DOM, persisting state locally and communicating with servers, while CSS3 enables a wide range of layout, style and even animation modifications to render the DOM — whole sections of CSS can be conditionally applied depending on client screen size and type of device. JavaScript is no longer a toy but a significant runtime that enables large and complex programs to modify the DOM dynamically, perform business logic and communicate with servers in any number of ways.

These changes have given rise to a new architecture, called "Thin Server Architecture" (TSA), that moves all of the UI logic of a web application — model, view and controller — from the server to the client. So called "single page applications" are now common, where the entire application is downloaded as a single HTML file, with JavaScript controlling flow and hiding and showing parts of the DOM as needed.

JavaScript has a vastly expanded role and, naturally, many libraries and frameworks have appeared, starting the process of building the layered software architectures we are so familiar with. The variety in this space is now bewildering and expanding at an extremely rapid pace, requiring a very significant investment to select a stack. This assumes a very strong JavaScript skill set, which is unusual for enterprise developers.

As a consequence of TSA, the server's role is shifting from hosting application controller logic (and lots of web pages per application), to serving data — often backed by business logic — using standard protocols such as REST, WebSockets and Server-Sent Events, all of which are available to browser based clients.

Avatar

Avatar tackles both sides of this equation, providing a JavaScript services layer zeroed in on supporting REST, WebSocket and Server-Sent Events1, and a rich client side framework that assumes very minor JavaScript knowledge. The client side is entirely focused on supporting HTML5 and TSA, while the services side is focused on building data services using JavaScript.

JavaScript services are not a replacement for Java based implementations; instead, they are an additional choice in which services can be entirely JavaScript or layered to utilize existing Java libraries. Pure Java services also work well with Avatar clients.

Architecture

An Avatar application is comprised of either client side 'views', server side 'services' or, for convenience, both. Importantly, there is no inherent coupling between views and services, enabling views to communicate with existing services and for services to be consumed by any type of client. An application 'archive' is deployed on the server and is compiled to generate JavaScript tailored to the application. Generated JavaScript for views handles data-binding with the DOM/UI as well as data-management to remote services and local storage.


1It may seem contradictory to provide a solution that assumes minimal JavaScript skills on the client alongside one that requires proficiency on the server. However, we think this makes sense since very often these two parts of an application are implemented by different teams, with different skill sets.

The Avatar client provides a very gradual on-ramp to JavaScript development: a simple copy-and-paste approach is sufficient to create most applications, but as you become more comfortable with the language, it's easy to override and extend the framework in powerful ways.