ZK Architecture Overview/ZK架构一览

ZK Architecture Overview Chinese Edition

Architecture Overview

ZK架构一览

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.

经过这十几年的发展演变，Web应用从静态的HTML页面演化成动态HTML页面，然后是Applet和Flash，最终到了Ajax技术。

Challenges in Ajax

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.

在满足用户需求而提供的交互性活动时，Ajax增加了应用的复杂度和本就费用高昂的web应用开发所必需的技能。

• Incompatible and buggy JavaScript API among different browsers
• 在不同浏览器间不可共存且容易产生bug的Javascript API
  
• 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.

为了提供一个可管理的Ajax解决方案，目前已经有许多的框架或者类库。最直接的方式是提供立即可用的Javascript控件。然而，应用程序开发人员必须生成这些控件，在客户端中加入业务逻辑，并且开发一个应用特定的方式来与服务器端交互数据。

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?

简而言之，这里只解决了前面提到过的Ajax面临的挑战中的第一个。其他的挑战，或多或少还是会继续不断地骚扰我们的应用开发人员。难道这就是Web应用程序开发的本质么？或者只是传统的Web应用编程模型已经不适用了呢?

ZK Architecture

ZK架构

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.

为了解决这些挑战，ZK给Web应用提供了桌面应用编程模型天生就具备的事件驱动、基于组件以及以服务器为中心的架构。此外，ZK提供了当前流行的UI开发技术，例如通过标志语言而不是编程来设计UI，通过脚本语言动态地改变应用，不需要编程就可以访问数据库和Web服务的注解和数据绑定。

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.

正如上图所描述的，ZK是由运行在浏览器上的客户端引擎组成的，而更新引擎则位于服务端。他们就像是棒球里的投手和捕手。他们一起配合，将浏览器上发生的事件提交给运行在服务器端的应用，同时根据如何在服务器端生成组件的方式，来更新浏览器的DOM树。

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.

因为应用程序是运行在服务器端，所以它可以直接地访问后端的资源，例如数据库或者Web服务。在Internet上访问它们时毫无通信上的麻烦和安全隐患。

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

在不知道其存在的时候，才使用Ajax最好的方式。

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.
• ZK客户端引用位于浏览器中，用于查探任何有用户活动驱动的事件，例如鼠标的移动或者修改了某个值。一旦探测到事件，它便会通知ZK更新引擎。
  
• 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.
• 从客户端引擎接收到请求后，如果必要，ZK更新引擎便会更新对应组件的内容。然后，如果有事件处理器，更新引擎就会通过他们来通知应用。
  
• 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.
• 如果应用选择改变组件的内容，删除、增加或者移动了组件，更新引擎将会发送新的、改变了的组件到客户端引擎上。然后，客户端引擎便会相应地更新DOM树。
  

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.
• 为了最大化视觉效果和响应能力，ZK提供了一个所谓的客户端动作，让你可以（可选的）在客户端执行你拥有的Javascript代码。