zk servercentricajaxmobile

7/29/2019 ZK ServerCentricAjaxMobile

1/40

ppoottiixx

Copyright 2007 Potix Corporation

Server-CentricServer-Centric

Ajax and MobileAjax and Mobile

Tom M. YehTom M. Yeh

Founder, ZKFounder, ZK

http://jp.zkoss.orghttp://jp.zkoss.org

ZK, Simply RichZK, Simply Rich

1


2/40

ppoottiixx

Over 136 Ajax FrameworksOver 136 Ajax Frameworks

Java: 46

PHP: 40

C#: 21

2


3/40

ppoottiixx

A Quick view of Ajax FrameworksA Quick view of Ajax Frameworks

3

jQuery

Prototype

Script.aculo.us

DOJO

Yahoo UI

Ext-JS

GWT

DWR

ZK

Backbase

Client-sideWidget Library

Client-sideLow-levelLibrary

Server-sideIntegration


4/40

ppoottiixx

If you study one project a day,If you study one project a day,

it takesit takes HALF YEARHALF YEARto figure outto figure out

4


5/40

ppoottiixx

While Ajax born to provideWhile Ajax born to provide

rich user interface,rich user interface,

rich UI no longer an issuerich UI no longer an issue

in 2007in 2007for any competent frameworkfor any competent framework

5


6/40

ppoottiixx

The bottom line isThe bottom line is

your developmentyour development

Cost!Cost!

6


7/40ppoottiixx

In 1994, we developed a Windows-based accounting system

In 2000, we developed a Web-basedaccounting system

Cost of Web AppCost of Web App= 4 x Cost of Windows App= 4 x Cost of Windows App


8/40ppoottiixx

The devs cost depends on:The devs cost depends on:

ClientClient-centric vs.-centric vs. ServerServer-centric-centric

8


9/40ppoottiixx

Server

Client vs. Server CentricClient vs. Server Centric

Client-CentricServer-Centric

Your

Application

Your

Application

Your

Application

Framework FrameworkFramework

Browser Server Browser

Framework

9


10/40ppoottiixx

Can server-centric frameworkCan server-centric framework

dodo action gamesaction games??

10


11/40ppoottiixx

Can server-centric frameworkCan server-centric framework

runrun off-lineoff-line??

11


12/40ppoottiixx

Does server-centric frameworkDoes server-centric framework

take fewertake fewer memorymemory andand

shortershorter response timeresponse time??

12


13/40ppoottiixx

Then, why I am here?Then, why I am here?

13


14/40ppoottiixx

Client-CentricClient-Centric Server-CentricServer-Centric

14


15/40ppoottiixx

Client-CentricClient-Centric Server-CentricServer-Centric

15


16/40ppoottiixx

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

Ultra-Thin ClientUltra-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


17/40ppoottiixx

Internet = Applications

Traveling, Entertaining,Scheduling, Communication

Living, Business, Ads,

Any time

Any where

Any device

Highly scalable

No pre-install

Easy to maintain

17


18/40

ppoottiixx

Web applications are great in everyWeb applications are great in every

measurement,measurement,exceptexcept

no user want to use themno user want to use them

18


19/40

ppoottiixx

User Interface EvolutionUser Interface Evolution

[Source: Forrester Resource]

(AJAX)

19


20/40

ppoottiixx

What is Ajax?What is Ajax?Technical viewpointTechnical viewpoint

Ajax = DHTML + One JavaScript APIAjax = DHTML + One JavaScript API

var req = new XMLHttpRequest();

req.open("POST", "http://killerapp.com/do",true);

req.send("great=true&rich=true");

20


21/40

ppoottiixx

What is Ajax?What is Ajax?Users viewpointUsers viewpoint

Ajax = Connectivity + FriendlyAjax = Connectivity + Friendly

= +

21


22/40

ppoottiixx

Ajax brings the friendly userAjax brings the friendly user

experience to Web applicationsexperience to Web applications

butbut adds more complexities andadds more complexities and

costs to already costlycosts to already costly

development of Web appsdevelopment of Web apps

22


23/40

ppoottiixx

Challenges of Ajax ApplicationsChallenges of Ajax Applications

JavaScript Issues Incompatible, sophisticated and buggy

JavaScript API to manipulate DOM and to

communicate

Fat Client IssuesReplication of the application data model

and business logic in the browserMaintaining the data consistency between

clients and servers asynchronously

23


24/40

ppoottiixx

JavaScript API ChallengeJavaScript API Challenge

Firefox uses XMLHttpRequest, whileInternet Explorer uses ActiveObject.

IE and Operas innerHTML doesntsupport TABLE

Safari uses collapse, while others usesremoveAllRanges to unselect

24


25/40

ppoottiixx

Synchronization ChallengeSynchronization Challenge

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

Ajax

35 or 0.0You never know!!

Depending on AJAX was responded or not

25


26/40

ppoottiixx

Security ChallengeSecurity Challenge

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

function checkCredit() {var el = document.getElementById('customer');var credit =

creditManager.getCredit(el.value);

if (credit < 0)alert('Sorry but your credit limit

bounces);}

JavaScript is readable by any client.

A hostile attack can reverse your business logic, and

mimic the Ajax invocations to get all credit limits

26


27/40

ppoottiixx

Server vs. Client CentricServer vs. Client Centric

Server-Centric Client-Centric

Answer to sophisticated JavaScript API Yes Yes

Answer to replication data & logic atclient

Yes No

Answer to security challenge Better No (apps job)

Answer to maintain data consistency Yes No (apps job)

Easy to integrate backend services Yes No

UI design without programming Depends Depends

Response Time 10~100ms(depends on distance)

Immediately~100ms

Server Load Depends Better

27


28/40

ppoottiixx

A Google Maps Example:A Google Maps Example:Show the Location of ResortsShow the Location of Resorts

Type the name of resort and show where it is

28


29/40

ppoottiixx

Google MapsGoogle MapsClient-centric approach (with DWR)Client-centric approach (with DWR)

var lng, lat, map;

function position(location){

callBackLat(locator.locate(locatio));

}

function callBackLat(data){

lat = data[0];

lng = data[1];

load();

}

function load(){

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);

setGmarker();

setGinfo();

}

}

function setGmarker(){


map.addOverlay(new GMarker(point));

}

function setGinfo(){callBackGinfo(locator.getInfo(location));

}

function callBackGinfo(data){


span_element = document.createElement("span");

span_element.setAttribute("style","font-size:11px;font-family:verdana;");

txt_node = document.createTextNode(data);

span_element.appendChild(txt_node);

map.openInfoWindow(point,span_element);

}


30/40

ppoottiixx

Google MapsGoogle MapsServer-centric approach (with ZK)Server-centric approach (with ZK)

Void moveTo(String name) {

double[] pos = Locator.locate(name);

stores.setLat(pos[0]);stores.setLang(pos[1]);

}

1 files, 9 lines of codes

30


31/40

ppoottiixx

A Mobile Example:A Mobile Example:Twitter Mobile ClientTwitter Mobile Client

31


32/40

ppoottiixx

Twitter Mobile:Twitter Mobile:Client-centric approach (Client-centric approach (withwith JavaMobile)JavaMobile)

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() {

}

protected void destroyApp(boolean arg0)

throws MIDletStateChangeException {

}

protected void pauseApp() {

}

protected void startApp()

throws MIDletStateChangeException {

if (!started ) {started = true;

display = Display.getDisplay(this);

createCommands();

createScreens();

createList();

display.setCurrent(twitterList);

}

}

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);}

private void createScreens() {

}

private void createCommands() {

}

}


MIDlet-1: test,,testMIDlet-2: twitterMidlet,,twitterMidlet

MIDlet-Jar-URL: twitter.jarMIDlet-Name: twitter Midlet SuiteMIDlet-Vendor: Midlet Suite VendorMIDlet-Version: 1.0.0MicroEdition-Configuration: CLDC-1.1MicroEdition-Profile: MIDP-2.1

Thousands of users have to

upgrade the software,if you release a new version

32


33/40

ppoottiixx

Twitter Mobile:Twitter Mobile:Server-centric approach (with ZK)Server-centric approach (with ZK)

List updates = new TwitterFactory().myTwitterStatus(

new Twitter("USERNAME","PASSWORD"));


33


34/40

ppoottiixx

Ajax brings the desktops friendlyAjax brings the desktops friendly

user experience to Web applicationsuser experience to Web applications

andand a good server-centrica good server-centric

framework brings the desktopsframework brings the desktops

productivity to Ajax applicationsproductivity to Ajax applications

34


35/40

ppoottiixx

Beyond Server-CentricBeyond Server-Centric

35


36/40

ppoottiixx

RichnessRichness

Completeness of off-of-shelf UIcomponentsGrid, tabbox, listbox, slider, chart, layout,

combobox,

User friendly featuresDrag-and-drop, tooltip, context menu,

browser history management

36


37/40

ppoottiixx

SimplicitySimplicity

Programming model Event driven, component-based

Threading model Server push, server-side modal dialog

Scripting language

Java, Ruby, GroovyDatabase and other backend accesses

Data-binding, annotations

37


38/40

ppoottiixx

ExtensibilityExtensibility

Integrating UI components from otherplatformsGoogle Maps, Timeline

Integration with other technologies JSP, JSF, portal

Integrating with backendDatabase, Web services, SAP, Seam,

Clustering and Failover

38


39/40

ttii


40/40

ppoottiixx

Thank You!Thank You!

40

zk servercentricajaxmobile

Documents