Designing Powerful Web Applications with AJAX & Other Rich Internet Applications

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 “design”—the 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 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

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. 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]

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 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?

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: 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

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