JavaScript, being a single-threaded language, makes extensive use of event-driven programming 
to enable responsive web applications. However, standard approaches to sequencing events are
messy, and often lead to code that is difficult to understand and maintain.
Arrows, a generalization of monads, are an elegant solution to this problem. 
arrowd allows easy asynchronous programing in small, modular units of code, and flexibly compose them in many different ways, 
while nicely abstracting the details of asynchronous program composition. 
arrowd can be used construct a variety of state machine-based constructs, such as autoscrollers and drag-and-drop 
handlers.
 
 Most JavaScript programs are written in an event-driven style, in which programs register callback functions 
that are triggered on events such as timeouts or mouse clicks. A single-threaded event loop dispatches the 
appropriate callback when an event occurs, and control returns back to the loop when the callback completes.
 
  To keep web applications responsive, it is crucial that callbacks execute quickly so that new events are handled 
soon after they occur. Thus to implement non-trivial features like long-running loops (e.g., for animations) or 
state machines (e.g., to implement drag and-drop), programmers must chain callbacks together—each call 
back ends by registering one or more additional callbacks. For example, each iteration of a loop would end by 
registering the current callback with a (short) timeout. Unfortunately, this style of event driven programming is 
tedious, error-prone, and hampers reuse. The callback sequencing code is strewn throughout the program, and very 
often each callback must hard-code the names of the next events and callbacks in the chain.
 
 Arrowd is based largely on Arrows (Hughes 2000), a programming pattern closely related to monads, used extensively in Haskell. 
 An arrow abstraction resembles a normal function, with the key feature that an arrow can be 
composed in various was to create new arrows. The core composition operator is sequencing: if f and g are arrows then 
f >> g is an arrow that first runs f and then runs g.
 
 
In arrowd, arrows are based on functions written in continuation passing style (CPS). 
A CPS function takes a normal argument x and a continuation k, and completes by calling k with the result produced 
by the function. We provide event arrows, built around a CPS function that registers its continuation argument
with a particular event. Users write handler functions that process particular events and lift them to arrows. 
An event arrow can then be composed with a handler arrow to create a single arrow that registers an event and 
handles it when the event occurs. We also provide looping and either-or composition operators, and include support 
for cancellation.
 
 
 
   With arrowd, the code for handling events is clearly separated from the “plumbing” code required to chain 
event handlers together. This makes code easier to understand, change, and reuse: the flow of control is clearly 
evident in the composition of handlers, and the same handlers can be chained in different ways and set to respond 
to different events. This same motivation led to the recent development of a thread monad in Haskell (Li and 
Zdancewic 2007). In this monad, threads are constructed by composing CPS functions, each of which concludes by 
yielding control to the scheduler after registering a handler for some event (e.g., a timeout or I/O). arrowd
 generalizes thread monads with a richer set of combinators needed for our setting.
 
 Here is a simple model for using arrowd for drag and drop.
 
function setupA(event) {
  /∗ setup drag−and−drop ∗/
  return event.currentTarget;
}
function dragA(event) {
  /∗ perform dragging ∗/
  return event.currentTarget;
}
function dropA(event) {
  /∗ perform dropping ∗/
  return event.currentTarget;
}
function cancelA(event) {
  /∗ cancel drag−and−drop ∗/
  return event.currentTarget;
}
 
var dragOrDropA = ((EventA(”mousemove”).next(dragA).next(Repeat)).or(EventA(”mouseup”).next(dropA).next(Done))).repeat()
var dragDropCancelA = (EventA(”mousemove”).next(dragA).next(dragOrDropA)).or(EventA(”mouseup”).next(cancelA))
ConstA(document.getElementById(”dragtarget”)).next(EventA(”mousedown”)).next(setupA).next(dragDropCancelA).run();