the future of ajax and zk 5...where we see the future of ajax conclusion client-centric ajax...

THE FUTURE OF AJAX AND

ZK 5

Timothy Clare

www.zkoss.org

我是誰？

我的名字是 Timothy Mills-Clare

我中文的名字是 李健威

我是Technology Evangelist在ZK

我會用英文還有中文

ALL SLIDES © 2009 Timothy Clare & Potix Corp. All rights reserved.

幫我！！

我的老闆在這裡！

如果我不太好， 他會解雇我。

沒關係， 我想得出來辦法！

我的辦法 - 手勢

= 應該很笑！

= 應該鼓掌！

= 假裝你同意我說的!

練習！

AGENDA

Client-centric solutions

What are client-centric solutions?

(client-centric是什麽?)

Limitations of client-centric solutions

(client-centric的問題是什麽?)

Server-centric solutions

What are server-centric solutions?

(server-centric是什麽?)

Benefits of server-centric solutions

什麽是最好？

Introducing ZK 5…

Where we see the future of Ajax

Conclusion

CLIENT-CENTRIC AJAX SOLUTIONS

Client Centric是什麽？

Application Application

Browser Server

components

Ajax

engine

CLIENT-CENTRIC AJAX LIMITATIONS

Client Side Programming

Multiple browser support

Complicated Client and Server Communication

Danger of Exposure of Business Logic

Maintenance Headache

有名的 CLIENT-CENTRIC AJAX SOLUTIONS

Snippet Frameworks

jQuery

Prototype

Widget-sets

Ext-Js

Dojo

YUI

Client frameworks

GWT

CLIENT-CENTRIC AJAX SOLUTIONS 好像

長的好看但是沒內涵

CLIENT-CENTRIC的約會

你那麽好看！！！ 謝謝

你要跟我做什麽。。 你可以對我做什麽 都可以 (Full Control)

可是 你應該買給我很多東西!

麻煩我！！你high maintenance還有costly!

走人!!

SERVER-CENTRIC AJAX SOLUTION(EXAMPLE ZK)

Server Centric是什麽？

Direct RIA (Rich Internet Application)是什麽？

components

Browser Server

components

Application

ZK

client

engine

ZK

server

engine

ZK DIRECT RIA ADVANTAGES

Direct UI Access

<zscript> void draw(int x1, int y1, int x2, int y2) {

LiveImage li = new LiveImage(400, 300, LiveImage.TYPE_INT_RGB);

g2d = li.createGraphics(); Line2D line Graphics2D = new

Line2D.Double(x1, y1, x2, y2);

g2d.draw(line); image.setContent(Images.encode("test.png", li));

} </zscript> <image id="image"> <button onClick='draw(10,10,10,10)'/>

ZK DIRECT RIA ADVANTAGES

Direct Data Access

<label id="name"/>

<button>

<attribute name="onClick">

User usr = Database.getUserById(1);

name.setValue(usr.getName());

</attribute>

</button>

ZK DIRECT RIA ADVANTAGES

Direct Push (Server Push)

ZK DIRECT RIA ADVANTAGES

MVC Pattern

View

Controller

Model

ZK

Spring

Hibernate

ZK DIRECT RIA ADVANTAGES

Standard Compliant

Cross Browser and Mobile Support

ZK DIRECT RIA ADVANTAGES

Languages available

Java

Groovy

Ruby

JavaScript

Python

And others…

他覺得怎麽樣？

我很喜歡Easy of use!

我很喜歡Direct access!

ZK的features都很喜歡!

WAIT！！！ 等一下！！！！

我很想要FULL CLIENT-SIDE CONTROL

怎麽幫？

他很想要ZK…..

他也要FULL CLIENT-SIDE CONTROL…..

好，怎麽給。。。。

Server-side + Client-side = ?

ZK 5 = SERVER + CLIENT FUSION!!

對啊！我們有辦法

Server+Client Fusion是什麽？

ZK 5

Direct RIA Architecture (UI and data access)

Ease of use

FULL CONTROL

jQuery for client effects

Standard Compliant

我ZK的motto

爲什麽OR?

爲什麽？

我們很喜歡3rd Party Frameworks

如果你很喜歡用。。。。用！

3rd Party Frameworks

Hibernate

Spring

JBoss

WE LIKE AND

ZK5的約會

你那麽好看！！！ 謝謝

你要跟我做什麽。。 你可以對我做什麽 都可以 (Full Control)

我需要買給你多少東西？

一起走吧!!

你要給我東西，可以。。不要也可以 好啊！ 你要開始嗎？

很要！！！

SERVER OR CLIENT?

開車！

Manual

(Client-Centric)

Automatic

(Server-Centric)

Semi-automatic

(Server+Client Fusion)

THE FUTURE OF AJAX?

Server+Client fusion

Combination of technologies is the key

對ZK有意思嗎？

你可以看我們的Demo

http://www.zkoss.org/zkdemo/userguide/#l4

對ZK有意思嗎？

http://www.zkoss.org Forum @ http://www.zkoss.org/forum/

Community

http://www.zkoss.org/Community/

Articles

Blogs

Translations

Groups

Speeches

CONTACT ME

http://www.zkoss.org ZK

Email @ timothyclare@zkoss.org

http://www.timothyclare.me Blog

你要這個slides嗎？

COSCUP website

My blog

Q&A

如果你們用中文。。。

我會哭起來了！！