Upload
invisigoth87
View
230
Download
0
Embed Size (px)
Citation preview
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
7/29/2019 ZK ServerCentricAjaxMobile
2/40
ppoottiixx
Over 136 Ajax FrameworksOver 136 Ajax Frameworks
Java: 46
PHP: 40
C#: 21
2
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
6/40
ppoottiixx
The bottom line isThe bottom line is
your developmentyour development
Cost!Cost!
6
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
8/40ppoottiixx
The devs cost depends on:The devs cost depends on:
ClientClient-centric vs.-centric vs. ServerServer-centric-centric
8
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
10/40ppoottiixx
Can server-centric frameworkCan server-centric framework
dodo action gamesaction games??
10
7/29/2019 ZK ServerCentricAjaxMobile
11/40ppoottiixx
Can server-centric frameworkCan server-centric framework
runrun off-lineoff-line??
11
7/29/2019 ZK ServerCentricAjaxMobile
12/40ppoottiixx
Does server-centric frameworkDoes server-centric framework
take fewertake fewer memorymemory andand
shortershorter response timeresponse time??
12
7/29/2019 ZK ServerCentricAjaxMobile
13/40ppoottiixx
Then, why I am here?Then, why I am here?
13
7/29/2019 ZK ServerCentricAjaxMobile
14/40ppoottiixx
Client-CentricClient-Centric Server-CentricServer-Centric
14
7/29/2019 ZK ServerCentricAjaxMobile
15/40ppoottiixx
Client-CentricClient-Centric Server-CentricServer-Centric
15
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
19/40
ppoottiixx
User Interface EvolutionUser Interface Evolution
[Source: Forrester Resource]
(AJAX)
19
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
21/40
ppoottiixx
What is Ajax?What is Ajax?Users viewpointUsers viewpoint
Ajax = Connectivity + FriendlyAjax = Connectivity + Friendly
= +
21
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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(){
var point = new GLatLng(lat,lng);
map.addOverlay(new GMarker(point));
}
function setGinfo(){callBackGinfo(locator.getInfo(location));
}
function callBackGinfo(data){
var point = new GLatLng(lat,lng);
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);
}
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
31/40
ppoottiixx
A Mobile Example:A Mobile Example:Twitter Mobile ClientTwitter Mobile Client
31
7/29/2019 ZK ServerCentricAjaxMobile
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() {
}
}
2 files, 60 lines of codes
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
7/29/2019 ZK ServerCentricAjaxMobile
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"));
1 files, 13 lines of codes
33
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
35/40
ppoottiixx
Beyond Server-CentricBeyond Server-Centric
35
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
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
7/29/2019 ZK ServerCentricAjaxMobile
39/40
ttii
7/29/2019 ZK ServerCentricAjaxMobile
40/40
ppoottiixx
Thank You!Thank You!
40