Introduction[]
eyeOS interface
eyeOS (demo) is a web-based operating system, or webtop. Though strictly speaking it is not an OS, it provides the user with a window-based GUI and a set of applications (e.g. word processor, web browser, mail/FTP client, games...) similar to those of a conventional OS.
We selected this application because of its high interactivity. Its main appeal is to let users have access to their own desktop, files and applications regardless of their physical location. If browser technology and network infrastructure improve sufficiently, webtops could even substitute current local OS installations.
eyeOS heavily uses JavaScript and AJAX in the client side, and PHP in the server side. We first introduce the general architecture, then focus on a couple of interesting interactions to illustrate how the system works, and conclude with a discussion of the limitations and usefulness of the application.
Architecture overview[]
Client-side[]
eyeOS makes use of several technologies on the client (browser) side:
- XHTML and CSS are used to display the user interface. The content, however, is created and changed dynamically by the local JavaScript engine, which uses the DOM for this task.
- The local engine handles communication with the server asynchronously, using AJAX. Client and server communicate via XML requests/responses. The client always initiates communication (i.e. no reverse AJAX is used). Each server response specifies a series of tasks to the client engine (e.g. creating a widget, changing a value of a component, executing JavaScript code embedded in the message, etc.).
- Not all interactions require communication with the server. JavaScript is used to provide client-side-only interactions.
Server side[]
Though it is not the focus of the project, we briefly comment on the server side of the architecture. eyeOS is written in PHP on the server side, and provides multiple high-level abstractions (e.g. file system, user management, window services, ...). The goal of these is to make it easy to write new applications, and avoid dealing with low-level primitives. In this sense, eyeOS is also a web application development framework.
Interaction case studies[]
Icon drag&drop[]
The eyeOS desktop features application icons that, as in conventional OSes, can be moved around and clicked on to launch applications. Dragging an icon is initiated by left-clicking it, and is mostly a client-side interaction. Icons consist of a labeled div element with and icon and some text. They use the onmouseup/down events to register the icon as it is clicked upon, and a global onmousemove event handler redraws the icon as we drag it around. When the icon is dropped, the client sends the new position of the icon to the server. This way, the server can remember the arrangement of the icons for future sessions. Since the message is processed asynchronously, the user is oblivious to this client-server interaction.
Application launching[]
Application launching is initiated by clicking on a desktop or menu icon. The browser sends an HTTP POST request using AJAX telling the server which application it wishes to launch. The server then responds with XML data that the client JavaScript engine interprets as a series of tasks. These contain parameters and are processed by the local engine to build the application interface. Some tasks include information to create one of the widgets from the set provided by the local engine (e.g. a window), while others include raw JavaScript that is executed by the client using eval (e.g to implement an application-specific widget, or registering event handlers for the different widgets), or provide updated CSS content. In general, the tasks in the server response may trigger additional AJAX GET/POST requests to retrieve more content (e.g. application icons, additional JavaScript files, etc) and further interact with the server. Once the application is loaded in the client, interacting with it may trigger additional application-specific AJAX request/responses.
Discussion[]
Overall, we think that many of the interactions are gracefully handled with the AJAX-based infrastructure, leading to a good and responsive user interface. However, we see three key issues with eyeOS (and similar systems) that may limit its usability and adoption:
- The server can't initiate communication with the client. This requires to periodically poll the server for pending events (e.g. the mail client received a new message). This increases latency and imposes a high server load. It could be solved by reverse AJAX.
- Although interpreted languages like JavaScript and PHP are appropriate for light computations, this setup is badly suited for compute-intensive applications (e.g. Matlab), either on the client or the server side. This could be partially solved by using JavaScript engines with some form of JIT compilation (e.g. SquirrelFish)
- The inherent network latency and bandwidth limitations are going to make it hard to support applications with low latency tolerance and/or high bandwidth requirements (e.g. a real-time 3D game).