Designing Powerful Web Applications with AJAX & Other Rich Internet Applications

October 9, 2006

Designing Powerful Web Applications with AJAX &

Other Rich Internet Applications

David Malouf & Bill Scott

UI 11Cambridge, MAOctober 9, 2006

Designing Powerful Web Applications with AJAX & Other RIAs

October 9, 2006

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 “design”—the verb?– Design your own RIA (exercise)


October 9, 2006

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


October 9, 2006

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)


October 9, 2006

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 SpreadsheetGliffy


October 9, 2006

Cinematic Effects:Animation 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


October 9, 2006

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

KayakNetFlix


October 9, 2006

What’s all the fuss about Web 2.0?

O’Reilly 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-Lee’s warning not to create new bubble – [The Register – Aug ’06]


October 9, 2006

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


October 9, 2006

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


October 9, 2006

Visualizing the AJAX effect

JJ Garrett-Ajax: A New Approach to Web Applications (Feb 2005)


October 9, 2006

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


October 9, 2006

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


October 9, 2006

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


October 9, 2006

Backend Frameworks● DOJO

● Script.aculo.us

● Rico

● Ruby on Rails

● ASP.NET

● Yahoo! User Interface Library (YUI)

● Atlas

● Backbase


October 9, 2006

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


October 9, 2006

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?


October 9, 2006

The Design● How much integration do I

need to add between the browser and the rest of a user’s 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?


October 9, 2006

Keeping up with the TechWell it is really up to you …● Books● Blogsphere● Tech Meetups● UnConferences● Conferences

… well you are here.


October 9, 2006

Exercise: Let’s 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


October 9, 2006

Time to explore● Empressr – Desktop Presentation● NetFlix – DVD by mail● Meebo – Web-IM● Flickr – Photo Sharing● Zimbra – Web Groupware

Documents

Designing Powerful Web Applications with AJAX & Other Rich Internet Applications