Hacker News Reader

Comment by acabal | Hacker News Reader

Am I missing something here or do I really have to type the weird curly-F every time I want to call this? Having charmap open in my taskbar is not my idea of being productive. Plus, from my cursory glance this looks pretty similar, if not almost identical, to jQuery...

View on HN

It is nothing like jQuery. It's a small utility library for easing your life when dealing with raw javascript. You can use ƒ or fu.

It's a lot like jQuery's $ selector mechanism and fluent API. Here's some of your examples compared to their jQ equivalents:

---

ƒ('selector1').ƒ('selector2').ƒ('selector3');

vs.

$('selector1 selector2 selector3');

---

ƒ('body').style.background = '#f4f6f8';

vs.

$('body')[0].style.background = '#f4f6f8';

---

for (var i=0; i < 50; i++) { ƒ('ul').appendChild(ƒ().createElement('li')); }

vs.

$.each($('ul'), function(index, ul) { for(var i=0; i < 50; i++) { ul.appendChild(document.createElement('li')); } });

---

I'm not even a jQuery user but I don't see a lot of difference in your approach versus jQuery's here. I already only use lightweight libraries like jQuery or Ext.Core for situations which call for only minor Javascript (read: not an RIA).

In what situations do you imagine your framework is more useful?

In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax, so I can see why someone would want to build this.

> In the author's defence, the Fu.JS syntax is much nicer than the jQuery syntax

How? No, seriously, how is

    ƒ('body').style.background = '#f4f6f8';

much nicer than

    $('body').css('background', '#f4f6f8');

    fu().body.fu('ul').appendChild(ƒ().createElement('li'));

than

    $('body ul').append($('<li>'));

    document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!";

than

    $(document.body).find('ul li:last-child').text("I'M THE OLD GUY!");

    for (var i=0; i < 50; i++) {
        ƒ('ul').appendChild(ƒ().createElement('li'));
    }

than

    for (var i=0; i<50; ++i) {
        $('ul').append($('<li>'));
    }

    ƒ('ul li:nth-child(2n)', 'style.background = "black"')

than

    $('ul li:nth-child(2n)').css('background', 'black')

?

Some quickie improvements to the jQuery examples:

    $('body ul').append($('<li>'));

can become:

    $('body ul').append('<li>');

and:

    $(document.body).find('ul li:last-child').text("I'M THE OLD GUY!");

can become:

    $("body").find('ul li:last-child').text("I'M THE OLD GUY!");

(We optimize for body explicitly in our selector code.) Although that last example selector is rather weird, it's equivalent to:

    $("body ul li:last-child")

or even just:

    $("ul li:last-child")

(When is a ul ever going to be outside of a body element?)

    document.body.ƒ('ul li:last-child').innerText = "I'M THE NEW GUY!";

That code won't work in standards-compliant browsers. You should either use .textContent = "..." or .appendChild(document.createTextNode("...")) or .firstChild.wholeText = "..." if there's already a text node child.

The real issue though is that unlike jQuery, ƒu.js won't work in popular versions of IE.

Well apart from the first one (clearly my mistake) I was trying to translate the original semantics as closely as possible. Hence the repeated (if not very useful) `body` anchors.

> (When is a ul ever going to be outside of a body element?)

Document fragments? XML documents? Not sure you can use that style of jQuery calls on those, but~~

well for a start, Fu.js is using straight forward assignment statements with the = sign, whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in.

some of the fu.js lines are a bit unwieldy but at least it's obvious to me what they do - i found jQuery code pretty bewildering until i delved into it

> whereas in jquery you're passing two arguments into a function without being able to see what they're for or what order they should be in.

Unless, of course, you've spent roughly 5mn reading upon how jQuery's getting and setting works. Then you know the first argument is a key and the second one is a value to set.

I can see you've also quickly moved the goalposts, from "fu.js's syntax is much nicer" (emphasis yours) to "I claim to undetstand what fu.js does without having read its documentation"

Well in the original examples I responded to, I thought the syntax was considerably nicer, that's what I was commenting on. In the different examples (shifting goalposts...) someone responded to me with, the benefit was less pronounced. In general, jQuery has absolutely horrible syntax (IMO), so I can understand someone building a library to make a few small improvements like normal assignment statements.

I don't think "nothing like jQuery" is really correct here; its API is very similar to jQuery. In fact, it behaves a lot like a very small subset of jQuery, as a neighbouring post to this one points out.

I can imagine it's handy if one wants something like the jQuery API but doesn't need support for all of the CSS selector features, or for older browsers, and wants to save a few bytes on downloads, given that it's much smaller (the uncompressed jQuery source is something like 60 times the size of this library, although in its defence that includes inline documentation).

Reply on news.ycombinator.com