Designing Powerful Web Applications with AJAX

1
Designing Powerful Web Applications with AJAX
Other Rich Internet Applications

• David Malouf Bill Scott
• UI 11
• Cambridge, MA
• October 9, 2006

2
Breakdown of the day

• Section 1 from the beginning
• Defining RIAs RIA Technologies
• How to pick the right technology for your project
• Looking at current examples of RIAs
• Section 2 Interaction Design for RIAs
• Understanding Patterns
• AJAX Design Patterns
• Design Principles
• Section 3 Design Practice
• Tools of the trade
• Designing
• Communicating Design
• Communicate this RIA (exercise)
• Section 4 Design your own RIA
• What is designthe verb?
• Design your own RIA (exercise)

3
What is an RIA?

• Give credit, where credit is due
• Macromedia (today Adobe) coined the term Rich
  Internet Application to describe the growing
  trend of adding media richness (more motion
  internal to a single page view) due to the
  creation of applications using their product
  Flash MX.
• The simple answer
• Connected
• Distributed
• Local
• Intelligent
• Moving

4
What does it mean for us today?

• Emulating desktop behaviors
• Cinematic Effects
• Client-side (in browser)
• Data management
• Business logic management
• Re-definition of the page metaphor
• Connection to local machine (optional)

5
Emulating Desktop Behaviors

• Drag Drop
• Menu Tool bars
• Windows Wizards
• Panels
• Trees
• Form validation

• Non-HTML controls
• Accordian
• Combobox
• Spinner box
• Sliders
• Keyboard Actions
• Context Menus

Google Spreadsheet
Gliffy
6
Cinematic EffectsAnimation for added context

• Where am I going? Where was I?
• Action completion
• Object state change
• System progress
• Animation for aesthetic reasons is also viable

LaszloSystems
7
What happens to our page?
There is no page. - Neo There is no page
only pathways -- Emily Chang Max Kiesler of
ideacodes
A page is a metaphor of a moment of uninterrupted
context
Kayak
NetFlix
8
Whats all the fuss about Web 2.0?

• OReilly as trend spotter
• RIAs is only one component of the trend
• Other components
• User generated
• Mashed up Remixed
• Open iterative
• Limited designer role (if at all)
• Separately nothing new, but a trend (critical
  mass) makes it worth noting.
• Sir Tim Berners-Lees warning not to create new
  bubble The Register Aug 06

9
The Technologies Behind RIAs

• DHTML HTML JavaScript CSS
• AJAX DHTML XML(or JSON)
• Flash
• Browser Extensions/Plug-ins
• Java
• ActiveX
• Others not to be discussed
• XUL, CURL, etc.
• Backend Frameworks

10
Pure Browser DHMTL AJAX

• Nothin but browser
• Uses very open technologies
• Allows for simple richness
• AJAX new info from server without page refresh
• A JavaScript call makes a query to the server
• Server returns XML
• JavaScript manipulates CSS to reformat XML in
  place on existing screen

11
Visualizing the AJAX effect
JJ Garrett-Ajax A New Approach to Web
Applications (Feb 2005)
12
Flash (by Adobe)

• Requires an installed plug-in
• Created to bring animation and interactivity to
  the web
• Uses vector graphics
• Not native, but ubiquitous // open format
• Visual development environment
• Tied to Flex development environment

Empressr
13
Extensions

• Different browsers have different ways of adding
  extensions to themselves.
• Behaves as if a part of the browser
• Toolbars
• Status bars
• Sidebars
• Menu add-ons
• Greasemonkey for Firefox

Del.icio.us Firefox Add-on
14
Java ActiveX (with .NET)

• Installed applications that can
• run inside the browser window
• control the browser
• connect the browser to the rest of the local
  client
• Virtual Machines Frameworks
• Java requires a pre-installed virtual machine or
  emulator. Once installed any Java-base
  application can run.
• Frameworks are a collection of components and
  controls
• .NET requires the installation of the framework
• SWING or AWT are two frameworks for Java

Ofoto
15
Backend Frameworks

• DOJO
• Script.aculo.us
• Rico
• Ruby on Rails
• ASP.NET
• Yahoo! User Interface Library (YUI)
• Atlas
• Backbase

16
Choosing a Technology

• Deployment Environment
• Local clients
• Enterprise considerations
• Iteration cycles
• Development Environment
• Training capabilities of team against time and
  resources available for project
• The Design (functionality, brand)
• Browser to desktop connection

17
Deployment

• Can my users install something?
• Tech savvy enough
• Enterprise allow them to
• Do I plan on tweaking rapidly, or will my
  product follow a more standard release cycle?
• Am I willing to use closed or otherwise
  non-ubiquitous technologies?

18
The Design

• How much integration do I need to add between the
  browser and the rest of a users local desktop
  environment?
• Does my design require cinematic effects between
  scenes, or just within them? (or none at all?)
• At what point do I need to manage calls to and
  from a remote server in my design?

19
Keeping up with the Tech

• Well it is really up to you
• Books
• Blogsphere
• Tech Meetups
• UnConferences
• Conferences
• well you are here.

20
Exercise Lets start a project

• Goal Pick a technology for your project. This
  project will be continued.
• Criteria for the design
• Application Service (Hosted)
• Infinite Audience
• Business-to-Business community
• File Management System
• Moving lots of files
• Collaborative
• Media Centric
• Criteria for Development
• Old-school software engineering
• Highly formally educated group

21
Time to explore

• Empressr Desktop Presentation
• NetFlix DVD by mail
• Meebo Web-IM
• Flickr Photo Sharing
• Zimbra Web Groupware