MapJAX: Data Structure Abstractions for Asynchronous Web Applications Daniel S. Myers Jennifer N. Carlisle James A. Cowling Barbara H. Liskov MIT CSAIL MIT CSAIL MIT CSAIL MIT CSAIL Abstract is a communication technique known as AJAX: Asyn- chronous Javascript and XML [2]. Before AJAX, web The current approach to developing rich, interactive web applications were forced to fetch an entire page from the applications relies on asynchronous RPCs (Remote Pro- server in order to display any new data. By contrast, cedure Calls) to fetch new data to be displayed by the AJAX allows Javascript programs to send requests to the client. We argue that for the majority of web appli- server without reloading the page or blocking the user cations, this RPC-based model is not the correct ab- interface. This has permitted the development of a new straction: it forces programmers to use an awkward class of highly-responsive, desktop-like applications on continuation-passing style of programming and to ex- the web. Moreover, support for the underlying AJAX pend too much effort manually transferring data. We mechanisms is ubiquitous, having been present in web propose a new programming model, MapJAX, to rem- browsers since the late 1990s, so these applications can edy these problems. MapJAX provides the abstraction be delivered without the need for third-party plugins. of data structures shared between the browser and the The current AJAX programming model has two sig- server, based on the familiar primitives of objects, locks, nificant shortcomings, however. First, AJAX requires and threads. MapJAX also provides additional features that web clients request content from web servers us- (parallel for loops and prefetching) that help develop- ing asynchronous HTTP requests: the client bundles any ers minimize response times in their applications. Map- statements that depend on the result of the request into a JAX thus allows developers to focus on what they do callback that will be executed when the response to the best–writing compelling applications–rather than worry- HTTP request arrives. This approach forces program- ing about systems issues of data transfer and callback mers to use an awkward continuation-passing program- management. ming style and thread program state through a series of We describe the design and implementation of the callback functions. While various toolkits [9, 15] elevate MapJAX framework and show its use in three prototyp- the level of abstraction to that of an RPC, none has elim- ical web applications: a mapping application, an email inated the use of continuations and callbacks. client, and a search-autocomplete application. We evalu- Additionally, a programmer using AJAX must develop ate the performance of these applications under realistic his or her own techniques for avoiding delays associated Internet latency and bandwidth constraints and find that with fetching content from the server. These delays can the unoptimized MapJAX versions perform comparably be reduced by prefetching content before it is needed, to the standard AJAX versions, while MapJAX perfor- and by sending requests in parallel. Neither AJAX nor mance optimizations can dramatically improve perfor- current tools built on top of it provides direct support for mance, by close to a factor of 2 relative to non-MapJAX these approaches. code in some cases. This paper presents MapJAX, a data-centric frame- work for building AJAX applications without any new 1 Introduction client-side software. In place of asynchronous RPCs, MapJAX provides the programmer with the illusion of “It is really, really, really hard to build some- logical data structures shared between the client and thing like Gmail and Google Maps,” said server. These data structures appear to be ordinary ob- David Mendels, general manager of platform jects that can be accessed through normal Javascript products for Macromedia. “Google hired method calls, hiding the underlying complexity of con- rocket scientists... Most companies can’t go tinuations and callback functions. Instead, the code that and repeat what Google has done.” [1] causes a fetch of data from the server can be thought of as running in its own thread. The thread blocks while the Recent months have shown an explosive growth in call is being processed and then continues running when rich, interactive content on the World Wide Web — a the server response arrives. The MapJAX approach thus phenomenon termed Web 2.0. Central to this growth allows users to create programs with the mental model to USENIX Association 2007 USENIX Annual Technical Conference 101 which they have grown accustomed: threads and objects. formance improvements. to as much as a factor of 2 in In addition, MapJAX also provides a number of mech- some cases. anisms that enable efficient interaction between client and server. Given that the cost of communication far 2 Javascript and AJAX Applications exceeds the cost of computation in this setting, we fo- cus on ways to reduce communication delays. First, We first provide a brief overview of Javascript and MapJAX allows application programmers to decrease AJAX. The Javascript language was originally developed the latency involved in data structure access by using at Netscape in 1996 to allow interactivity in web pages. spare bandwidth to prefetch objects. The MapJAX run- In particular, Javascript allows handlers to be registered time maintains a cache of previously fetched objects and for activation in response to various events that can occur avoids communication delay when the requested content on the page, such as the page being loaded, the user click- is present in the cache. ing on a link, moving his or her mouse over an image, Second, MapJAX provides a mechanism that allows and so forth. While Javascript has seen use outside of a number of fetches to be sent in parallel. This is pro- the context of web pages, within this context Javascript vided in the form of a parallel for statement. A common programs are event-based. As only one event handler can use case for web applications is to copy a range of ele- execute concurrently and scheduling is non-preemptive, ments to the screen. This is naturally expressed as a se- Javascript programs can be viewed as executing under quential for loop over a shared data structure, albeit with a single-process, event driven (SPED) model similar to poor performance. Instead, the parallel for starts up the e.g. Zeus [17]. iterations in parallel, allowing the requests to be issued Application programmers can modify web page con- immediately and concurrently. tent from Javascript using the Document Object Model In order to allow applications to express ordering con- (DOM), a programmatically-accessible, tree-structured straints on these loops while preserving concurrency, representation of the elements on the page. MapJAX provides a new locking mechanism that allows Until relatively recently, Javascript was used only for a thread to reserve a lock in advance of acquiring it. Lock purely client-side tasks, such as verifying text input into reservation is non-blocking and simply places the identi- a zip-code form field. Since the late 1990’s however, fier of the thread into the lock queue. Later, the thread Javascript has contained an “XMLHttpRequest” object, acquires the lock using an acquisition function which allowing programmers to send asynchronously-handled blocks until the lock is available. As detailed in Sec- HTTP requests for XML-formatted data. The realiza- tion 3.5, this model allows threads to generate requests tion in the web development community that this ob- in parallel, yet process their responses in order. ject could be used to fetch new data without reloading MapJAX also provides a few additional features to in- a page gave rise to AJAX, standing for “Asynchronous crease the effectiveness of prefetching and parallel for. Javascript and XML”, although more recently alternative It is able to group a number of requests into one com- encodings such as Javascript Object Notation (JSON) [5] munication with the server, and it allows the program to have been used in place of XML. cancel requests that are no longer needed. MapJAX is defined as a small veneer over Javascript, 3 Programming Model as a goal of the system is to require a minimum of pro- grammer retraining. Its implementation consists of a This section describes the MapJAX programming model. compiler that translates MapJAX programs to Javascript, We begin with the basic features that allow programmers and a runtime system written in Javascript that provides to write working programs (shared data structures and the needed support for the MapJAX features. Despite non-preemptive threads), then describe various features significant work on programming environments for web that help them to improve performance (data prefetching, applications [13, 10, 9, 3, 15, 4, 11], we are not aware parallel for loops, RLU locks, and request canceling). of any existing work that provides a programming model like that of MapJAX. 3.1 MapJAX Maps We have used MapJAX to implement three prototyp- ical web applications–a mapping application, an email MapJAX objects represent logical data structures shared client, and a search autocomplete application. These between the client and server, and are at the core of the were all implemented with relative ease, while benefit- MapJAX system. These objects are collections of ele- ing from prefetching and parallel for loops. Our results ments, e.g., a collection of email messages, or a collec- show that MapJAX has minimal overhead compared to tion of grid cells in a mapping application. Each map is an equivalent AJAX program. The results also show that associated with a URL at the server to which requests are use of our advanced features resulted in substantial per- sent to retrieve elements. 102 2007 USENIX Annual Technical Conference USENIX Association may return immediately if the value is already cached.