Can you write REAL
applications with AJAX?
Phil Sarin
Advanced UI Software
April 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 Hill
Static Pages
• Server fetches and returns a
web page
• Initially just text-based
• With Mosaic, pictures too
The HTTP Hill
Dynamic 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 Hill
Pros/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 Hill
GUI Toolkits
• Common widget set across
applications
• Standalone or client-server
The Direct Manipulation Hill
for Internet applications
Browser Plug-Ins
• Flash, Java, Silverlight
• Took a long time to catch on
The Direct Manipulation Hill
Pros/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
Feedback Speed
Thin AJAX
Winner (tied)
Winner (tied)
Interactive
Potential
Scalability
Winner
Winner (tied)
Winner (tied)
Cross-platform
Consistency
Momentum
Ease of
Programming
Plugin
(Flash, Swing)
Winner
Google does a lot
of work for you.
?
Winner
Adobe does a lot
of work for you.
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/DevGu
ideUserInterface.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/Objec
t;) (link.id);
}
}-*/;
http://code.google.com/webtoolkit/doc/1.6/DevGu
ideUserInterface.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 1
adaptive 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/adobewants-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 2
Dare Obasanjo aka Carnage4Life - What Comes After AJAX? (n.d.). . Retrieved
April 8, 2009, from
http://www.25hoursaday.com/weblog/PermaLink.aspx?guid=11c471d6-ea654ed2-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 3
Echo2 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/followingup-on-the-microsoft-of-the-web/.
LaszloWhitePaper.pdf. (n.d.). . Retrieved April 8, 2009, from
http://www.openlaszlo.org/whitepaper/LaszloWhitePaper.pdf.
References 4
Mesbah, 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.