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

Problem: Many web apps stink

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

(e.g., bookmarks)

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?

Questions for today

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

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

What is AJAX?

What is AJAX?

AJAX event handling

Some History

History: Hill Climbing

RIA: Which hill to climb?

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

The HTTP Hill

The HTTP HillStatic Pages

• Server fetches and returns a web page

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

The HTTP HillDynamic Pages

• Server-side▫ CGI (mostly perl)

• Client-side▫ Javascript

The HTTP Hill“Frameworks”

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

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

• State/sessions• Javascript libraries

(Prototype, DOJO, jQuery)

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

The Direct Manipulation Hill

The Direct Manipulation Hill

The Direct Manipulation HillGUI Toolkits

• Common widget set across applications

• Standalone or client-server

The Direct Manipulation Hillfor Internet applications

Browser Plug-Ins

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

on

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

Where does AJAX fit in?

Where does AJAX fit in?

Both hills!

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

Direct Manipulation AJAX

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

Thin Client AJAX Approach

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

A Grid of Images

Example: Google Maps

Sequence

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

Fat Client AJAX Approach

Example: Google Maps

Sequence

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

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

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

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

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?

Some Toolkits

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

…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); list.@java.util.ArrayList::add(Ljava/lang/Object;) (link.id); } }-*/;

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

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/

Javascript as “assembly language”

http://280slides.com

Cappuccino vs GWT

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

▫Alternative to Flash/Flex

Finally

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.

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.

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.

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.

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.