The Bling Chain

JQuery is the most popular JavaScript toolkit. But I think it's inherently flawed, and there are much better alternatives.

JQuery is a toolkit for manipulating the Document Object Model (DOM), i.e. the live editable tree structure that the browser creates from a webpage in its memory. It is useful for doing stuff like this:

$("#crotch).sniff().scratch().lick()

The $ (bling) function looks for an element (crotch) in the DOM, and applies some functionality (sniff) to it. Since that function just returns the same element (crotch), you can run it again through another function (scratch). As a matter of fact, every other function returns the same element, so you can create a whole chain of functions (the bling chain). This means that the toolkit extends the element with some custom behavior. Nothing wrong with learning an old dog some new tricks. However, JQuery adds all this functionality in one single dirty file. In fact, JQuery just fails on the nice script above, because it doesn't have any of the tricks in store that I desire.

I could write my own script to extend the basic functionality of JQuery, but that's all very ad hoc. Since I have no way of telling what behavior is currently in JQuery, I'm sure to run into trouble later. I have to manage my extensions in some way as to make them compatible, and this basically means writing a lot of dollar signs.

Alternatives are not always easy to learn, and the backing of JQuery by the community makes it hard to switch. However, DomScript, a stack-based DOM manipulating script built in Clojure, makes for a nice example of how a very clean alternative can be created. Unfortunately it cannot be used in the browser.

Acuna was also created to do JQuery-like DOM manipulation. It is also stack-based, and can be used in the browser. Acuna looks a lot like JQuery, and can even be customized to use the same function names, and because of this, you don't have to know how a stack-based language works to use it. But at the core it has a very powerful concept, and is more than just another toolkit. In addition, every function in Acuna is read from a separate module, so managing modules is very easy.

Bling Chainers beware the walk-in wardrobe scam: JQuery is a scurvy dog in designer clothes.

Comments

Post a Comment

Popular posts from this blog

Abandoning hope... and XForms

Sometimes a decision must be made. I have invested many hours in a standard that is quite complex and tedious to maintain, and that was great fun, but enough is enough. Why did I invest in XForms when it took so much effort and time? Because I believe standards are good and good standards come from the W3C and the XML community. Also, I always had somewhat of an inferiority complex in IT development that I tried to compensate by using techniques supposedly invented for common folk, i.e. non-programmers. Both are bad reasons from where I now stand. I took up XForms because I was infected by the enthusiasm of a friend (who was even quicker to abandon it) about 3 years ago. At first I assumed it just used a model from which to infer a form. It turned out it was like a superset of HTML forms with options for displaying and validating data. This was largely taken up by HTML5, as we all know. The Model remains the core of XForms, but the W3C is slow to respond to innovations and t...
Read more

JS Journey into outer space - Day 5

This article was written as part of a knowledge sharing program I created for front-end developers. It builds up to creating reusable abstractions by studying async transducers. Day 5 It's time to add more operators. We already have map , but what if the mapping function returns another "container" value, like an array or observable? 🦉 In RxJS some operators like switchMap , concatMap , or mergeMap will expect a "project" function that returns an observable (or promise or array), but what happens then? First map is applied with the project function and after that the result is "flattened". In other words: when the returned (inner) observables emit, the mapped (outer) observable emits those values instead. Since RxJs streams have a specific async behaviour the flattening process takes concurrency into account: mergeMap will flatten inner observables whenever they complete, regardless of the order, but concatMap will preserve the order of the ou...
Read more

JS Journey into outer space - Day 4

This article was written as part of a knowledge sharing program I created for front-end developers. It builds up to creating reusable abstractions by studying async transducers. Day 4 Now we have modified transduce to handle async it's time to figure out how it can handle observables. Kickoff 🏈 First we need to pass the onNext function which kicks off the callback chain. In RxJs this is called subscribe instead, so let's rename the parameter and the callbacks to be more in line with RxJs : function transduce ( input , fn , subscribe , onError , onComplete , init ) { subscribe ( input , { next : ( cur ) => { init = fn ( init , cur ) ; } , error : ( err ) => { onError ( init , err ) ; } , complete : ( ) => { onComplete ( init ) ; } } ) ; return init ; } ; 🦉 Observables are considered a push-style of dealing with many values, while generators are pull-based. In...
Read more