Architecture Overview

Prefix

Over a decade of evolution, Web applications evolved from static HTML pages, to Dynamic HTML pages, to applets and Flash, and, finally, to Ajax technologies.

Challenges in Ajax

When providing the interactivity to fulfill user’s demand, Ajax increases the complexities of applications and skill prerequisites to the already costly development of Web applications.

• Incompatible and buggy JavaScript API among different browsers
• Maintenance overhead to replicate business logic at the client, particular in a different programming language.
• Danger of exposition of application data model and business logic to the client
• Communication headache to maintain data consistency between the client and the server asynchronously

Current Solutions

In order to deliver a manageable Ajax solution, many frameworks or libraries have been developed. The most straight forward way is to provide ready-to-use JavaScript components. However, application developers have to manipulate these components, glue them with business logic at the client, and develop an application-specific way to exchange data with the server dynamically.

In short, only the first one of above challenges was addressed. The rest of challenges, more or less, remain the hassles of application developers. Is it intrinsic to the development of Web applications? Or the traditional Web application programming model is simply inadequate?

ZK Architecture

In response to these challenges, ZK delivers the intuitive desktop programming model to Web applications with event-driven, component-based, and server-centric architecture. In addition, ZK provides the modern development of UI technologies, such markup languages to design UI without programming, scripting languages to change applications on fly, annotations and data-binding to access databases and Web services without programming.

As depicted above, ZK is composed of Client Engine running at the browser, and the Update Engine at the server. They act as pitcher and catcher. They work together to deliver events happening in the browser to the application running at the server, and update the DOM tree at the browser based on how components are manipulated by the application at the server.

At the heart, all your application codes are running at the server. Whatever events triggered by users are automatically sent to your application running at the server. Whatever you alter components running at the server are automatically updated to the visual representation at the browser. The browser is only a presentation layer of applications, no data model, neither business logic should be exposed on it.

Since the application is running at the server, it could access the backend resources directly, such as databases and Web services. There is no communication hassle or security concern to access them across the Internet.

The best way to use Ajax is not to know its existence.

Execution Flow

• ZK Client engine sits at the browser to detect any event triggered by user's activity such as moving mouse or changing a value. Once detected, it notifies Update Engine.
• Upon receiving the request from Client Engine, Update Engine updates the content of corresponding component, if necessary. And then, Update Engine notifies the application by invoking the event handlers, if any.
• If the application chooses to change content of components, remove, add or move components, Update Engine sends the new content of altered components to Client Engine. Then, Client Engine updates the DOM tree accordingly.

Note:

• To minimize the traffic between the client and the server, multiple events are sent back to the server at once if they are deferrable.
• To maximize the visual effect and responsiveness, ZK provides the so-called Client Side Action that you can execute, though optional, your own JavaScript codes at the client.