Libraries:
* LzOSUtils — jQuery-compatible ajax function, Flash->JS bridge with callbacks, declarative Flash 8 filter effects, console that reports to Firebug, dashed lines, Prototype-compatible string and collection methods, etc. Completely undocumented and fairly disorganized.
* LzTestKit — mocks and asynchronous and automated testing for OpenLaszlo; still pretty raw.
* HopKit — a “higher order programming kit”, for constructed chained APIs such as in LzTestKit’s mocks and expectations; still somewhat buggy and undocumented.
* MVars — a port of Haskell MVar’s to JavaScript. I realized that what I actually needed for real-world applications was an implementation of the join calculus (a la JoCaml). I haven’t written the join calculus version.
* Protodoc — I wrote this to extract the docs from the source files and to implement the live examples in Functional and Sequentially; it includes a version of the wonderful doctest, for JavaScript. I got part way through refactoring it into something that isn’t quite put together again. I haven’t decided whether to finish it or whether there’s an existing project that’s close enough.
* [No link yet] Updates to OpenLaszlo JSON and ropenlaszlo, from using them over the past year. (No, those links go to the old versions — I haven’t uploaded the updates
* Implementations in Ruby and JavaScript of the awesome CFDG. I wrote these a couple of years ago, and really want to update and clean them up to point where I can donate them to Hackety Hack, or someone else who might use them.

Applets:
* Tiles — HTML port of my mid-nineties Java version (which was a port of my mid-eighties C version), uses the Canvas tag; probably doesn’t work in MSIE
* IFS — a few minutes of pair programming with my son to show him some stuff about matrices; probably doesn’t work in MSIE
* On this day — iPhone applet; the feed is down right now
* Force-directed layout for my home page — this was my experiment using HTML instead of Flash; I got discouraged when I saw how bad the frame rate for full-page animation is was even in Firefox, let alone MSIE (Safari rocks now, though!)

Plus a couple dozen essays that are half or three-quarters written (programming, software development, math education), a couple of AJAX presentations, and two workbooks for teaching abstract math at the elementary level. It takes me longer to write an essay than a program, though!

More weekends, please.

// Call a function f five times in a row
f.only(5).repeatedly()
// Call f five times, at one second intervals
f.only(5).periodically()
// Make a new function g that calls through to f at most five times,
// no matter how often g is called
var g = f.only(5)
// Make a new function g that calls f at most once per minute,
// no matter how frequently g is called
var g = f.infrequently(60*1000)
// Apply a function to each of the elements of an array, at intervals
// of once per second
['here', 'are', 'some', 'elements'].sequentially(
  function(word) {console.info(word, '->', word.length)})
  .periodically()

You can run these examples in your browser (Safari and Firefox only, for now) on this page of examples. Mouse over the source code to see which outputs come from each statement. Mouse over or click on the outputs to see which statement generates each output.

This is an early version. Some aspects aren’t well thought-out; some terminology isn’t consistent. Nonetheless, some early readers have urged me to put this out.

Why?

Recently I wrote an browser application that did the following:

Ask the content server for an image. If it’s not there, ask the application server to queue a request to the image server to create it. Then check back with the content server again. If the asset doesn’t show up after a while, the application server may have been down or overloaded, so ask it again. But I don’t want the client applications to mount a DDoS attack on an ailing server, so back off the frequency of the requests, and then give up, after a while.

Why? I’d like to be able to run client applications that present data from a cluster of unreliable commodity hardware (the same as Erlang; the same as CouchDB). This means these clients must survive component-wise server failure: they should implement retries (when a server is temporarily overloaded), then transition to failover (when it’s out for the count).

My first pass at this was a tangled mess of domain logic, network requests, and control code. It was way more complex than it ought to have been, especially for such a general design pattern.

The basic concepts here are simple: repetition (”keep asking, but not too many times…”) and frequency (”…and not too frequently”). Simple concepts should be simply spelled.

You can think of Sequentially as a tiny little domain-specific extension to JavaScript, that defines words for these concepts.

Some Analogies

I use this in a style I call “adverbial programming”. Another example of adverbial programming would be some uses of AOP.

Someday I’ll post an entry about the analogy between computer languages and natural languages. For now, simply note that methods such as “only” and “infrequently” modify a function (a verb) to produce a new function with a related meaning — this is the same as (one of the senses of) an adverb.

This is in contrast to procedural programming, which assembles statements into paragraphs with aggregate effect; object-oriented (OO) programming, which assembles noun phrases; and functional programming, which is largely about verbs¹. (Closures, which bridge the gap between the functional and OO style, are gerunds.)

Here are some other analogies for thinking about thinking about this. This is all kind of notional, but I found these useful in suggesting how this relates to other work, and where to take it next.

You could think of Sequentially as doing something like memoization, where instead of just caching the result it modifies when andwhether a function is called. Alternatively (and very loosely), Sequentially is the categorical dual of generators (it builds sinks instead of sources), in a partially CPS-converted program. Or, if you took the call graph of a program, turned that into a dataflow diagram, and implemented a dataflow interpreter for that diagram, then Sequentially would override some of the pipes. Or (again, loosely) it’s a kind of two-way dual of Functional JavaScript in Chu space — instead of collecting values (arguments) across state space, it distributes function calls across time (sequence).

Or maybe that’s all overkill, and it’s just a few combinators for frequency, iteration, and time.

[1] More accurately, functional programming is about saturating the argument positions of both nouns and verbs. Its closest analogy is to theories of language, such as Montague Grammar and Categorial grammar, rather than to language itself. This may be why functional programming is for many people less than intuitive.

New features

- Rhino compatibility. I think — at least it loads now, and a couple of hand tests work; i have yet to port the testing tool. (Credit: Reginald Braithwaite)

Optimizations

- More efficient Array.slice. (Credit: Dean Edwards)
- Memoize Function.lambda. (Credit: henrah)

Packaging changes

- Added jsmin version. With jsmin and gzip, the file is 2.5K.
- Moved string lambdas to a separate file, to-string.js. (Both files are included in the jsmin version.)
- Reformatted for new version of the doc tool.

Compatibility notes

If you were including functional.js before, now you need to include both functional.js and to-function.js in order to get the string lambda conversion functions too. Or you can include functional.min.js, which is smaller and includes them both.

The fact that functional.js itself no longer contains any regular expressions might make it usable in Flash. I haven’t actually tried this, because the only Flash I use is OpenLaszlo, which is still at version 8 of the Flash file format (AVM2, no JIT, <25% browser speed method calls are 10% of Firefox 2 / Safari 3.0 speed). I don’t dare program at too high a level in Flash 8 because of performance concerns.

Meanwhile, over in Ruby land…

I’ll also put in a plug here for Braithwaite’s String#to_proc, which is a port of string lambdas to Ruby:

(1..5).map &'*2'
  -> [2, 4, 6, 8, 10]
(1..5).inject &'+'
  -> 15
factorial = "(1.._).inject &'*'".to_proc
factorial.call(5)
  -> 120

I’ve been a Raganwald fan for a while; and Ruby is my favorite server-side glue language, I look forward to using it there…

See the API and examples page for more examples, API documentation, and a link to the source.

String lambdas

Welcome to functional programming! You’ve probably already discovered map and filter. (If not, curl up with Google for a few minutes. I’ll wait.) Try using them in JavaScript. Isn’t it a pain?:

map(function(x){return x+1}, [1,2,3])
  -> [2,3,4]
filter(function(x){return x>2}, [1,2,3,4]]
  -> [3,4]
some(function(w){return w.length < 3}, 'are there any short words?'.split(' '))
  ->false

String lambdas let you write these this way, instead:

map('x+1', [1,2,3])
select('x>2', [1,2,3,4])
some('_.length < 3', 'are there any short words?'.split(' '))

Some more examples, using just map, filter, and reduce:

// double the items in a list:
map('*2', [1,2,3])
  -> [2, 4, 6]
// find just the odd numbers:
filter('%2', [1,2,3,4])
  -> [1, 3]
// or just the evens:
filter(not('%2'), [1,2,3,4])
  -> [2, 4]
// find the length of the longest word:
reduce(Math.max, 0, map('_.length', 'how long is the longest word?'.split(' ')))
  -> 7
// parse a binary array:
reduce('2*x+y', 0, [1,0,1,0])
  -> 10
// parse a (non-negative) decimal string:
reduce('x*10+y', 0, map('.charCodeAt(0)-48', '123'.split(/(?=.)/)))
  -> 123

Function-level programming

Value-level programming manipulates values, transforming a sequence of inputs into an output. Function-level programming manipulates functions, applying operations to functions to construct a new function. It’s this new function that transforms inputs into outputs.

Here are some examples of function-level programming with Functional. There’s more in the documentation.

// find the reciprocal only ofvalues that test true:
map(guard('1/'), [1,2,null,4])
  -> [1, 0.5, null, 0.25]
// apply '10+' only to even values, leaving the odd ones alone:
map(guard('10+', not('%2')), [1,2,3,4])
  -> [1, 12, 3, 14]
// write a version of map that only applies to the evens:
var even = not('%2');
var mapEvens = map.prefilterAt(0, guard.rcurry(even));
mapEvens('10+', [1,2,3,4])
// find the first power of two that's greater than 100:
until('>100', '2*')(1)
  -> 128
// or the first three-digit power of two (these are equivalent):
until('String(_).length>2', '2*')(1)
until(compose('>2', pluck('length'), String), '2*')(1)
until(sequence(String, pluck('length'), '>2'), '2*')(1)

Partial function application

Partial function application, or specialization, creates a new
function out of an old one. For example, given a division function:

function div(a, b) {return a/b}

a partial application of div is a new function that divides its argument by two:

var halve = div.partial(_, 2);

Partial application is especially useful as an argument to the higher-order functions such as map, where, given a function div, we can apply it (the first line below) without an explicit wrapper (the second).

map(div.partial(_, 10), [10, 20, 30])
map(lambda(n) {return div(n, 10)}, [10, 20, 30])

The curry function handles a special case of partial function application, and the previous example could have been handled via curry. Partial function application in all its generality is only necessary when you’re specializing not just on all the arguments on the left, or all the arguments on the right, but some distribution of arguments with holes in the middle. To illustrate this requires a function with more than two parameters.

JavaScript doesn’t have many functions with more than two parameters. (splice takes three, but splice isn’t very functional). Here’s a contrived example to start (and a real-world example next).

We’ll borrow one of the few trinary predicates from math: “between”. increasing(a, b, c) tests whether b (the middle argument) lies in the open interval bounded by a and c. Specialize the first and last arguments to produce a functions that tests whether a number is positive, for example.

function increasing(a, b, c) {
  return a < b && b < c;
}
var positive = increasing.partial(0, _, Infinity);
map(positive, [-1, 0, 1])
  -> [false, false, true]
var negative = increasing.partial(-Infinity, _, 0);
map(negative, [-1, 0, 1])
  -> [true, false, false]

Here’s how to use compose and curry to generalize some of the examples from the first section into reusable functions. (You’ll probaby like or hate these function definitions to the extent that you like or hate Haskell.)

var longest = compose(reduce.curry(Math.max, 0), map.curry('_.length'), "_.split(' ')");
longest("how long is the longest word?");
  -> 7
longest("I bet floccinaucinihilipipification is longer.");
  -> 29
var parseUnsignedInt = compose(reduce.curry('x*10+y.charCodeAt(0)-48', 0), '_.split(/(?=.)/)')
parseUnsignedInt('123')
  -> 123

Here’s real-world example: The following line attaches a sum method to Array. Note how the 'this' string lambda, which is short for function(){return this}, moves the object from object position to argument position so that the curried reduce can apply to it.

Array.prototype.sum = reduce.curry('+', 0).compose('this')
[1,2,3].sum()
   -> 6

Here’s another example: If you’re using Prototype, you can replace the first line below by the second:

Event.observe('myobj', 'click', function() {...})
onclick(''myobj', function() {...})

by defining a specialized version of Event.observe:

var onclick = Event.observe.bind(Event).partial(_, 'click');

A Question of Taste

Is this:

var onclick = Event.observe.bind(Event).partial(_, 'click');

really better than the following?

function onclick(element, handler) {
  Event.observe(elenent, 'click', handler);
}

It’s a matter of taste, with some performance considerations as well.

The function-level version is less efficient. To the inexperienced eye, it’s also harder to read.

On the other hand, the functional version doesn’t include as much plumbing, with its attendent opportunity for error. The second definition of onclick, considered as a general replacement for Event.observer(..., 'click', ...), has two such errors. One shows up as soon as you use it; the second is considerably more subtle.

Whether functional programming is appropriate, for reasons of efficiency or readability, in any particular instance, it’s nice to have it, at least for prototyping, in your arsenal.

Performance Notes

In most languages, including JavaScript, invoking a function is one of the slowest things you can do. The implementations of languages designed for functional programming use a variety of techniques to optimize function calls. JavaScript is not one of those languages.

Functional attempts to reduce the cost of higher-order-programming where doing so doesn’t add to the code complexity or readability too much. Each higher-order function and method is a small number of lines, and each function-returning method attempts to do as much work as possible outside the function that it returns, to optimize the case where the returned function is called more than once (as an argument to a higher-order function such as map, for example).

Still, using Functional is expensive. Invoking a constructed function results in at least twice as many invocations as invoking the underlying function. This isn’t any different from using bind in the Prototype library, say, but, the more of your program you write in a functional style — and therefore the more method calls you introduce — the slower it will be. As with any library, be aware that you may have to hand-compile performance-critical sections of your code into an approximation of you would have written without the library anyway. If you think you already know what needs to be optimized (or that your whole program does), or you aren’t comfortable with measuring performance periodically in order to intelligently trade execution time against implementation time, you may want to eschew libraries, especially higher-order ones.

Compatibility

Functional is known to work in Firefox 2.0, Safari 3.0, and MSIE 6.0. I didn’t intentionally use any non-standard ECMAScript constructs, but meta-programming such as this tends to turn up corners in the browser implementations.

I’ve used this with Prototype and jQuery. If you call Functional.install, it will replace Prototype’s bind, but with a compatible version. Functional.install defines a number of other top-level functions (all documented), but to my knowledge these all have unusual names (e.g. curry), or standard semantics (e.g. map), so you’re unlikely to run into any problems unless you try to use this with another library of higher-order functions. In which case, don’t call Functional.install.

Update: The current version also defines equal as a functional, for doing things like this: select(equal(pluck('x'), K(1)), [{x:1,y:2}, {x:3,y:4}]). This is more likely to conflict with a method from your code or another library, so beware!

Defining String.prototype.apply and ...call seems potentially skanky, although the ECMAScript standard permits it and i haven’t run into any trouble. These methods could be removed without breaking anything except a few of the example; internally, the Functional functions use Function.toFunction instead.

The implementation of string lambdas uses regular expressions and eval. The rest of the code doesn’t. The intent of this separation is that the code might be portable to environments that don’t include these features, such as Flash and OpenLaszlo. I haven’t tested it against any of these environments, thoug, so I’ve kept the code in one file for now.

Future Directions

Credits

(Temporarily deleted while I debug why this text borks WordPress.)

One of the problems with those URLs, though, and with URLs in general, is that they’re misleadingly short. A particular web page may have a lot of significance, but if it doesn’t take up much of your message, there’s just no way for the recipient to see this at a glance.

WideURL.com fixes this. It creates an URL with more visual impact.

For example, here’s the WideURL for this post: http://wideurl.com/aitch-tee-tee-pea-colon-double-slash-oh-ess-tee-double-ee-ell-ee-dot-see-oh-em-slash-aye-are-see-aitch-eye-vee-ee-ess-slash-two-double-zero-six-slash-zero-four-slash-doubleyou-eye-dee-ee-you-are-ell. That’s much more significant-looking than simply http://osteele.com/archives/2006/04/wideurl, I think you can agree.

What I came up with is inline-console.js. This file adds an output console, and a text field with an “Eval” button, to the bottom of your application. It also defines some logging functions — info, debug, warn, and error — that append text to the console. (If you include fvlogger, it will use it instead.)

The point of this is to be as lightweight as possible. Add
script type=”text/javascript” src=”inline-console.js” (appropriately tagged) to the document head, and the script will take care of adding the UI.

For more fun, include readable.js after inline-console.js. Then {a: 1} will print as {a: 1} instead of [object Object].

Here’s an example. Try entering some JavaScript expressions, such as 2*3, Math.sqrt(2), or document.body, and then pressing “Eval”. (Click here to open the example in a separate window, where you can view source.)

Files:
* inline-console.js — adds the inline console
* readable.js — adds readable representations for JavaScript objects (optional)
* fvlogger — a nicer console UI with more control over which log levels are displayed (optional)

My other JavaScript libraries are here.

If you use an IDE for development, this may not be a problem. Probably the IDE has its own string representation; even if it doesn’t, you can generally drill into objects by clicking on them. This doesn’t help those us of who prefer REPL development or printf-style debugging. When you display a debugging value (to the browser status line, to the alert() dialog, or to the Rhino console), you’d like some indication of what it actually is. And JavaScript doesn’t generally tell you, at least when the value is more complex than a string, number, or boolean.

Hence, readable.js. Readable adds a Readable class that can stringify a JavaScript value readably, for debugging purposes. Readable.toReadable([1,'', null, [3, 4]]) evaluates to [1, '', null, [3, 4]], not 1,,,3,4. And so on.

To make it easier to use the Readable class, Readable comes with a couple of hooks. First of all, it defines defines info, warn, error, and debug functions¹ that display their arguments to the user. In Rhino, these functions call through to print. In a browser, they use alert() — unless fvlogger has been loaded first, in which case they use it instead[]. You can also replace Readable.log(level, message) or
Readable.display(message) to add your own behavior; for example,
to display the message in the status line, or AJAX it up to the server.

Secondly, Readable can add toString methods to Array.prototype and Object.prototype. Do this, and evaluating an expression in Rhino writes a readable representation to the console, without your having to wrap it in info(<var>...</var>) or Readable.toString(<var>...</var>). Doing this has the consequence that iterating over the properties of an Object or Array will yield an extra one (toString), so this is off by default. But define READABLE_REPLACE_TOSTRING before loading the file, or invoke Readable.replaceToString() after loading it, and you’ll get this behavior.

Files:
* readable.js
* documentation

Update: Fixed for Internet Explorer.

¹ The reason there’s more than one function is that this is intended to be consistent with fvlogger. It’s also handy to be able to search your sources for one logging function, and not the other.

² One advantage of including Readable even if you’re already using fvlogger is that now info([1,2]) prints something different from info([[1],[2]]). Another is that Readable extends the fvlogger functions with variadicity: info(key, '->', value) works now. (Without Readable, it’s equivalent to info(key), except that value is also evaluated for effect.) Finally, you can use Readable to extend Rhino with the same logging API. I use this to write modules — such as paths and beziers — that I test with Rhino and integrate into a UI in the browser.

The graph in reAnimator is a drawview, but with text labels for the edges. And the graph and parse tree in the Graph and Parse tabs of reMatch both use WHATWG canvas for lines, but text for labels. (These tabs are only visible in Firefox, for now.)

TextCanvas.js implements the canvas context extended with labels, for DHTML. And “textdrawview.lzx” implements drawview extended with labels. They share the same API, so that I can write graphics libraries (such as graph drawing) that work with both DHTML and OpenLaszlo. That API is described here.

The first example below is an OpenLaszlo application that uses textdrawview; view source here.

If you’re using Firefox, you can also view the DHTML example. This uses TextCanvas; open it in a separate page here.

Files:
* textcanvas.js — DHTML implementation
* textcanvas-example.html — DHTML example (shown running above)
* textdrawview.lzx — OpenLaszlo implementation
* textdrawview-example.lzx — OpenLaszlo example (shown running above)
* textcanvas-api — API documentation

Some example code:

// <div id="canvasContainer"></div>
var container = document.getElementById('canvasContainer');
var textCanvasController = new TextCanvasController(container);
var ctx = textCanvasController.getContext('2d');
ctx.moveTo(0, 0);
ctx.lineTo(100, 100);
ctx.stringStyle.color = 'red';
ctx.drawString(0, 0, "red");
ctx.stringStyle.color = 'blue';
ctx.drawString(100, 100, "blue");