potix Server-Centric Ajax and Mobile

ZK, Simply Rich

Tom M. Yeh Founder, ZK http://jp.zkoss.org

1 Copyright 2007 Potix Corporation

Over 136 Ajax Frameworks

Java:

46 PHP: 40 C#: 21

potix

A Quick view of Ajax Frameworks

Prototype jQuery Script.aculo.us DOJO Yahoo UI Ext-JS ZK Backbase DWR GWT

Client-side Low-level Library

Client-side Widget Library

Server-side Integration

potix

If you study one project a day, it takes HALF YEAR to figure out

potix

While Ajax born to provide rich user interface,

rich UI no longer an issue in 2007

for any competent framework
5

potix

The bottom line is your development

Cost!

potix

 In

1994, we developed a Windowsbased accounting system In 2000, we developed a Web-based accounting system

Cost of Web App = 4 x Cost of Windows App

potix

The devs cost depends on:

Client-centric vs. Server-centric

potix

Client vs. Server Centric

Server-Centric Client-Centric

Your Application

Your Application

Your Application

Framework

Framework

Framework

Framework

Browser

Server

Browser

Server

potix

Can server-centric framework do action games?

10

potix

Can server-centric framework run off-line?

11

potix

Does server-centric framework take fewer memory and shorter response time?

12

potix

Then, why I am here?

13

potix

Client-Centric

Server-Centric
potix

14

Client-Centric

Server-Centric
potix

15

Thin-Client, Fat-Client, Smart-Client, Ultra-Thin Client

In

1996, we built a network computer (based on JavaOS)

Primitive,

expensive, no application, only able to surf the Internet

But,

it won Best of Show at COMDEX FALL97

WHY?
16

potix

Internet = Applications
Any time Any where Any device

Traveling, Entertaining, Scheduling, Communication Living, Business, Ads,

No pre-install Highly scalable Easy to maintain

17

potix

Web applications are great in every measurement, except no user want to use them

18

potix

User Interface Evolution

(AJAX)

[Source: Forrester Resource] 19

potix

What is Ajax?

Technical viewpoint

Ajax = DHTML + One JavaScript API

var req = new XMLHttpRequest(); req.open("POST", "http://killerapp.com/do", true); req.send("great=true&rich=true");

20

potix

What is Ajax?
Users viewpoint

Ajax = Connectivity + Friendly = +

21

potix

Ajax brings the friendly user experience to Web applications but adds more complexities and costs to already costly development of Web apps
22

potix

Challenges of Ajax Applications

JavaScript

Issues

Incompatible,

sophisticated and buggy JavaScript API to manipulate DOM and to communicate

Fat

Client Issues

Replication

of the application data model and business logic in the browser Maintaining the data consistency between clients and servers asynchronously
23

potix

JavaScript API Challenge

Firefox

uses XMLHttpRequest, while Internet Explorer uses ActiveObject. IE and Operas innerHTML doesnt support TABLE Safari uses collapse, while others uses removeAllRanges to unselect
potix

24

Synchronization Challenge

When you type item # and click submit, what is the unit price that server received?

Ajax

35 or 0.0 You never know!! Depending on AJAX was responded or not

25

potix

Security Challenge

The more Ajax API you exposed, the more frangible your system is.

<INPUT id="customer" onchange="checkCredit()"/> <script> function checkCredit() { var el = document.getElementById('customer'); var credit = creditManager.getCredit(el.value); if (credit < 0) alert('Sorry but your credit limit JavaScript is readable by any client. bounces); A hostile attack can reverse your business logic, and } mimic the Ajax invocations to get all credit limits </script>
26

potix

Server vs. Client Centric

Server-Centric Answer to sophisticated JavaScript API Answer to replication data & logic at client Answer to security challenge Answer to maintain data consistency Easy to integrate backend services UI design without programming Response Time Server Load Yes Yes Better Yes Yes Depends 10~100ms Depends Client-Centric Yes No No (apps job) No (apps job) No Depends Immediately ~100ms Better
27

(depends on distance)

potix

A Google Maps Example:

Show the Location of Resorts

Type the name of resort and show where it is

28

potix

Google Maps

Client-centric approach (with DWR)

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <script type="text/javascript" src="dwr/engine.js"></script> <script type="text/javascript" src="dwr/util.js"></script> <script type='text/javascript' src='dwr/interface/locator.js'></script> <script src="http://maps.google.com/maps?file=api&amp;v=2" type="text/javascript"></script> <script type="text/javascript" src="http://www.google.com/jsapi?key=ABCDEFG"></script> <script language="javascript" > var lng, lat, map; setGmarker(); setGinfo(); } } function setGmarker(){ var point = new GLatLng(lat,lng); map.addOverlay(new GMarker(point)); }

<?xml version="1.0" encoding="UTF-8"?> <dwr> function setGinfo(){ callBackGinfo(locator.getInfo(location)); <allow> } <create creator="new" function callBackGinfo(data){ function position(location){ javascript="locator">= new GLatLng(lat,lng); var point callBackLat(locator.locate(locatio)); span_element } <param name="class" = document.createElement("span"); span_element.setAttribute("style","font-size:11px;fontfunction callBackLat(data){ family:verdana;"); value="org.zkoss.demo.Locator" /> lat = data[0]; txt_node = document.createTextNode(data); lng = data[1]; </create> span_element.appendChild(txt_node); load(); map.openInfoWindow(point,span_element); } </allow> } </script> </dwr> function load(){

2 files, 70 lines of codes

if (GBrowserIsCompatible()) { var level = 16; map = new GMap2(document.getElementById("map_canvas")); map.setCenter(new GLatLng(lat, lng), level); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); var point = new GLatLng(lat,lng);

</head> <body> <input id="location" type="textbox" onchange=move(this.value);" /> <div id="map_canvas" style="width: 500px; height: 300px"></div> </body> </html>

29

potix

Google Maps

Server-centric approach (with ZK)

<zscript> Void moveTo(String name) { double[] pos = Locator.locate(name); stores.setLat(pos[0]); stores.setLang(pos[1]); } </zscript>

1 files, 9 lines of codes

<textbox onChange=moveTo(self.value)/> <gmaps id=stores/>

30

potix

A Mobile Example:
Twitter Mobile Client

31

potix

Twitter Mobile:
import javax.microedition.lcdui.*; import javax.microedition.midlet.*; public class twitterMidlet extends MIDlet { private boolean started = false; private Display display; private List twitterList; public twitterMidlet() { }

Client-centric approach (with JavaMobile)

private void createList() { private String[] updates = new TwitterFactory().getPublicUpdates( new Twitter("USERNAME","PASSWORD")); twitterList = new List("Select Example", List.IMPLICIT); for (int i = 0; i < updates.length; i++) { twitterList.append(updates[i], null); } twitterList.setCommandListener(this);

protected void destroyApp(boolean arg0) throws MIDletStateChangeException { } protected void pauseApp() { }

2 files, 60 lines of codes

} private void createScreens() { } private void createCommands() { } }

protected void startApp() throws MIDletStateChangeException { if (!started ) { started = true; display = Display.getDisplay(this); createCommands(); createScreens(); createList();

Thousands of users have to MIDlet-1: test,,test MIDlet-2: software, upgrade the twitterMidlet,,twitterMidlet MIDlet-Jar-URL: twitter.jar MIDlet-Name: twitter if you release a newMidletMidlet Suite version Vendor MIDlet-Vendor: Suite
MIDlet-Version: 1.0.0 MicroEdition-Configuration: CLDC-1.1 MicroEdition-Profile: MIDP-2.1
32

display.setCurrent(twitterList); } }

potix

Twitter Mobile:

Server-centric approach (with ZK)

<frame onCommand="MilDevice.goHome(null)" visible="true"> <zscript> List updates = new TwitterFactory().myTwitterStatus( new Twitter("USERNAME","PASSWORD")); </zscript> <zk forEach="${updates}" > <label flow="only" value="[${each.userScreenName}]"/> <label flow="only" value="${each.text}"/> <label flow="last" value="Where: ${each.userLocation}"/> <label flow="only" value="- END -"/> </zk> <command label="Home" type="back"/> </frame>

1 files, 13 lines of codes

33

potix

Ajax brings the desktops friendly user experience to Web applications and a good server-centric framework brings the desktops productivity to Ajax applications
34

potix

Beyond Server-Centric

35

potix

Richness
Completeness

components
Grid,

of off-of-shelf UI

tabbox, listbox, slider, chart, layout, combobox,

User

friendly features

Drag-and-drop,

tooltip, context menu, browser history management

36

potix

Simplicity
Programming
Event

model

driven, component-based

Threading
Server

model

push, server-side modal dialog

Scripting
Java,

language and other backend accesses

annotations
37

Ruby, Groovy

Database

Data-binding,

potix

Extensibility
Integrating

platforms
Google

UI components from other

Maps, Timeline

Integration
JSP,

with other technologies with backend

Web services, SAP, Seam,

JSF, portal

Integrating
Database,

Clustering

and Failover
38

potix

A Comparison
ZK DOJO EXT-JS
GWT Backbase Echo2 IceFaces

Client-centric solution Server-centric solution Server-side programming Client-side programming UI design in Markup Language Scripting language JSF and JSP support Data-binding w/o programming Mobile support Open source V Java
Optional

V
N/A

V
N/A

V Java Java

V V Java
.NET

Java Java
N/A N/A

JS

JS

Optional

XUL-based Ruby, JS

propriet. N/A N/A N/A N/A

Yes

Yes

Java,

JSF, prop.

JSF,JSP V V V

JSF

JSF

V
39

potix

potix

Thank You!

40 Copyright 2007 Potix Corporation