Ajax Showcases:

35
www.day.com Global Content Management 1 EuroAjax 2006 Ajax Showcases: „The Good, the Bad and the Ugly“ David Nuescheler, CTO Day Software Spec Lead JSR-170 & JSR-283 1

description

 

Transcript of Ajax Showcases:

Page 1: Ajax Showcases:

www.day.comGlobal Content Management

1

EuroAjax 2006

Ajax Showcases:„The Good, the Bad and the Ugly“

David Nuescheler, CTO Day Software

Spec Lead JSR-170 & JSR-283

1

Page 2: Ajax Showcases:

www.day.comGlobal Content Management

2

Nutrition Facts

AJAX Basics

Real-life Showcases

Overloaded Keynote Animations

Finger pointing, whining & complaining

Solutions

25%

70%

200%

100%

0%

% Daily Value

+ way too many Annotationscontroversial

2

Page 3: Ajax Showcases:

www.day.comGlobal Content Management

3

Agenda

1 A Historical Primer

2 AJAX Basics, introducing XHR

3 AJAX vs. Web 1.0, 5 Examples

4 Diagnosing AJAX-needs

5 Warning: AJAX

3

Page 4: Ajax Showcases:

www.day.comGlobal Content Management

4

What does Ajax mean?

AJAX = Asynchronous JavaScript and XML

Declaration

Jesse James Garret/AdaptivePa"Anno Domini 2#5

well, thats an

obvious one: AJAX

works perfectly without

XML

hmm... JS realistically is the only option, but in theory as scripting language would do

Doesn’t make much sense now, does it ;)

To be fair: JJG later

discouraged the use of

AJAX as an Acronym

4

Page 5: Ajax Showcases:

www.day.comGlobal Content Management

200620052004

5

Brief Historical Primer

“AJAX”

+160mHits

~70 weeks

(over 2m new pages weekly)

5

Page 6: Ajax Showcases:

www.day.comGlobal Content Management

6

Agenda

1 A Historical Primer

2 AJAX Basics, introducing XHR

3 AJAX vs. Web 1.0, 5 Examples

4 Diagnosing AJAX-needs

5 Warning: AJAX

6

Page 7: Ajax Showcases:

www.day.comGlobal Content Management

7

What does Ajax mean?

AJAX = DHTML + XHRDeclaration *

* only for the scope of this presentation

**

** aka XmlHttpRequest

Arghh... can’t ged ridof this “X”

7

Page 8: Ajax Showcases:

www.day.comGlobal Content Management

8

The History of XHR

Invented by Microsoft

In IE since version 4 (released 30-sep-1997)what!? - 97?

8

Page 9: Ajax Showcases:

www.day.comGlobal Content Management

9

1997

9

Page 10: Ajax Showcases:

www.day.comGlobal Content Management

10

The History of XHR

Invented by Microsoft

In IE since version 4 (released 30-sep-1997) Designed for Outlook on the web

Initially an ActiveX control

Mozilla created Javascript alternative, XHR

IE7 has Mozilla compatibility for XHR

what!? - 97?

10

Page 11: Ajax Showcases:

www.day.comGlobal Content Management

11

Alternatives to XHR

iframe Hairy DOM manipulation

Much slower

Useful in IE if ActiveX is turned off

flash Not in all browsers

Generally not required

dom + script Useful for cross-domain Ajax

Inherent memory issues

images Possible, but impractical

not as pretty,

works like a charm

Write only, though

11

Page 12: Ajax Showcases:

www.day.comGlobal Content Management

12

Popular Data formats

Format options HTML (mostly dynamically inserted server presentation)

XML (API is hard to use, verbose)

JSON (Great API, Concise and Fast)

Javascript (Very Powerful, care required)

...really anything you are willing to parse

12

Page 13: Ajax Showcases:

www.day.comGlobal Content Management

13

Agenda

1 A Historical Primer

2 AJAX Basics, introducing XHR

3 AJAX vs. Web 1.0, 5 Examples

4 Diagnosing AJAX-needs

5 Warning: AJAX

13

Page 14: Ajax Showcases:

www.day.comGlobal Content Management

14

Ajax vs Web 1.0: Gmail vs. Yahoo mail

...versus...AJAXINSIDE

14

Page 15: Ajax Showcases:

www.day.comGlobal Content Management

Ajax vs Web 1.0: Gmail vs. Yahoo mail

15

Conversations

2GB+

Hidden Quotes

Keyboard shortcuts

Contact Management and completion

Spellchecking

Responsive UI

Chat

Auto Save

Sluggish login

gmail innovation

selected

AJAXINSIDE

AJAXINSIDE

AJAXINSIDE

AJAXINSIDE

15

Page 16: Ajax Showcases:

www.day.comGlobal Content Management

16

Ajax vs Web 1.0: Gmail vs. Yahoo mail

AJAX INSIDE

GET /mail/HTTP/1.1 200

GET /mail/?ver=e29b7fc0c3f64770...HTTP/1.1 200, length: 153k, gzipped

GET /mail/?search=inbox...HTTP/1.1 200, length: 7k, gzipped

GET /mail/?name=contacts...HTTP/1.1 200, length: 25k, gzipped

GET /mail/channel/bind?...HTTP/1.1 200, length: ~350k, chunked

POST /mail/channel/bind?...HTTP/1.1 200

Containing the Application Code, Stripped

and compressed,

(those .js apps get bigger and bigger)

Application Data, JSON, compressed

More or less 2x the entire address book, containing all the stats and contacts, uncompressed (arghh!)

Roughly 35reqs, 15s, +700kB

Note to self: clean your +1500 contacts

16

Page 17: Ajax Showcases:

www.day.comGlobal Content Management

17

Ajax vs. Web 1.0: Google Calendar vs. Yahoo calendar

...versus...AJAXINSIDE

17

Page 18: Ajax Showcases:

www.day.comGlobal Content Management

Ajax vs Web 1.0: Google Calendar vs. Yahoo Calendar

18

Responsive Drag and Drop UI

Quick Add

Excellent Sharing & Subscribe

API!

Maps Integration

Very Sluggish login

AJAXINSIDE

AJAXINSIDE

AJAXINSIDE

AJAXINSIDE

gcal innovation

selected

18

Page 19: Ajax Showcases:

www.day.comGlobal Content Management

AJAX INSIDE

19

Ajax vs. Web 1.0: Google Calendar vs. Yahoo calendar

POST /calendar/composeHTTP/1.1 200, short, gzipped

POST /calendar/eventHTTP/1.1 200, short, gzipped

POST /calendar/load HTTP/1.1HTTP/1.1 200, short, gzipped

Posting “arrival ...” back to the server

Server resonds with Parsed & Validated

“Event Creation Command”

Instruct Server to create Event

Get Event Information from Server

19

Page 20: Ajax Showcases:

www.day.comGlobal Content Management

20

Ajax vs. Web 1.0: Google Suggest vs. Google

...versus...AJAXINSIDE

20

Page 21: Ajax Showcases:

www.day.comGlobal Content Management

Ajax vs Web 1.0: Google Suggests vs. Google

21

Free Market Research Information

Search Term CompletionAJAXINSIDE

suggests inno selected

21

Page 22: Ajax Showcases:

www.day.comGlobal Content Management

AJAX INSIDE

22

Ajax vs. Web 1.0: Google Suggest vs. Google

GET /complete/search?hl=en&js=true&qu=a HTTP/1.1HTTP/1.1 200, short, gzipped

GET /complete/search?hl=en&js=true&qu=ajax HTTP/1.1HTTP/1.1 200, short, gzipped

HTTP/1.1 200 OKContent-Type: text/html; charset=utf-8Content-Encoding: gzipServer: Auto-Completion ServerCache-Control: private, x-gzip-ok=""Content-Length: 207Date: Tue, 20 Jun 2006 14:48:26 GMT

sendRPCDone(frameElement, "ajax ", new Array("ajax amsterdam", "ajax fc", "ajax ontario", "ajax grips", "ajax football club", "ajax public library", "ajax football", "ajax soccer", "ajax pickering transit","ajax transit"), new Array("502,000 results", "710,000 results","275,000 results", "8,860 results", "573,000 results", "40,500 results", "454,000 results", "437,000 results", "10,700 results", "27,100 results"), new Array(""))

text/html? excellent for debugging

Very readable URL’s

JS for XSS (i guess)!? ...but why not

JSON?Note to self: Is AJAX a “Write Only” topic?

22

Page 23: Ajax Showcases:

www.day.comGlobal Content Management

23

Ajax vs. Web 1.0: AJAX Login vs. Login

...versus...AJAXINSIDE

23

Page 24: Ajax Showcases:

www.day.comGlobal Content Management

Ajax vs Web 1.0: Ajax Login vs. Login

24

ajax login inno

selected

Really?will!

as useful as ever ;)

not really!confusing

ready or not ;)

david’s personal

meaningless

comments

AJAXINSIDE

24

Page 25: Ajax Showcases:

www.day.comGlobal Content Management

25

Ajax vs. Web 1.0 (really?): Google Spreadsheets vs. MS Excel

...versus...AJAXINSIDE

25

Page 26: Ajax Showcases:

www.day.comGlobal Content Management

Ajax vs Web 1.0: Google Spreadsheets vs. MS Excel

26

Free

Concurrent Users

Browser Based / Platform Independent

AJAXINSIDE

gspread inno

selected

Server Based

26

Page 27: Ajax Showcases:

www.day.comGlobal Content Management

AJAXINSIDE

my computer

AJAXINSIDE

tobi’s computer

27

Ajax vs. Web 1.0 (really?): Google Spreadsheets vs. MS Excel

AJAXINSIDE

tobi’s computer

AJAXINSIDE

my computer

Serverfarm at google

Polling for changes using a chunked Response (very clever!!)

Change Background Color

dito

Action

POST

27

Page 28: Ajax Showcases:

www.day.comGlobal Content Management

28

Agenda

1 A Historical Primer

2 AJAX Basics, introducing XHR

3 AJAX vs. Web 1.0, 5 Examples

4 Diagnosing AJAX-needs

5 Warning: AJAX

28

Page 29: Ajax Showcases:

www.day.comGlobal Content Management

29

Diagnosing AJAX-needs of your webapplication: Form Validation

Only applies to validation that cannot be implemented client-sided

Must additionally validate on submit

Public Example:http://getahead.ltd.uk/dwr/examples/validation

Only checks for Format, could be client-sided...

(How about an additional check for the existence of the URL?)

29

Page 30: Ajax Showcases:

www.day.comGlobal Content Management

30

Diagnosing AJAX-needs of your webapplication: Spellchecker

Spellchecking “as you type”

Special case of input validation*

* could/should be AJAX ;)

Good public example?

30

Page 31: Ajax Showcases:

www.day.comGlobal Content Management

31

Diagnosing AJAX-needs of your webapplication: Input completion

Completion for very large sets only

Public Example:http://www.google.com/webhp?complete=1

* Posterchild AJAX App *

31

Page 32: Ajax Showcases:

www.day.comGlobal Content Management

32

Diagnosing AJAX-needs of your Webapplication: Tree Control

Dynamic Reload of Level on click

Applicable to practically every Tree. The bigger, the more important

Public Example:http://jcr.day.com

Almost Dangerously Flexible, Transports HTML

32

Page 33: Ajax Showcases:

www.day.comGlobal Content Management

33

Agenda

1 A Historical Primer

2 AJAX Basics, introducing XHR

3 AJAX vs. Web 1.0, 5 Examples

4 Diagnosing AJAX-needs

5 Warning: AJAX If you remember only 5 things...

33

Page 34: Ajax Showcases:

www.day.comGlobal Content Management

34

Warning: AJAX

!AJAX

!AJAX

back button1

accessibility2

indexing3

bookmarks4

network traffic5

Make it work the same

as in Web 1.0

Some people don’t

have JS enabled...

Search Engines don’t

do JS either!Make bookmarkswork wherever it makes sense Don’t forget:Keep-Alive, Gzip & the friendly caches

34