Three Routes to Spaghetti-Free Javascript

Three Routes to Spaghetti-Free Javascript(zef.me)

60 points by afri 15 years ago | 15 comments

Groxx 15 years ago |

Route 1: Streamline.js, a compiles-to-Javascript language.

Route 2: Mobl, a compiles-to-Javascript language.

Route 3: Stratified.js, a compiles-to-Javascript language.

And then a side-mention for something actually in Javascript: https://github.com/caolan/async

So, to make spaghetti-free Javascript... don't write Javascript? I'll keep looking, thanks.

treeface 15 years ago | |

Try jQuery's deferred events. It is, IMO, the most elegant actual-JavaScript solution to the problem I've seen.

bambax 15 years ago |

But why isn't jQuery 1.5 mentionned? See this: http://www.erichynds.com/jquery/using-deferreds-in-jquery/

treeface 15 years ago | |

Yes, exactly. This is a great description of the new deferred events and methods.

nanoanderson 15 years ago |

Not sure if the title is indicative of the tutorial's true usefulness. The information on asynchronous function calling alone is worth the click-through.

I wasn't aware of any of the three javascript packages (are they libraries? frameworks? seems like they're not really), and anyone looking to improve their asynchronous javascript writing skills and readability should take a look. The author admits that debugging could be an issue since these packages all generate new javascript from your current code, but the concepts look very promising.

jdp23 15 years ago | |

Agreed. Extremely interesting and useful ... and not at all what I expected from the title!

defeated 15 years ago |

I've written a library for internal use (that I'm waiting for work to agree to open source) that basically lets you bundle a group of asynchronous calls into a single callback. I prefer this method because it doesn't try and hide the asynchronous nature of the code, it just frees you up from having to nest your callbacks N deep when you require the output from all N asynchronous operations to continue. Wondering what others think about this? Do folks prefer the methods in this article that let you hide the asynchronous nature of some code?

stdbrouw 15 years ago | |

It's been done. One of the best libraries for managing asynchronous code in JS without hiding it away is http://github.com/caolan/async

I agree wholeheartedly, by the way. There's way too much scope for leaky abstractions when you try to hide away the true nature of asynchronous code.

Same reason, I think, why most people are lukewarm about using continuations in web development, like e.g. Seaside does: in principle, very neat, very clean, but it hides away a fundamental aspect of how the web works, which can lead to all sorts of unforeseen behavior re. caching, debugging et cetera.

jerf 15 years ago | | |

"There's way too much scope for leaky abstractions when you try to hide away the true nature of asynchronous code."

Done properly, that's not terribly true. Done properly, correct code transformers can actually bring you a lot of power, such as handling exceptions correctly across asynchronous boundaries or enabling much more powerful control flows, such as being able to freely pass in callbacks that themselves may have asynchronous functionality, layered arbitrarily deeply. The only thing that can "leak" is exactly where the asynchronous breaks occur, but it's not that hard to see that.

It's quite debatable that "the true nature" of asynchronous code is in the manually-scheduled hacked up code that you write by hand in Node.js or similar tools. Other environments that don't require that make a good case for saying that the "true nature" of asynchronous code looks like the synchronous code, only with capable scheduling, and the real "leaky abstraction" is the way your terrible, terrible language runtime scheduler is poking out and requiring you to manually transform your relatively simple code into a spaghetti mess to satisfy it. There's your leaky abstraction, and what leaks out is daggers slicing your code to ribbons.

defeated 15 years ago | | |

Yeah, I assumed there had to be libraries to do this already, but didn't come across anything that did what I wanted. I'll check out async though, thanks for the heads up.

pastachef 15 years ago | |

While I appreciate why people would want to abstract around them for some use cases, I gotta point out that nested serial callbacks aren't just a nuisance. 95%ish of the serial cbs I've written in Node have benefited from their nested lexical scoping: A cb in a serial chain tends to rely on results from earlier in the chain, and it's nice to be able to refer to variables in the outer scopes without having to pass hella arguments between callbacks.

Zef 15 years ago |

I think many people missed my main point. Here's another shot at explaining it better: http://zef.me/3753/planning-ahead-the-async-javascript-probl...

pcwalton 15 years ago |

A colleague of mine wrote a true coroutine library for JavaScript: https://github.com/dherman/jstask

It depends on generators, so it works only in Firefox, but it's a cool hack nonetheless, and might be useful if you're developing Firefox addons.

astrofinch 15 years ago |

Could we make getTitle a method of some webpage object? Then the event handler could set the webpage instance's title attribute. Webpages could have class variables that kept track of the total number of webpages created and the total number that had titles.