Can you write REAL applications with AJAX?

1. Can you write REALapplications with AJAX? Phil Sarin Advanced UI Software April 15, 2009

2. Problem: Many web apps stink

3. Rich Internet Applications (RIAs) • Easy deployment and maintenance • “Desktop-like” interactivity • Willing to sacrifice some “webness” (e.g., bookmarks)

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

5. Questions for today • Can we approach AJAX development like “regular” GUI development? • What are the approaches/tradeoffs? • What’s likely to become popular?

6. What is AJAX?

7. What is AJAX?

8. AJAX event handling

9. Some History

10. History: Hill Climbing

11. RIA: Which hill to climb?

12. Approaching RIAs from two hills

13. The HTTP Hill

14. The HTTP Hill Static Pages • Server fetches and returns a web page • Initially just text-based • With Mosaic, pictures too

15. The HTTP Hill Dynamic Pages • Server-side • CGI (mostly perl) • Client-side • Javascript

16. The HTTP Hill “Frameworks” • MVC support(Struts 1 & 2, Rails, Django) • Easier HTML generation(JSP, ERB, Freemarker, …) • State/sessions • Javascript libraries(Prototype, DOJO, jQuery)

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

18. The Direct Manipulation Hill

19. The Direct Manipulation Hill

20. The Direct Manipulation Hill GUI Toolkits • Common widget set across applications • Standalone or client-server

21. The Direct Manipulation Hillfor Internet applications Browser Plug-Ins • Flash, Java, Silverlight • Took a long time to catch on

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

23. Where does AJAX fit in?

24. Where does AJAX fit in? Both hills!

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

26. Direct Manipulation AJAX

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

28. Thin Client AJAX Approach

29. Example: Google Maps(pretend it’s a thin client app)

30. A Grid of Images

31. Example: Google Maps

33. Sequence

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

35. Fat Client AJAX Approach

36. Example: Google Maps

38. Sequence

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

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

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

42. So, is AJAX viable for RIAs?

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

44. Some Toolkits

45. GWT: A Toolkit… // 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)); } • Laying out widgets in a container “panel” • Events and handlers http://code.google.com/webtoolkit/doc/1.6/DevGuideUserInterface.html

46. …with non-strict abstractions 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/Object;) (link.id); } }-*/; • Styling with CSS • Directly embed Javascript • Raw HTML • Direct DOM manipulation http://code.google.com/webtoolkit/doc/1.6/DevGuideUserInterface.html

47. 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/

48. Javascript as “assembly language” http://280slides.com

49. Cappuccino vs GWT • Philosophical question • GWT: RIAs that are part of of the web • Cappuccino: RIAs deployed over the web • Alternative to Flash/Flex

50. Finally