Web Application Solutions

Web Application Solutions: A Designer’s Guide

Overview

As the Web continues to extend its reach into our daily lives, an increasing number of our
interactions will happen online. The practical implication of this for interface designers is lots
of Web application projects that cover everything from filing taxes to sharing photos.

“The fundamental purpose of Web applications is to facilitate the completion of one or more
tasks” [Bob Baxley 1]. But depending on the type and complexity of the tasks involved,
different technical solutions may be better suited to enable the specific interactions each
product requires. Flash, Java applets, DHTML, Active X, Smart Clients, Java Web Start,
SVG— what do you choose and why? What types of interactivity and visual presentation
does each technology enable? What does each limit?

As Web application interface designers, these are questions we encounter time and time
again. As a result, we decided to document what we’ve learned and research what we didn’t
know about the opportunities and limitations that characterize some of the most popular
Web application presentation layer solutions available today. We evaluated each solution
against a consistent set of criteria and described it with a concise definition, set of
examples, and references that enable further analysis. We also shared our findings with a
team of expert reviewers (page 18) to ensure we were on the right track. The end result is
this designer’s guide.

For your convenience, each solution we’ve evaluated is presented on a single-page
snapshot that helps designers, product managers, and business owners make an informed
decision for their Web application’s front-end technology. Of course, this guide is not meant
to be a substitute for consulting with knowledgeable programmers and system architects.
We simply want to prepare you for those discussions.

The right Web application presentation layer needs to meet your specific business, user,
and technology needs and multiple solutions can exist per business and per product. We
hope this guide helps steer you in the right direction.

Luke Wroblewski Frank Ramirez
Principal, LukeW Interface Designs Principal, Ramirez Design LLC

luke@lukew.com frank@ramirezdesign.com

Web Application Solutions: A Designer's Guide | 2

Defining Web Applications

This guide is not intended to define the multitude of presentation layer solutions available for
Web applications. We’re focused on explaining the trade-offs. However, an overview of the
grouping and evaluation criteria we’ve used to describe each solution is required to ensure
we present accurate comparisons.

Web Application (Web-based application)
Web applications are Web-accessible (deployed and/or accessed through a Web browser)
Web-connected (utilize a http connection for information retrieval or display), and
task-oriented (beyond the simple browsing of information) software.

Due to the variance and subjectivity inherent in defining types of Web applications, we’ve
established a continuum from thin client to rich client on which each Web application solution
can be plotted. Many solutions (and their various implementations) have characteristics of
more than one group. For example, DHTML with XMLhttpRequest (commonly referred to as
AJAX) is part thin client and part Rich Internet Application (RIA). Likewise, some desktop
applications really straddle the line between Rich Internet Application and rich client (a.k.a. a
thick client).

Lastly, while you could think of any Internet-enabled desktop application (like Apple’s iTunes
or Yahoo’s Instant Messenger) as a Rich Internet Application, we’ve left this type of software
out of the discussion. Applications that require a traditional client-side install process
(regardless whether or not the install file can be downloaded from a Web server) are not
evaluated within this guide.


Definitions

Thin Client Rich Internet Application (RIA) Rich Client (smart client, desktop client)
Web applications that utilize the Web browser for security, Web applications that enable richer, locally processed user Web-connected applications that do not run within the Web
state management, and script execution (run-time). Most interactions (fluid animation, multimedia content, real time browser and can be delivered as compiled code. Rich Clients
data processing and storage occurs on a remote server and validation, etc.) and advanced remote messaging (Java leverage local processing to enable rich interactions and can
not a user’s local machine. Server request and response Objects, Web Services, etc.). Sun’s Java plug-in and utilize Web Services to connect to distributed data sources and
mostly occurs through the http protocol. Macromedia’s Flash are two of the most common RIA auto-update. Unlike Thin Client applications, Rich Clients can
run-times. RIAs can only run in a Web browser within be used offline and more easily integrate with local hardware
The primary benefits of thin clients are wide reach embedded plug-ins. and software.
(accessible by anyone with a Web browser), open
development platform (built on popular open standards), no The HTTP communication layer used by Thin Client A Rich Client can embed a Thin Client (i.e. a desktop
footprint (quick download, no artifacts on user machines applications technically does not support guaranteed application with an integrated Web browser within which a thin
beyond browser cookies), and deployment/manageability message delivery, does not guarantee the order of message client application can run.
(distributed and maintained from a central source). delivery, and does not support server-initiated
communications. Many RIA communication layers provide Rich Client Solutions:
Thin Client Solutions: reliable messaging and enable server “pushes” of content. Windows Smart Clients
HTML, XHTML Java Web Start
HTML, JavaScript, and CSS (DHTML) Thin Clients that utilize asynchronous JavaScript-driven
DHTML with Remote Scripting via iFrame server requests and responses and advanced DHMTL user
DHTML with XMLhttpRequest (AJAX) interactions (a combination of technologies frequently referred
to as AJAX) are sometimes considered JavaScript RIAs. Upcoming, Interesting, or Relevant Solutions
While this guide focuses on some of the most popular Web
A Thin Client can embed (integrate through a Web browser application solutions available today, there are a number of
plug-in) an RIA (i.e. a Flash module in a DHTML application). relevant technologies that may be considered for specific uses
(i.e. PDF for data entry) or future projects (i.e. XUL or XAML).
Rich Internet Application Solutions:
Flash 6 (and higher) Examples include
Flash with Flex or Laszlo Presentation Server Canoo Ultra Light Client (ULC)
Java Applets Java WebCream
Active X PDF
XSLT
SVG
Macromedia Central
Nexaweb
Xforms
XAML


Solution Continuum

The primary benefits of a thin client are reach (anyone with a Web browser can use it) and
deployment (can be updated and distributed through a Web server). The primary
disadvantages are limited interaction options and typically slower response times. Rich
Internet Applications and Smart client technologies enable richer (desktop-like) interactions,
more sophisticated messaging, and prevent server request/responses from having to rewrite
entire pages. They also maintain some of the deployment and updating benefits of thin
clients. The chart below overlays popular Web application technology solutions on a
continuum from thin to rich client. Most solutions fall within a range on the continuum.

Each Web application solution falls on a continuum from thin client to rich client, though some solutions really "straddle the line". A Smart Client can even embed a Thin Client (within
a Web browser inside a rich client) and a thin client can embed an RIA (i.e. Flash module in a DHTML application).

Thin Client Rich Internet Application (RIA) Rich Client
Delivered in the Web browser; uses Usually delivered as embedded Compiled run-time on local
browser security, state management, run-time within Web browser machine; can use local and
and script execution; http for data (plug-ins); goes beyond http for remote resources; can run
request/response. remote data request/response. offline.

XMLhttpRequest (& DHTML) Java Applets Java Web Start

HTML DHTML ActiveX

Remote Scripting (& DHTML) Flash (Flex & Laszlo) Smart Client

Open Rich User Experience
Built on popular open standards
Desktop-like interactions; multimedia;
state-ful applications
Wide Reach
Accessible by anyone with a Web Local Processing & Integration
browser; usually operating system Most responsive UI; local hardware &
independent software integration
No Footprint UI Toolkits
Quick download of pages as needed; no
Robust UI libraries & toolkits; reduced
application footprint
development time
Deployment Offline Availability
Updated and distributed through a Web
Network connectivity not required
server


Evaluation Criteria

Each Web application solution was evaluated against the following criteria.

User Experience Processing Unique Features
What user interactions are possible? (drag and drop, fluid How much application logic can reside on the client-side? Are there unique security concerns? Is application logic
animation, auto-saving, real-time validation, non-linear What type of action requires a trip to the server? What is the exposed? Can the application run offline?
workflows, integrated audio and video, etc.) Does each impact to the UI for a server request? How fast are the initial
user action require a full-page rewrite (as in the case of load and subsequent response times of the user interface? Future Proofing
HTML/http solutions)? How well integrated is the user What kind of remote messaging is possible (http, Web What level of support is available for the solution? If the
interface with the Web browser environment (Back, History, Services, Java objects, etc.)? Can server requests run technology is proprietary, does the vendor have a proven
etc.) and/or local operating system (local hardware and uninterrupted (in the background) while the user focuses on record of product support? Does the solution conform to
software integration)? Can application states be easily other tasks? existing standards?
maintained?
Interface Components & Customization Staffing & Cost
Deployment & Reach Does the solution include an easily accessible library of UI What are the costs required to build out the solution? Are
How can users access the application? Do they need elements? Are the elements easily customizable? Is there a technology experts easily found? What tools exist to reduce
specific Web browsers, Web browser plug-ins, Web WYSIWYG development environment (IDE) that leverages costs? How long is a typical development cycle?
browser settings, operating systems, devices (mobile, etc.), the UI library? Can the interface be easily transformed for
or local applications? How large is the reach of the different devices (i.e. mobile)? Can the user interface be built
application? Can search engines index the content within with grid or flexible layouts, or both?
the application? How is the application deployed (install,
download, footprint, etc.)? Back-end Integration
What back-end technologies enable this front-end solution?
What is required on the back-end? Does the solution increase
or decrease server loads?


HTML, XHTML

Overview:
HTML is a document markup language for structure, presentation and monodirectional linking. XHTML is a reformation of HTML that is XML-compliant. Data requests are sent through the Hypertext
Transfer Protocol (http) standard.

Benefit Drawback Neutral

User Deployment Components Back-end Unique
Experience & Reach Processing & Customization Integration Features Future Proofing Staffing & Cost

Elements that can Has the biggest Application states HTML can be Can be delivered Code exposed - Relatively easy to Relatively easy to
be specified in reach- can be can be achieved styled with CSS with JSPs, easy to copy port to other find people with
HTML are familiar rendered by any through cookies, (Cascading Style Servlets, ASP, devices such as HTML, XHTML
to the largest browser. is server-side apps, Sheets) ASP.NET, JSP, PDAs, phones, etc. programming skills.
amount of Web standardized and and/or URLs ColdFusion, PHP,
users (including available to users Flexible layouts are and more. Code is likely to be WYSIWYG
back, history, running all types of Client requests possible, fixed grid forward-compatible development
bookmarking, etc.) software. Effective require full reloads are difficult to due to standardiza- environments and
for users with slow of Web pages to maintain consis- tion. content manage-
Small file sizes: connections. update displays tently across ment systems
quick download increasing browsers. (CMS) widely
times Search engines download times available
can index content and server loads Components
Sufficient for limited to those
relatively static HTTP requests do available through
content and trivial not support HTML markup
tasks guaranteed
message delivery,
Limited to form guaranteed order
entry, data display, of message
and link navigation delivery, nor
server-initiated
Integration with communications
local resources (push)
(hardware &
software) is nearly
impossible

Examples: Read More:
• Craigslist – online local classified ads • http://www.w3.org/MarkUp
• Bloglines • http://www.oreilly.com/catalog/html4

HTML, JavaScript and CSS (aka DHTML)

Overview:
DHTML is not a programming language, but the combination of HTML, JavaScript (or VBScript). and Cascading Style Sheets (CSS). JavaScript is a cross-platform, object-oriented scripting language.
JavaScript is also small, lightweight, and was designed to be embedded in other products and applications, such as web browsers. Inside a host environment, JavaScript can be connected to the objects
of its environment to provide programmatic control over them [2].



See HTML... See HTML... See HTML... See HTML... See HTML... See HTML... See HTML... See HTML...

Elements that can Most content can Reduced server Some UI compo- Code is likely to be Small size reduces
be specified in be indexed by loads may be nents can be forward-compatible bandwidth costs
HTML are familiar search engines. achieved through custom made. ie: due to open
to the largest increased local sliders standards Relatively easy to
amount of Web Works with most processing supported by find people with
users modern browsers (dynamic hiding, Toolkits: multiple browser DHTML program-
(4.x browsers and revealing, dynamic drive, vendors. For ming skills.
Animation later) repositioning, and dynarch.com, example: W3C
(repositioning and rewriting of softplex.com, DOM (Document Higher develop-
motion), drag and JavaScript may be interface elements) navsoft.com, Object Model) ment costs due to
drop, layering, and turned off by users and many more activity sophisticated,
style changes are and administrators Logic is delivered branching code
enabled for to browser with (required to
interface elements HTML page and support multiple
can be dissected. browsers)
Inconsistent As a result, secure
support for data cannot be Common UI
transparency and sent this way features can be
layering (passwords, serial difficult to
numbers etc.) implement
Usually has faster (tabbing, tabular
download times, data, tree views,
though large drag and drop,
JavaScript apps saving, etc.)
can be slow to load

No easy way to
integrate audio &
video content Examples: Read More:
• TurboTax –file your tax returns (http://www.turbotax.com) • Dynamic Duo –Cross browser Dynamic HTML
• Yahoo! Mail [http://www.jalix.org/ressources/internet/dhtml/_dynduo/dynduo/]
• Hotmail • What is DHTML? [http://webmonkey.wired.com/webmonkey/geektalk/97/39/index3a.html]

DHTML with Remote Scripting via iFrame

Overview:
See DHTML Overview... An iframe is an inline frame (placed inside another HTML page) that contains a separate HTML page with its own URL. DHTML can use hidden iFrames to get information from
the server without refreshing the page [Ashley 3]



See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML...

Applications are Works with most iframes can be reduced server Higher develop-
more responsive modern browsers dynamically loads due to more ment costs due to
(Internet Explorer refreshed with processing on sophisticated,
Linking to, saving, 5.5+, Netscape 6+, server-side content client-side branching code
and book-marking and Mozilla 1+) with Javascript and (required to
content can be a DOM ID support multiple
tricky. Dynamic content browsers)
won’t be indexed Only enables
Content may be by search engines content to be Extra effort
incorrect when loaded in a required for good
users click reload pre-defined area accessibilitiy (ie:
and back buttons (frame) on a Web screen readers)
page (though
iframe content can
be put in a DIV and
moved procedur-
ally)

Read More:
Examples: • http://www.cs.tut.fi/~jkorpela/html/iframe.html
• http://farechase.yahoo.com (Flight Search only. Hotel search uses xmlHttpRequest) • Remote Scripting with iframe [http://developer.apple.com/internet/webcontent/iframe.htm]

DHTML with XMLHttpRequest (aka AJAX)

Overview
See DHTML Overview... XMLHtttpRequest is an object that allows (compatible) web clients to submit and retrieve XML data from a server without reloading the page. JavaScript processes the data in
the background and renders it via the Document Object Model (DOM) [Garret 4]. This can happen asynchronously, allowing the user to continue with his task while the data gets processed and updated.



See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML... See DHTML...

Enhance user XMLHtttpRequest Further reduction in Due to large XMLHttpRequest is Higher develop-
experience with is available in server loads due to interest in the web an API that ment costs due to
better, faster forms. Netscape/Mozilla, processing on the development belongs to sophisticated,
Enables real-time Internet Explorer client side and pure community, Microsoft-could be branching code
updates and 5+, and Safari data requests DHTML toolkits depreciated. (required to
validations as user browsers (without presenta- with XMLHttpRe- However W3C has support multiple
moves from field to (Safari & Opera tion layer) after the quest are sure to initiated a similar browsers)
field or even after can only support a initial load. come soon. (For “XML Load and
each character subset of requests) now, see SAJAX Save Specification” Extra effort
entry. No socket and JSON-RPC) in DOM Level 3. required for good
Content requested connections - accessibilitiy (ie:
Content may be through server can not screen readers)
incorrect when XMLHttpRequest initiate communica-
users click reload object cannot be tions to client app
and back buttons indexed by search
engines or read by
Linking to, saving, some screen
and book-marking readers.
content can be
tricky

Enhanced
functionality within
a web browser can
be difficult to
communicate
Examples: Read More:
• www.gmail.com (load JavaScript engine at start of session) • http://developer.apple.com/internet/webcontent/xmlhttpreq.html
• map.search.ch • XMLHttpRequest for the masses: http://www.allinthehead.com/retro/241/xmlhttprequest-for-the-masses
• maps.google.com • http://www.standards-schmandards.com/index.php?2005/03/01/16-ajax-and-accessibility
• www.flickr.com (edit the titles of your photos in situ) • Simple Ajax Toolkit: http://www.modernmethod.com/sajax/
• www.fiftyfoureleven.com/resources/programming/xmlhttprequest/examples • JSON-RPC: http://oss.metaparadigm.com/jsonrpc/

Flash 6 (and higher)

Overview:
Macromedia’s Flash 6+ is a multi-platform plug-in installed in most Web browsers as well as an application for developing content, interfaces, and applications. Flash 6+ supports rich
vector-graphics, animation, and the ability to build advanced web applications using scripting, forms, XML, and server socket connections. Flash 5 has limited support for some of these feature
sets.



Flash offers a rich According to Built-in ActionScript Flash Pro comes Reduction in server Applications can be Given proprietary Decrease costs by
set of features for Macromedia, Flash enables dynamic wtih many pre-built loads due to ported to Flash Lite format, APIs may developing/testing
engaging interac- 6+ is installed on processing without components: data processing on the for use on mobile change from once for all
tions including drag 95.1% of Internet- page reloads grid, tree view, client side and pure devices (w/Flash 4 version to version. platforms
and drop, enabled desktops (server hits) accordian, menu data requests functionality) However,
animation, in the US, over bar, etc. (without presenta- Macromedia ActionScript 2 is
transparency, 96% in Europe and Natively supports tion layer) after the Can enable back seems to be object-oriented and
layering, audio and Canada and 92% vector graphics, Many additional initial load. button by access- committed to based on ECMA
video streaming. in Asia. streaming audio, Flash UI toolkits ing history object standards such as Script (like
and streaming and components Socket connections CSS, XML, SOAP, JavaScript), so
Enables real-time Applications video available by 3rd allow server- Bad rep from SVG, etc. developers familiar
updates and delivered through parties initiated communi- designers w/JavaScript can
validations as user the Flash player Client-side cations to client reinventing simple quickly pick up
completes form can run identically XML/DOM parsing Both flexible and app UI widgets (in part ActionScript
fields on all the major has latency issues grid layouts are due to Flash’s
operating systems possible (using Flash 6+ can be component set) However,
Potential latency container objects) used as the programmers with
due to relevantly Near seamless presentation layer In theory code is relevant Flash
large initial upgrade process Flash’s standard with common protected, but in experience are
download and for plug-in components are server technologies reality it can be relatively scarce
plug-in launch not easy to such as Java cracked with
Traditional tracking customize Servlets, JSP, simple tools. Development could
Not fully integrated and metrics can be PHP, ASP, etc. take longer
with browser problematic; but Can be connected because everything
environment has ability to track to things like Flash must be created
(reload, back specific states Communication from scratch:
buttons and Server to enable concept of pages,
bookmarks). Flash content is not real time AV Chat, links, browse
Workarounds exist indexed by search IM, etc. between history, scale, etc.
engines. (work- Flash Clients
Read More:
arounds exist)
• Flash Installation Stats:
http://www.macromedia.com/software/player_census/flashplayer/version_penetration.html
Examples: • Accessibility: http://www.macromedia.com/macromedia/accessibility/features/flex/best_practices.html
• Rich Internet Applications (http://www.klynch.com/archives/000074.html) • Java and Flash socket connections: http://www.dagblastit.com/java/sockets.html

Flash with Flex or Laszlo Presentation Server

Overview:
See Flash Overview...Flex and Laszlo offer presentation servers that can be installed on the server side. Each has a rich library of user interface components, an XML-based markup language used to
declaratively lay out these components, and an object-oriented programming language which handles user interactions with the application [Coenraets 6].



Further reduction in Flex’s MXML toolkit Presentation tier Macromedia has Laszlo and Flex
server loads due to provides compo- (ASP, JSP, abandoned server presentation
processing on the nents with standard Servlets, ColdFu- products in the servers can speed
client side and pure presentation sion, Flex or past including: up development
data requests Laszlo) can Drumbeat,
(without presenta- Flex’s MXML code integrate with SiteSpring, Laszlo presentation
tion layer) after the can be styled with common back- LikeMinds, Kawa, server is open
initial load. CSS or Flash ends (EJB, Java etc. (Most of these source
Beans and Web features are rolled
Laszlo presentation Laszlo’s LZX toolkit Services , etc.) into other products Flex Builder IDE
server has provides compo- such as Flex or makes it relatively
performance nents with standard DreamWeaver) easy to build
issues presentation applications with
Flex
Laszlo only
compiles to Flash 5 Development in
standard (Laszlo Flex/Laszlo more
has Flash 6 in familiar to
beta) traditional
developers
(relative to Flash
programming)

Flex presentation
server is expensive

Laszlo does not
have a comparable
IDE to Flex Builder
Read More:
• Flex Overview: http://www.macromedia.com/software/flex/productinfo/brz_overview/
Examples: • Laszlo Overview: http://www.laszlosystems.com/products/
• Laszlo: Behr Color Smart: http://www.behr.com/behrx/index.jsp • Comparison of Flex vs. Laszlo: http://www.infoworld.com/article/04/12/03/49TClasflex_1.html
• Flex: http://www.macromedia.com/devnet/flex/example_apps.html • IDE for Laszlo: http://alphaworks.ibm.com/tech/ide4laszlo

Java Applets

Overview:
A Java Applet is a small program written in the Java programming language that can be embedded in an HTML page. Java applets can run in a web browser using a Java virtual machine (JVM)



Java Applets offer Java applets Applets are Swing and HTTP, HTTPS, Applets can write Java is more Many developers
a rich set of require the Java embedded in web JavaBean controls FTP, and Gopher to local disk if they commonly used as who know Java
features for plug-in or Java pages and go available are supported in are digitally signed a platform than it is relatively available
engaging interac- Virtual Machine beyond http for the 1.2.2 release of (via a dialog for applets
tions including drag (JVM) already remote data Swing can be slow Java Plug-in window)
and drop, installed in most request/response and cumbersome Software. The use of applets
animation, and browsers. in a web-based Applets run in a does not seem to
other UI elements Plug-in needs to be client UI Full Java Compat- “sandbox” so few be matching the
found in traditional Java Plug-in installed only once ible support; offer security concerns growth of the Web
desktop apps. supports IE and and then it caches all the benefits of exist; strict rules on
Netscape 3.0+ on all applets. the Java language, how an applet can Microsoft decided
Enables real-time Windows 95, 98, including portabil- interact with your to stop shipping a
updates and NT 4.0, and Solaris Very good ity, faster develop- computer and the JVM with it's
validations as user 2.5 and 2.6. JVM processor-intensive ment, powerful API network newest versions of
moves completes download is 5MB visualization libraries, etc. [1] Internet Explorer
forms rendering Network access
Inconsistent (interactive and Can create a only to the
Latency due to browser implemen- dynamically socket connection launching server;
relevantly large tations. (However, generated graphs, to servers and only reliable source
initial download Sun’s Java plug-in charts, etc.) stream data of data and storage
and plug-in launch allows applets to between the applet for an applet is on
run in Sun’s Java Can offload and the server its host server.
Linking to, saving, Runtime Environ- server-side Applets are not
and book-marking ment to ensure processing to the permitted to invoke
content can be consistency) client to save both any local execut-
tricky CPU overhead and able program on
Java Applet network bandwidth the client's
content is not machine.
indexed by search
engines.
Examples:
• http://java.sun.com/applets/ Read More:
• Catalog View is a useful database applet that can display your data in a grid display. • http://www.matisse.net/files/glossary.html
http://javaboutique.internet.com/CatalogView/ • Sun hasn't set yet on Java applets, Rick Moore http://www.adtmag.com/article.asp?id=7074

Active X

Overview:
Active X is an application program interface (API) developed by Microsoft that extends and enhances the functionality of web sites viewed in Internet Explorer. When accessed through Internet Explorer,
Active X controls can have full access to the Windows operating system.



Adds interactive Works on most Reduced server There are many Active X can Active X controls Microsoft will Can be developed
features and Windows machines loads due to ActiveX controls integrate directly can be reused in determine the in Windows IDE
animation found in processing on the available with with SQL servers other Microsoft future of Active X tools.
traditional desktop Active X controls client side and pure functionality and many other programming and (hasn’t received
applications can be installed on data requests ranging from server technolo- database much development
the user’s (without presenta- simple to full- gies. languages. attention from
Integration with computer and run tion layer) after the featured spread- Microsoft for
local resources locally during initial load. sheets and word Access to local number of years)
(files, hardware, subsequent processors. resources can
office applications, sessions. Ability to create create security Increased use of
etc.) possible socket connections issues (Mandatory non-windows
Not cross-platform and server initiated registration system platforms (ie: Max
(Microsoft communications for Active X OS X, mobile
Windows only), not controls helps deal technologies, etc)
recommended with this issue)
when user
platforms can vary

Read More:
• http://msdn.microsoft.com/library/default.asp?url=/workshop/components/activex/intro.asp
Examples: • http://msdn.microsoft.com/workshop/components/activex/intro.asp
• http://activex.microsoft.com • Security issues: http://office.microsoft.com/en-us/assistance/HA011403101033.aspx


Java Web Start

Overview:
Java Web Start is an application that enables Java client applications to be launched, deployed, and updated from a standard Web server.



Applications are Java Web Start Same as any Java Same as any Java Applications must Applications work Free, Redistribut-
cached locally version 1.0 or 1.0.1 desktop application desktop application be packaged in offline able in 12
once downloaded must be installed accordance to the languages
on the client Java Web Start Java Web Start
Supports complete machine (10 MB guidelines allows client-side Applications can be
desktop interac- file); then applica- Java applications written normally as
tions tions can be Can only be used access to a variety stand-alone
deployed via URLs for client Java of local-machine applications for the
Applications are applications written resources, such as Java 2 platform
launched indepen- Locally cached for the Java 2 file access, and
dent of Web version of platform clipboard access
browser application is (require dialog box
automatically Requires custom acceptance)
Variable applica- updated when run code on server;
tion access may be and remote version requires special Not well-suited for
counter-intuitive to has been updated configuring of the deploying
users JNLP MIME type applications to
Available on mobile devices
Windows, Solaris,
OS X (pre-
installed), and
Linux

Requires manual
installation of Java
Web Start on each
client machine
(more tedious than
browser’s
automatic
Read More:
installation of Java
• Java Web Start to the rescue, Raghavan N. Srinivas
plug-in)
Examples: http://www.javaworld.com/javaworld/jw-07-2001/jw-0706-webstart.html
• http://www.up2go.net (More Than 70 Apps Listed; Apps Are Rated) • Unofficial Java Web Start/JNLP FAQ, Gerald Bauer: http://webstartfaq.com/
• http://www.connectandwork.com/external • http://www-106.ibm.com/developerworks/java/library/j-webstart/

Windows Smart Clients

Overview:
A smart client is a windows application that bridges the gap between thin clients and rich clients. Smart clients are
web-maintainable and deployable (can load components it needs to run from a remote location), yet offer rich interactions
through compiled, local runtimes



Full desktop Works on most Server and network Windows form Can use SOAP, Applications can Microsoft has a Developers can
interactions are Windows machines load is reduced libraries available XML, HTTP, etc. run offline development use Microsoft
possible (direct (Requires Microsoft because compo- for data roadmap to Visual Studio .NET
manipulation, Windows .NET nents are only Currently only .Net framework continue enhancing as a drag and drop
hotkeys, etc.) framework) updated if needed. supports grid provides security smart clients over IDE
layout (flexible through code the next several
Application Smart clients can Peer to peer layouts will be access security years. Reduce develop-
components can be deployed by connectivity is supported in (CAS) infrastruc- ment and mainte-
be downloaded CD, DVD, an possible through Longhorn smart ture nance time due to
dynamically as application ability to listen for clients) applications not
needed allowing deployment incoming network Multiple versions of subject to DLL
applications to load infrastructure, or a requests a smart client conflicts
quickly web server using application can
HTTP Initial dowload can target specific
Integration with be larger than devices
local resources Not cross-platform, comparable thin
(files, hardware, not recommended client solutions
office applications, when user
etc.) possible with platforms can vary
.NET framework

Variable applica-
tion access may be
counter-intuitive to
users

Read More:
• http://msdn.microsoft.com/netframework/programming/winforms/smartclient.aspx
• http://msdn.microsoft.com/architecture/journal/default.aspx?pull=/library/en-us/dnmaj
Examples: /html/choosing_presentation_layer.asp
• http://www.windowsforms.net/Default.aspx?tabindex=6&tabid=48 • www.code-magazine.com/Article.aspx?quickid=050023

Upcoming, Interesting and Relevant Technologies

Canoo Ultra Light Client (ULC) Nexaweb Xforms
Build Rich Internet Applications with Java standards. ULC’s Nexaweb provides a software platform for developing and Traditional HTML Web forms don't separate the purpose from
pure java library offers a server-side API to Swing (servlet deploying Enterprise Internet Applications. The Nexaweb the presentation of a form. XForms, in contrast, are comprised
or bean), providing rich GUIs for J2EE applications. platform includes the following: 1) J2EE server component, 2) of separate sections that describe what the form does, and
Java-based thin-client presentation engine needs to be 150k java-based client app, 3) real-time messaging layer, 4) how the form looks. This allows for flexible presentation
installed once for any number of applications; may be WYSIWYG development environment. options, including classic XHTML forms, to be attached to an
deployed by Java Web Start, as an applet, or by any other • http://www.nexaweb.com/products.asp XML form definition. XForms 1.0 is a W3C recommendation.
deployment mechanism • http://www.w3.org/MarkUp/Forms/
• http://www.canoo.com/ulc PDF & XDP
Adobe is trying to evolve PDF into an allpurpose fill-in-the- XSL & XSLT
Java WebCream forms container for Enterprise workflows. The new Adobe tool The eXtensible Stylesheet Language (XSL) is a vocabulary
Acts as a Java AWT or Swing to HTML bridge. It is a will have an IDE for creating forms in XDP files describing how to format eXtensible Markup Language(XML)
dynamic Java to HTML converter. WebCream turns thick that are a superset of PDF and will use JavaScript as the for different media.
client GUI applications and applets into DHTML websites. programming API [6]. XSL Transformations (XSLT) can transform data using one
• http://www.adobe.com/products/acrobat/readstep2.html XML vocabulary into another. XSLT processors can be
Macromedia Central installed on the server or executed within certain web
Unlike conventional web sites, Central applications can SMIL browsers. XSLT have performance issues in high-volume
function both online and offline, keeping important The Synchronized Multimedia Integration Language (SMIL, applications.
information constantly available. Central applications run in pronounced "smile") HTML-like authoring language for • http://www-106.ibm.com/developerworks/xml/library/x-
a controlled environment to keep sensitive data secure. interactive audiovisual presentations. xslt/?article=xr
And because Central automatically notifies the user when • http://www.w3.org/AudioVideo/ • http://www.xml.com/pub/a/2003/11/26/learnXSLT.html
new versions are available, applications are always
up-to-date.
SVG XUI
• http://www.macromedia.com/software/central XUI is a Java and XML framework for building rich client,
Language for describing two-dimensional graphics in XML.
Graphics can be vector, bitmap or text. Promises the following desktop and mobile applications (including PDAs).
Macromedia Director features: rich manipulation of graphic objects, leverage of • http://xui.sourceforge.net/
A well-established way to create and deploy applications W3C specifications and standards efforts, ability to use
for CDs, DVDs, kiosks, and the Internet light-weight vector graphics for fast downloads, high resolu- XUL
• http://www.macromedia.com/software/director tion, high quality printing. XML User Interface Language developed by Mozilla.
• http://www.adobe.com/svg/demos/main.html Pronounced “zool”. It is a markup language used to create
Microsoft’s Avalon & XAML • http://www.w3.org/TR/SVG/intro.html dynamic user interfaces. Provides access to programming
Avalon is the platform for the next-generation of Microsoft • http://www.w3.org/Graphics/SVG/SVG-Implementations interfaces such as read/write over the network or communicat-
Windows client applications. It will create a new presenta- ing with web services. Compatible with many standards such
tion platform by combining the features of the DHTML, a as HTML, XHTML, XSLT, CSS2, DOM2. Will not work with
vector-based display engine, and Win32 development Microsoft Internet Explorer.
platforms. XAML, Avalon’s markup language used to • http://www.xulplanet.com/tutorials/xultu/
declaratively represent the user interface, enables the • http://xulplanet.com/tutorials/whyxul.html
separation of UI design from the underlying code.
• http://msdn.microsoft.com/Longhorn/understanding/pillars
/avalon/avnov04ctp/default.aspx


Authors

Luke Wroblewski is an interface designer, strategist, author, Frank Ramirez, Principal at Ramirez Design LLC, is a user Reviewers
and Principal at LukeW Interface Designs, a consulting firm experience strategist, researcher, and design consultant. Frank Much thanks to the following individuals who contributed to the
he founded in 1996. Luke has authored a book on Web has led the design of many digital products and services, ideas and accuracy of this paper:
interface design principles titled Site-Seeing: A Visual including e-commerce applications, touch-screen kiosks, rich
Approach to Web Usability (Wiley & Sons, 2002) and multiple internet applications, intranets and training programs. Clients Benjamin Wigton, Lead Interface Engineer, Avenue A /
articles on interface design including those featured in his include Yahoo!, eBay and numerous start-ups. Razorfish
own Web-zine, Functioning Form. David Heller, Steering Committee Member, Interaction
Prior to starting his consultancy, Frank was Sr. Information Designer's Group (IxDG)
Previously, Luke taught Interface Design courses for the Architect at Walmart.com where he led requirements definition Dirk Knemeyer, Principal, Involution Studios
Graduate School of Library and Information Science at the and information architecture for multiple in-store, online and Erin Malone, Director, Platform Design, Yahoo! Inc.
University of Illinois at Urbana-Champaign and worked as a cross-channel initiatives. He participated in a wide variety of James Reffell, Sr. UI Designer, eBay Inc.
Senior Interface Designer at the National Center for project activities including: discovery research, concept Jamie Hoover, Sr. UI Designer, eBay Inc.
Supercomputing Applications (NCSA), birthplace of the first generation, usability testing, cross-functional collaboration, IA Johnathan Boutelle, Principal, Uzanto Consulting
readily available graphical Web browser, NCSA Mosaic. At documentation and communication. Michael Hoch, Director of Prototype Design, Yahoo! Inc.
NCSA, Luke designed interface solutions for Peter Bogaards, Founder, BogieLand Information Design &
Hewlett-Packard, IBM, and Kellogg's, and co-developed the Frank earned his B.S. in Graphic Design and has designed Information Architecture
Open Portal Interface Environment (OPIE). Luke's research enterprise-level web applications since 1996. Sarah Allen, Software Architect, Laszlo Systems,
on Web-based interface designs has been published and Todd Warfel, Partner, Design & Usability Specialist,
presented at national and international conferences. MessageFirst
Uday Gajendar, User Experience Pathfinder, Adobe Systems
Inc.
Ziya Oz, Consultant, Application Strategy/Architecture/Design

*Note: The opinions of these reviewers may not reflect those of
their employers.


References

[1] Bob Baxley, What is a Web Application?. Boxes And Alex Kalinovsky. Savor success with Java on the front end. Marc A. Garrett. Review: Macromedia Flex and Flex Builder
Arrows, 2003 HTML, Swing, or XML: Choose the best front-end http://digital-web.com/articles/macromedia_flex_and_flex_b
http://www.boxesandarrows.com/archives/what_is_a_web_ technology for your Java development uilder/
application.php http://www.javaworld.com/javaworld/jw-04-2001/jw-0420-swi
[2] Croczilla.com, Core JavaScript Guide 1.5. ng.html Drew Falkman. Review: Macromedia Flex, Java Boutique
http://www.croczilla.com/~alex/reference/javascript_guide/i http://javaboutique.internet.com/reviews/macro_flex/
ntro.html Sun hasn't set yet on Java applets, Rick Moore
[3] Brent Ashley, Ashley IT. http://www.adtmag.com/article.asp?id=7074 Open Sourcery. Overview - Macromedia Flex
http://www.ashleyit.com/rs/main.htm http://www.theopensourcery.com/osrevFlex.htm
[4] Jesse James Garret, Ajax: A New Approach to Web Chapter 4: Java Applets. Internet Computing
Appications. http://www.cs.swan.ac.uk/~csneal/InternetComputing/index. Mark Eagle. Integrating Macromedia Flex with Java,
http://www.adaptivepath.com/publications/essays/archives/ html O’Reilly
000385.php http://www.onjava.com/pub/a/onjava/2004/12/01/flexjava.ht
[5] Christophe Coenraets, An Overview of MXML, the David Hill, What is a Smart Client anyway? ml
Macromedia Flex Markup Language. http://blogs.msdn.com/dphill/articles/66300.aspx
http://www.macromedia.com/devnet/flex/articles/paradigm. Drew McLellan. Very Dynamic Web Interfaces
html David Hill, Choosing the Right Presentation Layer http://www.xml.com/pub/a/2005/02/09/xml-http-request.html
[6] The Open Sourcery. Architecture. Microsoft Corporation
http://www.theopensourcery.com/osrevFlex.htm http://msdn.microsoft.com/library/default.asp?url=/library/en- Peter-Paul Koch. Ajax, promise or hype? O’Reilly
us/dnmaj/html/choosing_presentation_layer.asp http://www.quirksmode.org/blog/archives/2005/03/ajax_pro
mise_or.html
Microsoft Corporation. Smart Client Application Model and
Jonathan Boutelle. Flash RIAs vs. Javascript RIAs the .NET Framework 1.1 Drew Falkman. Review: Canoo ULC 5.1, Java Boutique
http://www.jonathanboutelle.com/mt/archives/2005/03/flash http://msdn.microsoft.com/netframework/programming/winfo http://javaboutique.internet.com/reviews/canoo_ulc/
_rias_vs_j.html rms/smartclient.aspx
Overview. Web-enabling Java by Java to HTML converter
Adam Rifkin Markus Egger. The Revenge of the Thick Client http://www.creamtec.com/webcream/overview.html
http://ifindkarma.typepad.com/relax/2004/12/weblications.ht www.code-magazine.com/Article.aspx?quickid=050023
ml Coach K. Wei . Why Web Applications Can be Problematic
James R. Borck. RIA platforms lend apps more Flash: and Unreliable
Kevin Lynch. Rich Internet Applications: It's Happening!, Macromedia Flex and Laszlo Presentation Server bring new http://www.sys-con.com/story/?storyid=47364&de=1
Macromedia tricks to Internet application delivery
http://www.klynch.com/archives/000074.html http://www.infoworld.com/article/04/12/03/49TClasflex_1.ht
ml


Web Application Solutions

More Related Content

What's hot (20)

Similar to Web Application Solutions (20)

Recently uploaded (20)

Web Application Solutions