2/19 regular meeting paper


Published on

Published in: Business, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

2/19 regular meeting paper

  1. 1. OpenXUP─an Alternative Approach to Developing Highly Interactive Web Application <ul><li>Jin Yu Boualem Benatallah Fabio Casati </li></ul><ul><li>Proceedings of the 6th international conference on </li></ul><ul><li>Web engineering </li></ul><ul><li>Reporter : Che-Min Liao </li></ul>
  2. 2. OutLine <ul><li>INTRODUCTION </li></ul><ul><li>MOTIVATING SCENARIO </li></ul><ul><li>OpenXUP OVERVIEW </li></ul><ul><li>RELATED WORK </li></ul><ul><li>CONCLUSION </li></ul>
  3. 3. INTRODUCTION <ul><li>Ideally , web application should have the same level of productivity as traditional desktop applications : </li></ul><ul><ul><li>High usability </li></ul></ul><ul><ul><li>Secure client environment </li></ul></ul><ul><ul><li>Low latency </li></ul></ul><ul><ul><li>Consistent look and feel </li></ul></ul><ul><li>From the developer’s point of view , a development framework should include following features : </li></ul><ul><ul><li>Familiar programming model with a rich UI toolset </li></ul></ul><ul><ul><li>Hiding the network complex </li></ul></ul><ul><ul><li>Centralized administration </li></ul></ul>
  4. 4. INTRODUCTION <ul><li>The web development community has been trying to address them with different approaches : </li></ul><ul><ul><li>Java Applet </li></ul></ul><ul><ul><li>AJAX </li></ul></ul><ul><li>Both approaches have some limitations </li></ul><ul><li>To satisfy the above requirements and overcome limitation existing approaches , we propose a framework called OpenXUP </li></ul><ul><ul><li>For developers , the framework provides a programming environment that closely resembles desktop applications. </li></ul></ul><ul><ul><li>For end users , the framework aim at bringing web applications closer their desktop counterparts </li></ul></ul>
  5. 5. MOTIVATING SCENARIO <ul><li>To illustrate the requirements of a rich web UI environment , we show an example application , XCat </li></ul>
  6. 6. Using Existing Web UI Technologies <ul><li>Technologies such as Java Applet , ActiveX , and .NET Smart Client : </li></ul><ul><ul><li>As the user interface and application logic become more complex , the file that needs to be downloaded becomes larger and larger </li></ul></ul><ul><ul><li>The applet approach also requires developers to maintain two pieces of code , one for the client side and one for the server side </li></ul></ul><ul><ul><li>Developers need to take care of the communications between the applet and the server side </li></ul></ul><ul><ul><li>The execution of downloaded code by the client may impose security risks to the end user’s computer </li></ul></ul>
  7. 7. Using Existing Web UI Technologies <ul><li>AJAX (Asynchronous JavaScript + XML) : </li></ul><ul><ul><li>It is constrained by the capability of DHTML and browser’s JavaScript engine </li></ul></ul><ul><ul><li>UI code is fairly scattered </li></ul></ul><ul><ul><li>Some UI code needs to be on the server side (e.g. page transitions) </li></ul></ul><ul><li>IDEs such as Microsoft Atlas : </li></ul><ul><ul><li>Large scale JavaScript programming is harder to maintain and debug than traditional programming languages like Java </li></ul></ul><ul><ul><li>Developers have to master multiple languages , JavaScript and DHTML on the client side , and another language (e.g. Java 、 C#) on the server side </li></ul></ul>
  8. 8. OpenXUP OVERVIEW <ul><li>A key component of OpenXUP is the Extensible User Interface Protocol ( XUP ) </li></ul><ul><ul><li>A SOAP-based protocol for communicating events and incremental user interface changes on the web </li></ul></ul><ul><ul><li>UI events can be delivered from the client to the server asynchronously </li></ul></ul><ul><ul><li>User interface changes are delivered from the server to the client as incremental updates , not one full page at a time </li></ul></ul>
  9. 9. OpenXUP OVERVIEW <ul><li>On the server side : </li></ul><ul><ul><li>OpenXUP offers a set of event-driven APIs , which are designed to be familiar , closely resembling the APIs from desktop GUI toolkits </li></ul></ul><ul><ul><li>All application code resides on the server side , it makes web application easier to debug and maintain </li></ul></ul><ul><li>On the client side : </li></ul><ul><ul><li>The client fully leverages the rich UI capability offered by native desktop GUI toolkits such as Windows Forms and Java Swing </li></ul></ul><ul><ul><li>The client renders UI and processes native events , but leaves application specific logic to the server side </li></ul></ul>
  10. 10. Background <ul><li>A UI model is a representation of the user interface which the end user perceives and interacts with : </li></ul><ul><ul><li>A tree of UI components (e.g. buttons 、 panels) </li></ul></ul><ul><ul><li>A set of events (e.g. mouse click) </li></ul></ul><ul><ul><li>A list of resources (e.g. button images) </li></ul></ul><ul><li>UI models may have XML-based representations. We call these representations UI languages : </li></ul><ul><ul><li>XUL (XML User Interface Language) </li></ul></ul><ul><ul><li>XAML (Extensible Application Markup Language) </li></ul></ul><ul><ul><li>UIML (User Interface Markup Language) </li></ul></ul><ul><ul><li>SUL (Simple User Interface Language) </li></ul></ul>
  11. 11. Background <ul><li>Listing 1 shows an example UI model. The root of the UI model is a window ; within it there is a panel which contains two push buttons. </li></ul>
  12. 12. Background <ul><li>UI definition is a description of user interface. </li></ul><ul><li>UI definition is typically coded in declarative languages such as XUL and HTML. </li></ul><ul><li>UI logic contains code that handles UI events and communicates with application logic code. </li></ul><ul><li>UI logic is typically coded in a programming language. For example , in Java Applet , it is Java , and in AJAX , it is JavaScript. </li></ul>
  13. 13. Framework Components <ul><li>Consistent with the web architecture , OpenXUP is client/server-based and uses existing web protocols (HTTP and SOAP) </li></ul>
  14. 14. Framework Components <ul><li>The XUP client has two main tasks : </li></ul><ul><ul><li>To manage the interaction with the end user (display UI components and capture UI events) </li></ul></ul><ul><ul><li>To communicate with the server (transform UI events to XML messages and then send them to the server ; receive UI updates in XML messages from the server and then render them) </li></ul></ul><ul><li>The XUP server process event requests from the client and send back component and resource updates in the response. </li></ul>
  15. 15. Framework Components <ul><li>The server side includes application-specific code (XUP application ) provided by application developers </li></ul><ul><li>The server side middleware components : </li></ul><ul><ul><li>Application manager </li></ul></ul><ul><ul><li>Event dispatcher </li></ul></ul><ul><ul><li>XML serializer </li></ul></ul><ul><li>XUP application developers use the set of event-driven APIs provided by the server to process events and update the UI. </li></ul><ul><li>An event handler is a piece of code in the XUP application. The server invokes the application by calling registered event handlers upon receiving event request. </li></ul>
  16. 16. Location of UI and Application Code <ul><li>In the applet approach : </li></ul><ul><ul><li>Both UI definition and UI logic are programmed , rather than declared. </li></ul></ul><ul><ul><li>Both UI definition and UI logic are on the client side. </li></ul></ul><ul><ul><li>Most of application logic is on the server side. </li></ul></ul><ul><li>In the AJAX approach : </li></ul><ul><ul><li>UI definition is provided by HTML , and the UI logic is programmed in JavaScript. </li></ul></ul><ul><ul><li>Both UI definition and UI logic are on the client side. </li></ul></ul><ul><ul><li>Most of application logic is on the server side. </li></ul></ul>
  17. 17. Location of UI and Application Code <ul><li>In OpenXUP : </li></ul><ul><ul><li>UI definition is provided by UI languages such as XUL or SUL. </li></ul></ul><ul><ul><li>UI logic is programmed. </li></ul></ul><ul><ul><li>UI definition is executed on the client side. </li></ul></ul><ul><ul><li>UI logic is executed on the server side. </li></ul></ul><ul><ul><li>Application logic resides on the server side. </li></ul></ul>
  18. 18. Protocol Messages <ul><li>The runtime behavior of the framework can be described in three phases of protocol message exchanges : </li></ul><ul><ul><li>Startup─the end user starts by establishing a session with an XUP application </li></ul></ul><ul><ul><li>User Interaction─the end user interacts with the application which causes events and UI updates to be exchanged between the client and the server. </li></ul></ul><ul><ul><li>Session Termination─the end user terminates the session with the application. </li></ul></ul>
  19. 19. Startup <ul><li>The client beings by sending a startup request , which includes the name of the application and a list of UI model namespaces supported by the client. </li></ul><ul><li>The server locates the application through the application manager and creates a user session. </li></ul><ul><li>The server then creates an initial UI model </li></ul><ul><li>Then the server sends a response through the XML serializer , including the session ID and the initial UI model. </li></ul><ul><li>The client renders its initial UI model through view manager. </li></ul>
  20. 20. User Interactions <ul><li>After the startup phase , the end user interacts with the application by manipulating the UI view , which triggers native UI events. </li></ul><ul><li>The view manager will capture those native events and send them to the server through the XML serializer. </li></ul><ul><li>Upon receiving an event request , the server locates the XUP application and user session , and passes the event to the event dispatcher </li></ul><ul><li>Event handler execute the necessary application logics and update the UI model. </li></ul>
  21. 21. User Interactions <ul><li>The server then returns the UI model updates to the client. </li></ul><ul><li>The client receives the XUP response and then updates its UI component. </li></ul>
  22. 22. Session Termination <ul><li>There are multiple ways for an end user to terminate the session with an XUP application : </li></ul><ul><ul><li>A particular event on a UI component may be interpreted by the application as a termination notice. </li></ul></ul><ul><ul><li>The end user may explicitly exit the application by instructing the client to send a shutdown request to the server. </li></ul></ul><ul><ul><li>The server may close the user session due to inactivity. </li></ul></ul>
  23. 23. Implementation <ul><li>Currently the client is implemented in .NET ; it can be deployed as a standalone windows program or as a browser plug-in. </li></ul><ul><li>The server is a toolkit running inside the ASP.NET web application server , offering a set of event-driven APIs for application development. </li></ul>
  24. 24. RELATED WORK <ul><li>RemoteJFC </li></ul><ul><li>XWeb </li></ul><ul><li>XForms </li></ul><ul><li>Macromedia’s Flex framework </li></ul><ul><li>X11 </li></ul><ul><li>NeWS </li></ul><ul><li>VNC </li></ul><ul><li>DPS </li></ul>
  25. 25. CONCLUSION <ul><li>OpenXUP offers richer and morepowerful UI component. </li></ul><ul><li>Users will perceive much faster response time. </li></ul><ul><li>OpenXUP offers a secure client environment. </li></ul><ul><li>For developers , OpenXUP offers an efficient UI development environment , similar to their familiar desktop GUI toolkits. </li></ul>