Can you write REALapplications with AJAX-.ppt

1、Can you write REAL applications with AJAX?,Phil Sarin Advanced UI Software April 15, 2009,Problem: Many web apps stink,Rich Internet Applications (RIAs),Easy deployment and maintenance “Desktop-like” interactivity Willing to sacrifice some “webness” (e.g., bookmarks),RIA Approaches,Browser plug-in F

2、lash/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?,Questions for today,Can we approach AJAX development like “regular” GUI development? What are

3、the approaches/tradeoffs? Whats likely to become popular?,What is AJAX?,What is AJAX?,AJAX event handling,Some History,History: Hill Climbing,RIA: Which hill to climb?,Approaching RIAs from two hills,The HTTP Hill,The HTTP Hill,Static Pages,Server fetches and returns a web page Initially just text-b

4、ased With Mosaic, pictures too,The HTTP Hill,Dynamic Pages,Server-side CGI (mostly perl) Client-side Javascript,The HTTP Hill,“Frameworks”,MVC support (Struts 1 & 2, Rails, Django) Easier HTML generation (JSP, ERB, Freemarker, ) State/sessions Javascript libraries (Prototype, DOJO, jQuery),The HTTP

5、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,The Direct Manipulation Hill,The Direct Manipulation Hill,The Direct Manipulation Hill,GUI Toolkits,Common widget

6、set across applications Standalone or client-server,The Direct Manipulation Hill for Internet applications,Browser Plug-Ins,Flash, Java, Silverlight Took a long time to catch on,The Direct Manipulation Hill,Pros/Cons,Timely feedback Programming power (behaviors, constraints at least possible) Common

7、 widgets (consistency, usability) Flash/etc: more consistent runtime platform Flash/etc: needs a plug-in Cross-platform issues still exist Proprietary runtime platform,Where does AJAX fit in?,Where does AJAX fit in?,Both hills!,AJAX on the HTTP Hill,Tactical features Autocomplete Drag and drop AJAX-

8、aware code Raw Javascript/HTML/CSS Or with a library Okay for some applications Too limiting for RIAs Not the focus of this talk,Direct Manipulation AJAX,AJAX on the Direct Manipulation Hill,Separate development environment from runtime environment. Runtime environment: HTML/Javascript/CSS (AJAX) De

9、velopment environment: toolkit in another language Two approaches: thin and fat,Thin Client AJAX Approach,Example: Google Maps (pretend its a thin client app),A Grid of Images,Example: Google Maps,Sequence,Thin Client Pros and Cons,Simple programming: ignore the network All your code runs server-sid

10、e Programmers love it! Undo, behaviors, constraints: all possible! Scalability (server-side state, lots of requests) Slow feedback: network hop for each user action,Fat Client AJAX Approach,Example: Google Maps,Sequence,Wait a second,No AJAX calls involved in moving the map around! Mostly Javascript

11、. New image requests are synchronous Example AJAX call: adding an intermediate destination,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, distribute

12、d,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,So, is AJAX viable for RIAs?,Thi

13、n 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?,Some Toolkits,GWT: A Toolkit,Laying out widgets in a container “panel” Events and handlers,/

14、 Create a Horizontal PanelHorizontalPanel hPanel = new HorizontalPanel();/ Leave some room between the widgetshPanel.setSpacing(5); / Add some content to the panelfor (int i = 1; i 5; i+) hPanel.add(new Button(“Button “ + i);,http:/ non-strict abstractions,Styling with CSS Directly embed Javascript

15、Raw HTML Direct DOM manipulation,private native voidputElementLinkIDsInList(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);-*/;,

16、http:/ A different philosophy,“When you program in Cappuccino, you dont 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

17、/learn/,Javascript as “assembly language”,http:/,Cappuccino vs GWT,Philosophical question GWT: RIAs that are part of of the web Cappuccino: RIAs deployed over the web Alternative to Flash/Flex,Finally,Recommendations,If youre serious about RIAs, climb the direct manipulation hill. Dont limit yoursel

18、f to Thin AJAX. AJAX sweet spot: Applications that are part of the web. AJAX is an implementation alternative for applications deployed over the web.,References 1,adaptive path ajax: a new approach to web applications. (n.d.). . Retrieved April 8, 2009, from http:/ wants to be the Microsoft of the W

19、eb at Ted Leung on the Air. (n.d.). . Retrieved April 8, 2009, from http:/ Web Framework - Build Desktop Class Applications in Objective-J and JavaScript. (n.d.). . Retrieved April 15, 2009, from http:/cappuccino.org/.Comparing the Google Web Toolkit to Echo2. (n.d.). . Retrieved April 9, 2009, from

20、 http:/ 2,Dare Obasanjo aka Carnage4Life - What Comes After AJAX? (n.d.). . Retrieved April 8, 2009, from http:/ Guide - Google Web Toolkit - Google Code. (n.d.). . Retrieved April 9, 2009, from http:/ Technical Overview | Echo Web Framework. (n.d.). . Retrieved April 8, 2009, from http:/ Tutorial |

21、 Echo Web Framework. (n.d.). . Retrieved April 8, 2009, from http:/ 3,Echo2 versus GWT The Register. (n.d.). . Retrieved April 9, 2009, from http:/www.theregister.co.uk/2006/08/24/echo2_framework/.Feigin, B. (n.d.). Cappuccino and Objective-J. Retrieved from http:/www.cs.cmu.edu/bam/uicourse/830spri

22、ng09/Benjamin%20Feigin%20-%20Cappuccino.pptx.Following up on “The Microsoft of the Web” at Ted Leung on the Air. (n.d.). . Retrieved April 8, 2009, from http:/ (n.d.). . Retrieved April 8, 2009, from http:/www.openlaszlo.org/whitepaper/LaszloWhitePaper.pdf.,References 4,Mesbah, A., & van Deursen, A.

23、 (2006). An Architectural Style for Ajax. cs/0608111. Retrieved April 8, 2009, from http:/arxiv.org/abs/cs/0608111.Tony C Shan, & Winnie W Hua. (2006).Taxonomy of Java Web Application Frameworks. In e-Business Engineering, 2006. ICEBE 06. IEEE International Conference on (pp. 378-385). doi: 10.1109/ICEBE.2006.98.,