Top Banner
Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009
55

Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Jan 02, 2016

Download

Documents

Camron Andrews
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Can you write REALapplications with AJAX?Phil SarinAdvanced UI SoftwareApril 15, 2009

Page 2: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Problem: Many web apps stink

Page 3: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Rich Internet Applications (RIAs)•Easy deployment and maintenance•“Desktop-like” interactivity•Willing to sacrifice some “webness”

(e.g., bookmarks)

Page 4: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

RIA Approaches

•Browser plug-in▫Flash/Flex, Java Swing, Silverlight▫Potentially greater interactivity, higher

barrier to adoption▫Concerns about openness/control

•In browser, no plug-ins▫AJAX▫Lower barrier to adoption▫Cross-browser mayhem?

Page 5: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Questions for today

•Can we approach AJAX development like “regular” GUI development?

•What are the approaches/tradeoffs?•What’s likely to become popular?

Page 6: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

What is AJAX?

Page 7: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

What is AJAX?

Page 8: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

AJAX event handling

Page 9: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Some History

Page 10: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

History: Hill Climbing

Page 11: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

RIA: Which hill to climb?

Page 12: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Approaching RIAs from two hills

HTTP Direct Manipulation

Origins in early web sites Origins in desktop GUIs

Built around the HTTP protocol Built around user events

Generating HTML Laying out graphical objects

Page 13: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The HTTP Hill

Page 14: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The HTTP HillStatic Pages

• Server fetches and returns a web page

• Initially just text-based• With Mosaic, pictures too

Page 15: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The HTTP HillDynamic Pages

• Server-side▫ CGI (mostly perl)

• Client-side▫ Javascript

Page 16: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The HTTP Hill“Frameworks”

• MVC support(Struts 1 & 2, Rails, Django)

• Easier HTML generation(JSP, ERB, Freemarker, …)

• State/sessions• Javascript libraries

(Prototype, DOJO, jQuery)

Page 17: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The HTTP HillPros/Cons (prior to AJAX)

+ Very cheap for simple sites+ Reasonably flexible

▫ Mail clients!+ Web-friendly

▫ Bookmarkable▫ Indexable

- Slow feedback- Minimal interactivity- Cross-browser mayhem

Page 18: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The Direct Manipulation Hill

Page 19: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The Direct Manipulation Hill

Page 20: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The Direct Manipulation HillGUI Toolkits

• Common widget set across applications

• Standalone or client-server

Page 21: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The Direct Manipulation Hillfor Internet applications

Browser Plug-Ins

• Flash, Java, Silverlight• Took a long time to catch

on

Page 22: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

The Direct Manipulation HillPros/Cons

+ Timely feedback+ Programming power

(behaviors, constraints – at least possible)

+ Common widgets(consistency, usability)

+ Flash/etc: more consistent runtime platform

- Flash/etc: needs a plug-in- Cross-platform issues still

exist- Proprietary runtime platform

Page 23: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Where does AJAX fit in?

Page 24: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Where does AJAX fit in?

Both hills!

Page 25: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

AJAX on the HTTP Hill

•Tactical features▫Autocomplete▫Drag and drop

•AJAX-aware code▫Raw Javascript/HTML/CSS▫Or with a library

•Okay for some applications•Too limiting for RIAs•Not the focus of this talk

Page 26: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Direct Manipulation AJAX

Page 27: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

AJAX on the Direct Manipulation Hill• Separate development

environment from runtime environment.

• Runtime environment: HTML/Javascript/CSS (AJAX)

• Development environment: toolkit in another language

• Two approaches: thin and fat

Page 28: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Thin Client AJAX Approach

Page 29: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Example: Google Maps(pretend it’s a thin client app)

Page 30: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

A Grid of Images

Page 31: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Example: Google Maps

Page 32: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.
Page 33: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Sequence

Page 34: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Thin Client Pros and Cons

+Simple programming: ignore the network+All your code runs server-side+Programmers love it!

+Undo, behaviors, constraints: all possible!- Scalability (server-side state, lots of

requests)- Slow feedback: network hop for each user

action

Page 35: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Fat Client AJAX Approach

Page 36: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Example: Google Maps

Page 37: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.
Page 38: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Sequence

Page 39: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Wait a second…

•No AJAX calls involved in moving the map around!▫Mostly Javascript.▫New image requests are synchronous

•Example AJAX call: adding an intermediate destination

Page 40: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Fat Client Pros and Cons

+Scalable (client-side state, fewer HTTP calls)

+Fast feedback+Undo, behaviors, constraints possible…- …but undo more complex than on the

desktop- More complicated: network-aware,

distributed

Page 41: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Example AJAX Toolkits

•Google Web Toolkit: Fat Client▫Write in Java, compiled to Javascript

•Cappuccino: Fat Client•Echo2: Thin Client

▫Write in Java▫No HTML/CSS (proprietary stylesheet

language)•Echo3 (Java – Beta): hybrid

▫Thin widgets in Java▫Fat widgets in Javascript

Page 42: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

So, is AJAX viable for RIAs?Fat AJAX Thin AJAX Plugin

(Flash, Swing)

Feedback Speed

Winner (tied) Winner (tied)

Interactive Potential

Winner

Scalability Winner (tied) Winner (tied)

Cross-platform Consistency

Winner

Momentum Google does a lot of work for you.

? Adobe does a lot of work for you.

Ease of Programming

Winner

Page 43: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Thin vs Fat AJAX?

•Thin AJAX: Squeezed out▫Insufficient if interactivity matters▫Not as easy as an HTTP-oriented

application•Fat AJAX: How does it compare to plug

ins?▫Developer adoption?▫Application philosophy?

Page 44: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Some Toolkits

Page 45: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

GWT: A Toolkit…

•Laying out widgets in a container “panel”

•Events and handlers

// Create a Horizontal Panel HorizontalPanel hPanel = new HorizontalPanel();

// Leave some room between the widgets hPanel.setSpacing(5);

// Add some content to the panel for (int i = 1; i < 5; i++) { hPanel.add(new Button("Button " + i)); }

http://code.google.com/webtoolkit/doc/1.6/DevGuideUserInterface.html

Page 46: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

…with non-strict abstractions

•Styling with CSS•Directly embed

Javascript•Raw HTML•Direct DOM

manipulation

private native void putElementLinkIDsInList(Element elt, ArrayList list) /*-{ var links = elt.getElementsByTagName("a");

for (var i = 0; i < links.length; i++ ) { var link = links.item(i); link.id = ("uid-a-" + i); [email protected]::add(Ljava/lang/Object;) (link.id); } }-*/;

http://code.google.com/webtoolkit/doc/1.6/DevGuideUserInterface.html

Page 47: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Cappuccino: A different philosophy

“When you program in Cappuccino, you don't need to concern yourself with the complexities of traditional web technologies like HTML, CSS, or even the DOM. The unpleasantries of building complex cross browser applications are abstracted away for you.”

http://cappuccino.org/learn/

Page 48: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Javascript as “assembly language”

http://280slides.com

Page 49: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Cappuccino vs GWT

•Philosophical question•GWT: RIAs that are part of of the web•Cappuccino: RIAs deployed over the web

▫Alternative to Flash/Flex

Page 50: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Finally

Page 51: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

Recommendations

•If you’re serious about RIAs, climb the direct manipulation hill.

•Don’t limit yourself to Thin AJAX.•AJAX sweet spot: Applications that are

part of the web.•AJAX is an implementation alternative for

applications deployed over the web.

Page 52: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

References 1adaptive path » ajax: a new approach to web applications. (n.d.). . Retrieved April 8, 2009, from http://www.adaptivepath.com/ideas/essays/archives/000385.php.

Adobe wants to be the Microsoft of the Web at Ted Leung on the Air. (n.d.). . Retrieved April 8, 2009, from http://www.sauria.com/blog/2007/03/01/adobe-wants-to-be-the-microsoft-of-the-web/.

Cappuccino Web Framework - Build Desktop Class Applications in Objective-J and JavaScript. (n.d.). . Retrieved April 15, 2009, from http://cappuccino.org/.

Comparing the Google Web Toolkit to Echo2. (n.d.). . Retrieved April 9, 2009, from http://www.theserverside.com/news/thread.tss?thread_id=40804.

Page 53: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

References 2Dare Obasanjo aka Carnage4Life - What Comes After AJAX? (n.d.). . Retrieved April 8, 2009, from http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=11c471d6-ea65-4ed2-b387-c9ec966d8418.

Developer's Guide - Google Web Toolkit - Google Code. (n.d.). . Retrieved April 9, 2009, from http://code.google.com/webtoolkit/doc/1.6/DevGuide.html.

Echo2 Technical Overview | Echo Web Framework. (n.d.). . Retrieved April 8, 2009, from http://echo.nextapp.com/site/echo2/doc/tov.

Echo2 Tutorial | Echo Web Framework. (n.d.). . Retrieved April 8, 2009, from http://echo.nextapp.com/site/echo2/doc/tutorial.

Page 54: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

References 3Echo2 versus GWT • The Register. (n.d.). . Retrieved April 9, 2009, from http://www.theregister.co.uk/2006/08/24/echo2_framework/.

Feigin, B. (n.d.). Cappuccino and Objective-J. Retrieved from http://www.cs.cmu.edu/~bam/uicourse/830spring09/Benjamin%20Feigin%20-%20Cappuccino.pptx.

Following up on “The Microsoft of the Web” at Ted Leung on the Air. (n.d.). . Retrieved April 8, 2009, from http://www.sauria.com/blog/2007/03/04/following-up-on-the-microsoft-of-the-web/.

LaszloWhitePaper.pdf. (n.d.). . Retrieved April 8, 2009, from http://www.openlaszlo.org/whitepaper/LaszloWhitePaper.pdf.

Page 55: Can you write REAL applications with AJAX? Phil Sarin Advanced UI Software April 15, 2009.

References 4Mesbah, A., & van Deursen, A. (2006). An Architectural Style for Ajax. cs/0608111. Retrieved April 8, 2009, from http://arxiv.org/abs/cs/0608111.Tony C Shan, & Winnie W Hua. (2006).

Taxonomy of Java Web Application Frameworks. In e-Business Engineering, 2006. ICEBE '06. IEEE International Conference on (pp. 378-385). doi: 10.1109/ICEBE.2006.98.